使用Jquery，javascript和CSS自动播放图像滑块

Question

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/

Answer 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>