javascript - Continuous motion in an image slider -
i have image slider uses sliding dividers. i'm trying manipulate when click button (previous/next) switch continuous, if dividers switching one. in current slide, when clicking on button, other divider comes replace current divider far position. idea on how make single movement? while keeping same motion in code (left right/right left).
html:
<div id="wrapper"> <div id="nav"> <button id="prev" disabled><<<</button> <button id="next">>>></button> </div> <div id="mask"> <div id="item1" class="item"> <a name="item1"></a> <div class="content"> <img id="image1" src="http://placehold.it/350x150"/> <img id="image2" src="http://placehold.it/350x150"/> <img id="image3" src="http://placehold.it/350x150"/> <img id="image4" src="http://placehold.it/350x150"/> <img id="image5" src="http://placehold.it/350x150"/> <img id="image6" src="http://placehold.it/350x150"/> <img id="image7" src="http://placehold.it/350x150"/> <img id="image8" src="http://placehold.it/350x150"/> <img id="image9" src="http://placehold.it/350x150"/> <img id="image10"src="http://placehold.it/350x150"/> </div> </div> <div id="item2" class="item"> <div class="content"> <img id="image1" src="http://placehold.it/350x150"/> <img id="image2" src="http://placehold.it/350x150"/> <img id="image3" src="http://placehold.it/350x150"/> <img id="image4" src="http://placehold.it/350x150"/> <img id="image5" src="http://placehold.it/350x150"/> <img id="image6" src="http://placehold.it/350x150"/> <img id="image7" src="http://placehold.it/350x150"/> <img id="image8" src="http://placehold.it/350x150"/> <img id="image9" src="http://placehold.it/350x150"/> <img id="image10"src="http://placehold.it/350x150"/> </div> </div> </div> </div> css:
#wrapper { width: 100%; height: 350px; /*position: absolute;*/ top: 0; left: 0; background-color: white; overflow: hidden; } #nav button { position: absolute; top: 100px; } #prev { left: 40px; } #next { right: 40px; } #mask { width: 5000px; height: 100%; background-color: white; } .item { width: 1200px; height: 100%; float: left; background-color: white; } .content img { height: 100px; width: 100px; float:left; margin-right: 10px; margin-bottom: 10px; } .content { width: 50%; height: 220px; top: 20%; margin: auto; background-color: white; position: relative; } .content { position: relative; top: -17px; left: 170px; } .selected { background: #fff; font-weight: 700; } .clear { clear:both; } jquery:
$(document).ready(function () { function shift(direction) { var $mask = $('#mask'), items = $('.item').size(), currentitem = $mask.data('currentitem'), newitem; if (currentitem == undefined) { currentitem = 0; } newitem = currentitem + direction; $mask.data('currentitem', newitem).animate({marginleft: -1200 * newitem}); if (newitem == 0) { $("#prev").prop('disabled', true); } else { $("#prev").prop('disabled', false); } if (newitem == items - 1) { $("#next").prop('disabled', true); } else { $("#next").prop('disabled', false); } } $('#prev').click(function() { return shift(-1); }); $('#next').click(function() { return shift(1); }); }); jsfiddle: https://jsfiddle.net/24jw3xub/
are wanting :
<!doctype html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" /> <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <style> html { border-top: 5px solid #fff; background: #58ddaf; color: #2a2a2a; } html, body { margin: 0; padding: 0; font-family: 'open sans'; } h1 { color: #fff; text-align: center; font-weight: 300; } #slider { position: relative; overflow: hidden; margin: 20px auto 0 auto; border-radius: 4px; } #slider ul { position: relative; margin: 0; padding: 0; height: 200px; list-style: none; } #slider ul li { position: relative; display: block; float: left; margin: 0; padding: 0; width: 500px; height: 300px; background: #ccc; text-align: center; line-height: 300px; } a.control_prev, a.control_next { position: absolute; top: 40%; z-index: 999; display: block; padding: 4% 3%; width: auto; height: auto; background: #2a2a2a; color: #fff; text-decoration: none; font-weight: 600; font-size: 18px; opacity: 0.8; cursor: pointer; } a.control_prev:hover, a.control_next:hover { opacity: 1; -webkit-transition: 0.2s ease; } a.control_prev { border-radius: 0 2px 2px 0; } a.control_next { right: 0; border-radius: 2px 0 0 2px; } .slider_option { position: relative; margin: 10px auto; width: 160px; font-size: 18px; } </style> </head> <h1>incredibly basic slider</h1> <div id="slider"> <a href="#" class="control_next">>></a> <a href="#" class="control_prev"><</a> <ul> <li><img src="http://placehold.it/350x150"/></li> <li><img src="http://placehold.it/350x150"/></li> <li><img src="http://placehold.it/350x150"/></li> <li><img src="http://placehold.it/350x150"/></li> </ul> </div> <div class="slider_option"> <input type="checkbox" id="checkbox"> <label for="checkbox">autoplay slider</label> </div> <body> <script> $(document).ready(function(){ $('#checkbox').change(function(){ setinterval(function () { moveright(); }, 3000); }); var slidecount = $('#slider ul li').length; var slidewidth = $('#slider ul li').width(); var slideheight = $('#slider ul li').height(); var sliderulwidth = slidecount * slidewidth; $('#slider').css({ width: slidewidth, height: slideheight }); $('#slider ul').css({ width: sliderulwidth, marginleft: - slidewidth }); $('#slider ul li:last-child').prependto('#slider ul'); function moveleft() { $('#slider ul').animate({ left: + slidewidth }, 200, function () { $('#slider ul li:last-child').prependto('#slider ul'); $('#slider ul').css('left', ''); }); }; function moveright() { $('#slider ul').animate({ left: - slidewidth }, 200, function () { $('#slider ul li:first-child').appendto('#slider ul'); $('#slider ul').css('left', ''); }); }; $('a.control_prev').click(function () { moveleft(); }); $('a.control_next').click(function () { moveright(); }); }); </script> </body> </html>
Comments
Post a Comment