Question

我想为我的滑块添加效果，但我不知道如何处理这种情况？

因此，当点击预览或下一个按钮时，更改滑块效果我使用过渡属性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 {


}

Answer 1

您可以使用jQuery UI中的其他效果执行此操作：slide-effect

示例

$(this).hide("slide", { direction: "left" }, 1000); $(this).show("slide", { direction: "left" }, 1000);

在这种情况下使用jquery，祝你好运！

如何添加转换我的滑块？

1 个答案: