Autoplay Bild-Slider mit Jquery, Javascript und CSS

Question

Ich habe diesen Slider mit jQuery und Javascript erstellt, aber ich kann dies nicht mit dem Outplay und mit der nächsten vorherigen Schaltfläche arbeiten. Ich brauche diesen Schieberegler für Bild als Titel sagte, könnten Sie mir mit der linken/rechten Seite Animation helfen?

$(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(); 

der andere Teil des Codes ist in jsfiddle Link Dies ist der Code https://jsfiddle.net/ghy14p0f/1/

Answer 1

Der einfachste Weg, um die Folie zu tun ist, um das jquery-ui-Modul enthält, für Effekte und Lockerung zu ermöglichen. Ich habe es unten hinzugefügt und die Übergänge erstellt. Auch in deiner Geige sagst du ihr nie, dass sie jquery benutzen soll - also ja, es würde niemals funktionieren. Ich habe eigentlich nicht viel geändert, die einzigen Zeilen, die ich bearbeitet habe, waren das Ausblenden/Überblenden, um sie zu Übergängen zu machen. Viel Glück!!

$(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>