如何在JS滑块中添加自动播放功能

时间:2020-09-11 17:56:09

标签: javascript jquery slider slideshow

我正在使用Codepen中的Gumpy Slider。这是链接https://codepen.io/Lewitje/pen/yNKNmV 现在我只想添加自动播放功能。那么如何通过主动分页使其自动播放?

$(document).ready(function(){
var slide = $(".slide");
var viewWidth = $(window).width();
var sliderInner = $(".slider-inner");
var childrenNo = sliderInner.children().length;

sliderInner.width( viewWidth * childrenNo );

$(window).resize(function(){
    viewWidth = $(window).width();
});

function setWidth(){
    slide.each(function(){
        $(this).width(viewWidth);
        $(this).css("left", viewWidth * $(this).index());
    }); 
}

function setActive(element){
    var clickedIndex = element.index();
    
    $(".slider-nav .active").removeClass("active");
    element.addClass("active");
    
    sliderInner.css("transform", "translateX(-" + clickedIndex * viewWidth + "px) translateZ(0)");
    
    $(".slider-inner .active").removeClass("active");
    $(".slider-inner .slide").eq(clickedIndex).addClass("active");
}

setWidth();

$(".slider-nav > div").on("click", function(){
    setActive($(this));
});

$(window).resize(function(){
    setWidth();
});

setTimeout(function(){
    $(".slider").fadeIn(500);
}, 2000); });

0 个答案:

没有答案