ASP.NET CLOUD: Slider

Thursday 16 October 2014

Horizontal Div Slider Jquery Demo

Hi friends, today i am going to show you how to slide horizontally.

If you want to implement in your project you can simply just download the project or copy past the code.

Only thing you need to import is jquery 1.4 or higher version will work. You can give css according to your requirement.


Screen 1


Screen 2


Screen 3


Screen 4

CSS:

#container

{

width: 642px;

height: auto;

overflow: hidden;

}

#list-container

{

overflow: hidden;

width: 600px;

float: left;

border: solid 1px blue;

}

.list

{

background: #fff;

min-width: 3400px;

float: left;

}

#arrowR

{

background: yellow;

width: 20px;

height: 50px;

float: right;

cursor: pointer;

margin-top: 90px;

text-align: center;

font-family: Arial;

font-size: 20px;

color: #000;

padding-top: 25px;

}

#arrowL

{

margin-top: 90px;

background: yellow;

width: 20px;

height: 50px;

float: left;

cursor: pointer;

text-align: center;

font-family: Arial;

font-size: 20px;

color: #000;

padding-top: 25px;

}

.item

{

background: red;

width: 140px;

height: 240px;

margin: 5px;

float: left;

position: relative;

text-align: center;

font-family: Arial;

font-size: 20px;

color: White;

}

</style>

HTML:

Horizontal Slider

</h1>

(Slide When Left and Right button click)</h2>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

Jquery:

<script src="Javascript/jquery-1.7.2.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function() {

var $item = $('div.item'), //Cache your DOM selector

visible = 4, //Set the number of items that will be visible

index = 0, //Starting index

endIndex = ($item.length / visible) - 1; //End index

$('div#arrowR').click(function() {

debugger;

if (index < endIndex) {

index++;

$item.animate({ 'left': '-=600px' });//Set width of your div here

}

});

$('div#arrowL').click(function() {

if (index > 0) {

index--;

$item.animate({ 'left': '+=600px' });//Set width of your div here

}

});

</script>

Download Link:

Download Complete Project

Enjoyed this post? Share and Leave a comment below, thanks! :)

Wednesday 26 February 2014

Flex Slider With Animation "slide" and "Fade" Effect

FlexSlider 2 is the most powerful slider available. Fully responsive; Retina display support (image slider types only) (New); Easing effects (New) and more. The plugin requires jQuery 1.4.2 and above.

Flex Slider with Animation "Slide" Effect

Screen 1

Flex Slider with Animation "Fade" Effect

Screen 2

To Add Flex Slider you need to add this file in head tag :
1. flexslider.css
2. jquery-1.7.2.min
3. jquery.flexslider.js

Script :

HTML :

//Place this html code inside div tag
<h1>
                Flex Slider</h1>
            <div>
                //Place somewhere in the <body> of your page                 <h2 align="left" style="border-bottom: solid 1px white;">
                    Flex Slider Animation "slide" Effect
                </h2>
                <div id="flexSlide" class="flexslider">
                    <ul class="slides">
                        <li>
                            <img src="Images/Screen 1.jpg" />
                        </li>
                        <li>
                            <img src="Images/Screen 2.jpg" />
                        </li>
                        <li>
                            <img src="Images/Screen 3.jpg" />
                        </li>
                        <li>
                            <img src="Images/Screen 4.jpg" />
                        </li>
                    </ul>
                </div>
            </div>
            <div>
            <h2 align="left" style="border-bottom: solid 1px white;">
                    Flex Slider Animation "Fade" Effect
                </h2>
                <div id="flexsliderFade" class="flexslider">
                    <ul class="slides">
                        <li>
                            <img src="Images/Screen 1.jpg" />
                        </li>
                        <li>
                            <img src="Images/Screen 2.jpg" />
                        </li>
                        <li>
                            <img src="Images/Screen 3.jpg" />
                        </li>
                        <li>
                            <img src="Images/Screen 4.jpg" />
                        </li>
                    </ul>
                </div>
            </div>

General Notes

Two new methods are available for adding/removing slides, slider.addSlide() and slider.removeSlide(). More details about this coming soon.

slider.addSlide(obj, pos) accepts two parameters, a string/jQuery object and an index.
slider.removeSlide(obj) accepts one parameter, either an object to be removed, or an index.

For more details and properties visit : FlexSlider 2.2.2 Updates, General Notes, Examples, Properties

Download Link :

Download Complete Project Link

If you have any query feel free to comment it will be appreciated :)