Wie man einen Inhaltsschieberegler in jquery wiederholt und autoanimiert

Question

Ich werde seit Tagen verrückt versuchen, einen arbeitenden Schieberegler in jquery zu machen (ich lerne es so, ich bin noch nicht so fähig). Schließlich kam ich dazu, das funktioniert, aber Ich bin nicht in der Lage, es nach der letzten Folie neu zu starten, noch weiß ich, wie man es autostart.

Hier ist das Skript

$(window).load(function(){ 

    var nextId = $('div.slide') 
    var prevId = $('div.slide') 
    var nextAnimation = function(){ 

     $(nextId).animate({ 
      left:'-=800px', 
      }, 800); 
     }; 

    var prevAnimation = function(){ 
      $(prevId).animate({ 
      left:'+=800px', 
      }, 800); 

     }; 



     $('.next').click(nextAnimation); 



    $('.previous').click(prevAnimation); 


}); 

Und hier ist das Markup:

<div class="wrap"> 
<div class="slider" data-slide="0"> 
    <div id="slide" class="slide first"><img src="00001.jpg" /> </div> 
    <div id="slide" class="slide second"><img src="00002.jpg" /></div> 
    <div id="slide" class="slide third"><img src="00003.jpg" /></div> 
    <div id="slide" class="slide fourth"><img src="00004.jpg" /></div> 
    <div id="slide" class="slide fifth"><img src="00005.jpg" /></div> 


</div> 
<div class="next">next</div><div class="previous">prev</div> 


</div> 

Schließlich CSS hier:

.wrap 
{position:relative; 
    display:block; 
width: 800px; 
height: 500px; 
margin: 0 auto; 
overflow:hidden; 
border: 2px solid green; 
} 

.slider 
{position:relative; 
    display:block; 
    width: 4000px; 
height: 500px;} 

.slide 
{position:relative; 
display:block; 
float:left; 
width:800px; 
height:500px;} 

.slide img 
{width:100%; 
    height:auto; 
} 

.next 
{position:absolute; 
    display:block; 
    z-index: 999; 
    top: 200px; 
    right: 0; 
    padding: 10px; 
    background: white; 
    border: 2px solid black; 
    color: black; 
    cursor:pointer; 
} 

.previous 
{position:absolute; 
    display:block; 
    z-index: 999; 
    top: 200px; 
    left: 0; 
    padding: 10px; 
    background: white; 
    border: 2px solid black; 
    color: black; 
    cursor:pointer; 
} 

Ich glaube, ich jetzt alles versucht ^^‘ Kann jemand helfen mir bitte? Danke!

Answer 1

Versuchen Sie folgendes:

$('.next').click(function(){ 
    $('div.slide').animate({ 
     left: "-=800px" 
    }, 800, function() { 
     // Animation complete. 
    }); 
}); 

Answer 2

Check this out. Nur die Breite/Höhe der Box verringert.

$(window).load(function() { 
 

 
    var nextId = $('div.slide'); 
 
    var prevId = $('div.slide'); 
 
    var totalSlides = $(".slider .slide").length; //getting total number of slides present in container 
 
    var currentSlide = 0; //current visible slide number 
 
    var nextAnimation = function() { 
 
    currentSlide++; //moving to next slide 
 
    //checking if we are trying to see slides within our max range 
 
    if (currentSlide < totalSlides) { 
 
     $(nextId).animate({ 
 
     left: '-=300px', 
 
     }, 800); 
 
    } else { 
 
     //we are on last slide and trying to move next; so take user to first slide with no animation delay 
 
     currentSlide = 0; 
 
     $(nextId).animate({ 
 
     left: '0px', 
 
     }); 
 

 
    } 
 
    }; 
 

 
    var prevAnimation = function() { 
 
    currentSlide--;//descreasing the slide count 
 
    //checking if we are not on first slide; other wise we can't do prev on first slide 
 
    if (currentSlide > -1) { 
 
     $(prevId).animate({ 
 
     left: '+=300px', 
 
     }, 800); 
 
    } else { 
 
     //we are on first slide; so take user to last slide by setting left = - (300 * (totalSlides - 1)) 
 
     // for example we have 5 slides; so to show 5th slide: 
 
     // left = - (300 * (5 -1)) 
 
     // left = - 300 * 4 
 
     // left = - 1200 px 
 
     currentSlide = totalSlides - 1; 
 
     $(prevId).animate({ 
 
     left: '-=' + 300 * currentSlide + 'px', 
 
     }); 
 
    } 
 
    }; 
 

 

 

 
    $('.next').click(nextAnimation); 
 

 

 

 
    $('.previous').click(prevAnimation); 
 

 

 
});

.wrap { 
 
    position: relative; 
 
    display: block; 
 
    width: 300px; 
 
    height: 200px; 
 
    margin: 0 auto; 
 
    overflow: hidden; 
 
    border: 2px solid green; 
 
} 
 
.slider { 
 
    position: relative; 
 
    display: block; 
 
    width: 1500px; 
 
    height: 200px; 
 
} 
 
.slide { 
 
    position: relative; 
 
    display: block; 
 
    float: left; 
 
    width: 300px; 
 
    height: 200px; 
 
} 
 
.slide img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.next { 
 
    position: absolute; 
 
    display: block; 
 
    z-index: 999; 
 
    top: 100px; 
 
    right: 0; 
 
    padding: 10px; 
 
    background: white; 
 
    border: 2px solid black; 
 
    color: black; 
 
    cursor: pointer; 
 
} 
 
.previous { 
 
    position: absolute; 
 
    display: block; 
 
    z-index: 999; 
 
    top: 100px; 
 
    left: 0; 
 
    padding: 10px; 
 
    background: white; 
 
    border: 2px solid black; 
 
    color: black; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="wrap"> 
 
    <div class="slider" data-slide="0"> 
 
    <div id="slide" class="slide first"> 
 
     1 
 
    </div> 
 
    <div id="slide" class="slide second"> 
 
     2 
 
    </div> 
 
    <div id="slide" class="slide third"> 
 
     3 
 
    </div> 
 
    <div id="slide" class="slide fourth"> 
 
     4 
 
    </div> 
 
    <div id="slide" class="slide fifth"> 
 
     5 
 
    </div> 
 

 

 
    </div> 
 
    <div class="next">next</div> 
 
    <div class="previous">prev</div> 
 

 

 
</div>