слайд изображения, конфликтующий с другим div

Question

Ну, мои коды работают нормально, но только если я добавлю несколько div, например. В тот момент, когда я загружаю страницу, первый альбом альбома воспроизводит изображения, а второй исчезает, но когда первый образ альбома альбома достигает последнего изображения, слайдер начинает играть во втором альбоме. Надеюсь, я не смущаюсь?

, пожалуйста, посмотрите на скрипке, что именно происходит

Fiddle Demo

<div class="imgslide"> 
    <div style="display: inline-block;"> 
    <img src="images/room1.jpg" /> 
    </div> 
    <div> 
    <img src="images/room2.jpg" /> 
    </div> 
    <div> 
    <img src="images/room3.jpg" /> 
    </div> 
    <div> 
    <img src="images/room4.jpg" /> 
    </div> 
    <div> 
    <img src="images/room5.jpg" /> 
    </div> 
    <div> 
    <img src="images/room6.jpg" /> 
    </div> 
</div> 

Answer 1

Вы должны перебрать каждого альбома и прикрепить функциональность к ним как

$(function() { 
 
    $('.albums').each(function() { 
 

 
    var currentIndex = 0, 
 
     $album = $(this), 
 
     items = $('.imgslide div', this), 
 
     itemAmt = items.length; 
 

 
    function cycleItems() { 
 
     var item = $('.imgslide div', $album).eq(currentIndex); 
 
     items.hide(); 
 
     item.css('display', 'inline-block'); 
 
    } 
 

 
    var autoSlide = setInterval(function() { 
 
     currentIndex += 1; 
 
     if (currentIndex > itemAmt - 1) { 
 
     currentIndex = 0; 
 
     } 
 
     cycleItems(); 
 
    }, 2000); 
 

 
    $('.next', this).click(function(e) { 
 
     e.preventDefault(); 
 
     clearInterval(autoSlide); 
 
     currentIndex += 1; 
 
     if (currentIndex > itemAmt - 1) { 
 
     currentIndex = 0; 
 
     } 
 
     cycleItems(); 
 
    }); 
 

 
    $('.prev', this).click(function(e) { 
 
     e.preventDefault(); 
 
     clearInterval(autoSlide); 
 
     currentIndex -= 1; 
 
     if (currentIndex < 0) { 
 
     currentIndex = itemAmt - 1; 
 
     } 
 
     cycleItems(); 
 
    }); 
 
    }); 
 
});

.albums { 
 
    position: relative; 
 
} 
 
.imgslide { 
 
    max-width: 400px; 
 
    background-color: black; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
.imgslide div { 
 
    background-color: white; 
 
    width: 100%; 
 
    display: inline-block; 
 
    display: none; 
 
} 
 
.imgslide img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.prev, 
 
.next { 
 
    position: absolute; 
 
    top: 50px; 
 
    font-size: 20px; 
 
    text-decoration: none; 
 
    color: #fff; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    padding: 5px; 
 
    z-index: 2; 
 
} 
 
.next { 
 
    right: 1px; 
 
    border-right: 3px solid #DC6242; 
 
} 
 
.prev { 
 
    left: 1px; 
 
    border-left: 3px solid #DC6242; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- The albums are dynamically generated and im just trying to slide the thumb images but something is just not ok --> 
 

 
<div class="albums"> 
 
    <h2>Album Name: <?php echo $albumname; ?> </h2> 
 
    <div class="imgslide"> 
 
    <div style="display: inline-block;"> 
 
     <img src="http://pawmax.com/wp-content/uploads/2011/08/2dogs1.jpg" /> 
 
    </div> 
 
    <div> 
 
     <img src="http://www.eastcountymagazine.org/sites/eastcountymagazine.org/files/dog%20show2.jpg" /> 
 
    </div> 
 
    <div> 
 
     <img src="http://wpelegacy.redfm.ie/2013/07/dogs2-e1373638129723-200x100.jpg" /> 
 
    </div> 
 
    <div> 
 
     <img src="http://www.wired.com/wp-content/uploads/2014/11/hipster-dogs-ft-200x100.jpg" /> 
 
    </div> 
 
    </div> 
 
    <a href="#" class="next">&raquo;</a> 
 
    <a href="#" class="prev">&laquo;</a> 
 
</div> 
 

 
<!-- Second Albim in same page --> 
 

 
<div class="albums"> 
 
    <h2>Album Name: <?php echo $albumname; ?> </h2> 
 
    <div class="imgslide"> 
 
    <div style="display: inline-block;"> 
 
     <img src="http://pawmax.com/wp-content/uploads/2011/08/2dogs1.jpg" /> 
 
    </div> 
 
    <div> 
 
     <img src="http://www.eastcountymagazine.org/sites/eastcountymagazine.org/files/dog%20show2.jpg" /> 
 
    </div> 
 
    <div> 
 
     <img src="http://wpelegacy.redfm.ie/2013/07/dogs2-e1373638129723-200x100.jpg" /> 
 
    </div> 
 
    <div> 
 
     <img src="http://www.wired.com/wp-content/uploads/2014/11/hipster-dogs-ft-200x100.jpg" /> 
 
    </div> 
 
    </div> 
 
    <a href="#" class="next">&raquo;</a> 
 
    <a href="#" class="prev">&laquo;</a> 
 
</div>