自定义图像滑块不工作

Question

我试图创建一个图像滑块，问题是，我似乎无法通过我的图片的div的环...

我想到了创建一个数组包含所有的div，并通过他们的循环，但我不知道如何做到这一点......

此外，我需要居中，纵向和横向对齐图像在他们各自的div，我通常使用flexbox这样做，但在我所拥有的，我不能真正使用flexbox。你们可以看看我有什么可能帮助我吗？

$(document).ready(function() { 
 
    var slider = $('.slider-tile'); 
 
    var one = slider.first().addClass('active'); 
 

 
    $('.next').click(function() { 
 
    var currentActive = slider.filter(".active"); 
 
    var nextNumber = currentActive.next(); 
 
    if (nextNumber.hasClass("hidden")) { 
 
     currentActive.removeClass("active").addClass('hidden'); 
 
     nextNumber.removeClass('hidden').addClass("active"); 
 

 
     if ($('.slider-tile').last().hasClass('active')) { 
 
     $(currentActive).removeClass('active'); 
 
     $('.slider-tile').first().addClass('active').removeClass('hidden'); 
 
     } 
 

 
    } 
 
    }); 
 

 
    $(".prev").click(function() { 
 
    var currentActive = slider.filter(".active"); 
 
    var prevNumber = currentActive.prev(); 
 
    if (prevNumber.hasClass("hidden")) { 
 
     currentActive.removeClass("active").addClass('hidden'); 
 
     prevNumber.removeClass('hidden').addClass("active"); 
 
    } 
 
    }); 
 
});

.slider { 
 
    width: 500px; 
 
    height: 500px; 
 
    background-color: #a2a2a2; 
 
} 
 
.hidden { 
 
    display: none; 
 
} 
 
.slider-tile { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: navy; 
 
    color: white; 
 
    float: left; 
 
} 
 
.slider-tile img { 
 
    max-width: 500px; 
 
    max-height: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="slider"> 
 
    <div class="slider-tile"> 
 
    <img src="https://dummyimage.com/600x400/8c2b8c/ffffff" alt="" /> 
 
    </div> 
 

 
    <div class="slider-tile hidden"> 
 
    <img src="https://dummyimage.com/600x400/540154/ffffff" alt="" /> 
 
    </div> 
 

 
    <div class="slider-tile hidden"> 
 
    <img src="https://dummyimage.com/600x400/8c2b8c/ffffff" alt="" /> 
 
    </div> 
 

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

，这里是我工作的PEN。

Answer 1

下/上一个导航脚本可以被修改，以这样的事：

（尽管从最后一张幻灯片去下一个，你可以回到第一个和周围的其他方式，而会上一页从第一张幻灯片）

$('.next').click(function() { 
    var currentActive = slider.filter(".active"); 
    currentActive.removeClass("active").addClass('hidden'); 
    if (currentActive.is(slider.last())) { 
     slider.first().removeClass('hidden').addClass("active"); 
    } else { 
     currentActive.next().removeClass('hidden').addClass("active"); 
    } 
    }); 

    $(".prev").click(function() { 
    var currentActive = slider.filter(".active"); 
    currentActive.removeClass("active").addClass('hidden'); 
    if (currentActive.is(slider.first())) { 
     slider.last().removeClass('hidden').addClass("active"); 
    } else { 
     currentActive.prev().removeClass('hidden').addClass("active"); 
    } 
    }); 

您可以也创建一个flexbox的活跃幻灯片一样：

.slider-tile.active { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

下面

观看演示：

$(document).ready(function() { 
 
    var slider = $('.slider-tile'); 
 
    var one = slider.first().addClass('active'); 
 

 
    $('.next').click(function() { 
 
    var currentActive = slider.filter(".active"); 
 
    currentActive.removeClass("active").addClass('hidden'); 
 
    if (currentActive.is(slider.last())) { 
 
     slider.first().removeClass('hidden').addClass("active"); 
 
    } else { 
 
     currentActive.next().removeClass('hidden').addClass("active"); 
 
    } 
 

 

 
    }); 
 

 
    $(".prev").click(function() { 
 
    var currentActive = slider.filter(".active"); 
 
    currentActive.removeClass("active").addClass('hidden'); 
 
    if (currentActive.is(slider.first())) { 
 
     slider.last().removeClass('hidden').addClass("active"); 
 
    } else { 
 
     currentActive.prev().removeClass('hidden').addClass("active"); 
 
    } 
 

 
    }); 
 
});

.slider { 
 
    width: 500px; 
 
    height: 500px; 
 
    background-color: #a2a2a2; 
 
} 
 
.hidden { 
 
    display: none; 
 
} 
 
.slider-tile { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: navy; 
 
    color: white; 
 
    float: left; 
 
} 
 
.slider-tile img { 
 
    max-width: 500px; 
 
    max-height: 500px; 
 
} 
 
.slider-tile.active { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="slider"> 
 
    <div class="slider-tile"> 
 
    <img src="https://dummyimage.com/600x400/8c2b8c/ffffff" alt="" /> 
 
    </div> 
 

 
    <div class="slider-tile hidden"> 
 
    <img src="https://dummyimage.com/600x400/540154/ffffff" alt="" /> 
 
    </div> 
 

 
    <div class="slider-tile hidden"> 
 
    <img src="https://dummyimage.com/600x400/8c2b8c/ffffff" alt="" /> 
 
    </div> 
 

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