i have created this slider with jQuery and javascript but I can't make this work with the outplay and with next-previous button. I need this slider for image as title said, could you help me with left/right side animation?
$(document).ready(function(){
$('.sp').first().addClass('active');
$('.sp').hide();
$('.active').show();
$('.active').removeClass('active').addClass('oldActive');
if ( $('.oldActive').is(':last-child'))
{
$('.sp').first().addClass('active');
}
else
{
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
setTimeout('.active', 1000);
$('.sp').fadeOut();
$('.active').fadeIn();
the other part of the code is in jsfiddle link this is the code https://jsfiddle.net/ghy14p0f/1/
Easiest way to do the slide is to include the jquery-ui module, to allow for effects and easing. I've added it below, and created the transitions. Also, in your fiddle, you never actually tell it to use jquery -- so yeah, it would never work. I didn't actually change much, the only lines I edited were the fadeout/fadein to make them transitions. Best of luck!!
$(document).ready(function() { $('.sp').first().addClass('active'); $('.sp').hide(); $('.active').show(); $('#button-next').click(function() { $('.active') .removeClass('active') .addClass('oldActive'); if ($('.oldActive').is(':last-child')) { $('.sp').first().addClass('active'); } else { $('.oldActive').next().addClass('active'); } $('.oldActive').hide("slide", { direction: "right" }, 600).removeClass('oldActive'); $('.active').delay(400).show("slide", { direction: "left" }, 600); }); $('#button-previous').click(function() { $('.active').removeClass('active').addClass('oldActive'); if ($('.oldActive').is(':first-child')) { $('.sp').last().addClass('active'); } else { $('.oldActive').prev().addClass('active'); } $('.oldActive').hide("slide", { direction: "left" }, 600).removeClass('oldActive'); $('.active').delay(400).show("slide", { direction: "right" }, 600); }); });
#slider-wrapper { width: 500px; height: 200px; } #slider { width: 500px; height: 200px; position: relative; } .sp { width: 500px; height: 200px; position: absolute; } img { height: 200px; } #nav { margin-top: 20px; width: 100%; } #button-previous { border: 1px dotted blue; background-color: #ccc; float: left; } #button-next { border: 1px dotted blue; background-color: #ccc; float: right; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <div id="slider-wrapper"> <div id="slider"> <div class="sp"> <img src="https://upload.wikimedia.org/wikipedia/commons/3/32/Bianco_e_Rosso_(Croce)_e_Rosso.png"> First Image </div> <div class="sp"> <img src="https://upload.wikimedia.org/wikipedia/commons/f/f0/600px_Rosso_e_Giallo.PNG"> Second Image </div> <div class="sp"> <img src="https://upload.wikimedia.org/wikipedia/en/4/4c/Flag_of_Sweden.svg"> Third Image </div> </div> </div> <div id="nav"></div> <div id="button-previous">prev</div> <div id="button-next">next</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.