jquery slider

Hello all,

I need some help creating a slider using jquery from scratch (no plugin), also need to have the ability to add more than one slider on a page.

Any help would be great. thanks
yando18Asked:
Who is Participating?
 
GaryCommented:
So what do you have so far?
0
 
Loganathan NatarajanLAMP DeveloperCommented:
@GaryC123 Thanks. I will note and do the best.
0
 
GaryCommented:
Something like this, now this is a really basic slider, no-one is going to reinvent the wheel here

http://jsfiddle.net/ZtbVK/4/

HTML
<img src="http://upload.wikimedia.org/wikipedia/commons/2/26/Nuvola_arrow_left_pink.png" id="prev">
<div id="slider1">
 <div>
    <img src="http://www.menucool.com/slider/prod/image-slider-5.jpg">
    <img src="http://themes.mysitemyway.com/elegance/wp-content/uploads/2011/05/demo-slider-1.jpg">
            <img src="http://dq3f8u841c3z3.cloudfront.net/wp-content/uploads/2013/02/slider2.jpg">
        </div>
        </div>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Nuvola_arrow_right_pink.png/1024px-Nuvola_arrow_right_pink.png" id="next">

Open in new window

CSS
#slider1 {
    width:100px;
        height:50px;
    overflow:hidden;
    display:inline-block;
    position:relative
}
#slider1 div {
    position:absolute;
    width:300px;
    height:50px
}
img {width:100px;
        height:50px;
    border:1px solid blue;
    display:inline-block;

}

Open in new window

jQuery
$("#prev").click(function(){
    $("#slider1 div").animate({"marginLeft":"-=100px"}, "slow");
})
$("#next").click(function(){
    $("#slider1 div").animate({"marginLeft":"+=100px"}, "slow");
})

Open in new window

0
 
yando18Author Commented:
thanks for the example.

how would you implement two different sliders on the same page. Would like this to be modular and not be bound by id's.


<img src="http://upload.wikimedia.org/wikipedia/commons/2/26/Nuvola_arrow_left_pink.png" class="prev">
<div id="slider1">
 <div>
    <img src="http://www.menucool.com/slider/prod/image-slider-5.jpg">
    <img src="http://themes.mysitemyway.com/elegance/wp-content/uploads/2011/05/demo-slider-1.jpg">
            <img src="http://dq3f8u841c3z3.cloudfront.net/wp-content/uploads/2013/02/slider2.jpg">
        </div>
        </div>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Nuvola_arrow_right_pink.png/1024px-Nuvola_arrow_right_pink.png" class="next">




<img src="http://upload.wikimedia.org/wikipedia/commons/2/26/Nuvola_arrow_left_pink.png" class="prev">
<div id="slider2">
 <div>
    <img src="http://www.menucool.com/slider/prod/image-slider-5.jpg">
    <img src="http://themes.mysitemyway.com/elegance/wp-content/uploads/2011/05/demo-slider-1.jpg">
            <img src="http://dq3f8u841c3z3.cloudfront.net/wp-content/uploads/2013/02/slider2.jpg">
        </div>
        </div>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Nuvola_arrow_right_pink.png/1024px-Nuvola_arrow_right_pink.png" class="next">

Open in new window


$(".prev").click(function(){
    $("#slider1 div").animate({"marginLeft":"-=100px"}, "slow");
})
$(".next").click(function(){
    $("#slider1 div").animate({"marginLeft":"+=100px"}, "slow");
})


$(".prev").click(function(){
    $("#slider2 div").animate({"marginLeft":"-=100px"}, "slow");
})
$(".next").click(function(){
    $("#slider2 div").animate({"marginLeft":"+=100px"}, "slow");
})

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.