Как петля и автоанимировать слайдер контента в jQuery

Question

Я схожу с ума, так как дни пытаются создать рабочий слайдер в jquery (я изучаю его, поэтому я еще не способен). Наконец я пришел к этому, это действительно работает, , но Я не могу запустить его после последнего слайда, и не знаю, как его автозапуск.

Вот сценарий

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


}); 

А вот разметка:

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

Наконец CSS здесь:

.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; 
} 

Я думаю, что я попытался сейчас все ^^ Может кто-то помочь Я пожалуйста? Спасибо!

Answer 1

Попробуйте это:

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

Answer 2

Проверьте это. Просто уменьшена ширина/высота коробки.

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