给定一个包含幻灯片的滑块div，如何单击才能滚动到下一张幻灯片？

Question

所以我有this JSFiddle。我基本上是这样的：

<div class="slider">
     <div class="slides">
         <div></div>
         <div></div>
         <div></div>
     </div>
 </div>

使用JQuery单击幻灯片时，如何滚动到下一张幻灯片？任何帮助将不胜感激。

Answer 1

  
$(function(){
        $('div.arrow-button button.next').click(function(){
            var currentSlide =  $('div.slider div.slides div.active');
            var nextSlide = $('div.slider div.slides div.active + div');
            if (nextSlide.length == 0) {
                nextSlide = $('div.slider div.slides div:first-child');
            }
            currentSlide.removeClass('active');
            nextSlide.addClass('active');
        });
    });

div.slider div.slides div {
    width: 400px;
    height: 100px;
    background-color: gray;
    color: white;
    display: none;
}

    div.slider div.slides div.active {
        display: block;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slider">
    <div class="slides">
        <div class="active">1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <div class="arrow-button">
        <button type="button" class="next">next</button>
    </div>
</div>