Simple jQuery Slider/Carousel for Content with Left/Right Arrows & No-Autoplay -
Simple jQuery Slider/Carousel for Content with Left/Right Arrows & No-Autoplay -
i'm trying create simple jquery slider/carousel controls. want slide in or out 3 divs when clicking on left , right arrows. don't need autoplay now. want tried many plugins , tutorials online. searched stackoverflow answers, don't solve case. so...
this html (simplified):
<div class="slider"> <div class="wrap-12"> <div class="slides"> <div class="slide name1"><!-- stuff --></div> <div class="slide name2"><!-- stuff --></div> <div class="slide name3"><!-- stuff --></div> </div> <div class="controls"> <div class="left"></div> <div class="right"></div> </div> </div> </div> and css:
.slider .slides { width: 1020px; white-space: nowrap; font-size: 0; } .slider .slide { width: 1020px; display: inline-block; } to move slide 2, first div needs margin-left: -100% applied, move slide 3 (still first slide) needs margin-left: -200% applied, 4 -300%...
very basic jquery code got:
// slider // cache dom var $slide = $('.slider .slide').first(); var snum = 1; // wanted utilize slide number // next $('.slider .right').click(function(){ $slide.animate({'margin-left': '-=100%'}, 600, function(){ // function after clicked right arrow, doesn't have here if there simple way of doing :p }); }); // prev $('.slider .left').click(function(){ $slide.animate({'margin-left': '+=100%'}, 600, function(){ // function after clicked left arrow }); }); all when click on left arrow slides slide 2, 3... when click left goes 1 slide. doesn't stop when nail lastly slide nor first. want code give active slide (one we're sliding to) active-in class, previous slide: out class. active slide needs pass sec class ex. name3 class body tag <body class="name3">. after jquery visit should this:
<body class="name3"> <!-- (...) --> <div class="slide name1"></div> <div class="slide name2 out"></div> <div class="slide name3 active-in"></div> i hope isn't hard or impossible jquery. of course, don't need utilize jquery code base, if there simpler & shorter way code. brief explanation awesome.
may suggest using jquery cycle 2.0
add want slider
<div id=outside> <!-- prev/next links --> <div class=center> <span id=prev>prev</span> <span id=next>next</span> </div> <!-- slideshow --> <div class="cycle-slideshow" data-cycle-timeout=0 <!-- alter whatever want interval changing slides e.g (4000 = 4s) --> data-cycle-prev="#prev" data-cycle-next="#next" > <div class="slide name1"><!-- stuff --></div> <div class="slide name2"><!-- stuff --></div> <div class="slide name3"><!-- stuff --></div> </div> </div> add near tag
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="http://malsup.github.com/jquery.cycle2.js"></script> cycle 2.0 link :
http://jquery.malsup.com/cycle2/demo/
on side note if decide utilize cycle 2.0 add together css stop images flashing on load
.cycle-slideshow div { display: none; } .cycle-slideshow div.cycle-sentinel{ display: block; } jquery slider carousel
Comments
Post a Comment