我想为我的 slider 添加效果，但我不知道如何处理这种情况？
所以当点击预览或下一步按钮时，改变 slider 效果 我使用过渡属性 CSS 代码但无法正常工作!
如果可能，请帮助更正我的代码，谢谢!
这是我的 HTML 代码:
<div class="shop-slider fade">
</div>
<div class="shop-slider fade">
</div>
<div class="shop-slider fade">
</div>
<div class="shop-slider fade">
</div>
<a class="prev-shop-slide" onclick="plusShopSlides(-1)"><i class="fas fa-chevron-circle-left"></i></a>
<a class="next-shop-slide" onclick="plusShopSlides(1)"><i class="fas fa-chevron-circle-right"></i></a>
</div>
这是 JavaScript 代码:
var slideNum = 1;
showShopSlides(slideNum);
function plusShopSlides(n) {
showShopSlides(slideNum += n);
}
function currentSlide(n) {
showShopSlides(slideNum = n);
}
function showShopSlides(n) {
var i;
var slides = document.getElementsByClassName("shop-slider");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideNum = 1}
if (n < 1) {slideNum = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideNum-1].style.display = "block";
dots[slideNum-1].className += " active";
}
这是我的CSS:
.shop-slider-container{
width: 600px;
height: 350px;
background: #fff;
position: relative;
}
.shop-slider {
display: none;
font-family: iransans;
font-size: 16px;
transition: 0.5s ease-out;
}
.prev-shop-slide, .next-shop-slide {
cursor: pointer;
position: absolute;
top: 60%;
color: #14b8c2;
font-size: 20px;
}
.next-shop-slide {
margin-right: 10px;
}
.prev-shop-slide {
margin-right: 40px;
}
.prev-shop-slide:hover, .next-shop-slide:hover {
color: #000;
}.fade {
}
@-webkit-keyframes fade {
}
@keyframes fade {
}
最佳答案
您可以使用 jQuery UI 中的附加效果来做到这一点:slide-effect
示例
$(this).hide("slide", { direction: "left" }, 1000);
$(this).show("slide", { direction: "left" }, 1000);
在这种情况下使用 jquery，祝你好运!!
关于javascript - 如何添加过渡我的 slider ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50008874/