Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/81.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 我无法启用slick slider自动播放_Javascript_Html_Css_Slick.js - Fatal编程技术网

Javascript 我无法启用slick slider自动播放

Javascript 我无法启用slick slider自动播放,javascript,html,css,slick.js,Javascript,Html,Css,Slick.js,我正试图建立一个朋友的博客,它已经预建光滑滑块。 我真的不擅长Html和Javascript,我试图在下午为滑块alla设置自动播放 我应该在哪里添加类?我应该如何设置javascript?我真的不知道该怎么做才能启用自动播放。默认为false。请给我解释一下 定义的光滑类包括: /* slicknav */ /* Mobile Menu Core Style */ .slicknav_btn { position: relative; display: block; vertical-ali

我正试图建立一个朋友的博客,它已经预建光滑滑块。 我真的不擅长Html和Javascript,我试图在下午为滑块alla设置自动播放

我应该在哪里添加类?我应该如何设置javascript?我真的不知道该怎么做才能启用自动播放。默认为false。请给我解释一下

定义的光滑类包括:


/* slicknav */
/*
Mobile Menu Core Style
*/
.slicknav_btn { position: relative; display: block; vertical-align: middle; float: left; padding: 0.438em 0.625em 0.438em 0.625em; line-height: 1.125em; cursor: pointer; }
.slicknav_menu  .slicknav_menutxt { display: block; line-height: 1.188em; float: left; }
.slicknav_menu .slicknav_icon { float: left; padding:3px;}
.slicknav_menu .slicknav_no-text { margin: 0 }
.slicknav_menu .slicknav_icon-bar { display: block; width: 1.125em; height: 0.125em; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar { margin-top: 0.188em }
.slicknav_nav { clear: both }
.slicknav_nav ul,
.slicknav_nav li { display: block ;line-height: 20px;}
.slicknav_nav .slicknav_arrow { font-size: 0.8em; margin: 0 0 0 0.4em; }
.slicknav_nav .slicknav_item { cursor: pointer; }
.slicknav_nav .slicknav_row { display: block; }
.slicknav_nav a { display: block }
.slicknav_nav .slicknav_item a,
.slicknav_nav .slicknav_parent-link a { display: inline }
.slicknav_menu:before,
.slicknav_menu:after { content: " "; display: table; }
.slicknav_menu:after { clear: both }
/* IE6/7 support */
.slicknav_menu { *zoom: 1 }
/*
User Default Style
Change the following styles to modify the appearance of the menu.
*/
.slicknav_menu {
font-size:16px;
}
/* Button */
.slicknav_btn {
margin: 3px;
text-decoration:none;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}

.slicknav_menu>a {
    border: 1px solid #eee; background: #fff;

}

/* Button Text */
.slicknav_menu  .slicknav_menutxt {
color: #000;
font-weight: bold;
float:right;
}
/* Button Lines */
.slicknav_menu .slicknav_icon-bar {
background-color: #fff;
}
.slicknav_menu {

padding:0px;    
}
.slicknav_nav {
color:#fff;
background:#000;
margin:0;
padding:0;
font-size:0.875em;
}
.slicknav_nav, .slicknav_nav ul {
list-style: none;
overflow:hidden;
}
.slicknav_nav ul {
padding:0;
margin:0 0 0 20px;
}
.slicknav_nav .slicknav_row {
padding:5px 10px;
margin:2px 5px;
}
.slicknav_nav a{
padding:5px 10px;
margin:2px 5px;
text-decoration:none;
color:#fff;
}
.slicknav_nav .slicknav_item a,
.slicknav_nav .slicknav_parent-link a {
padding:0;
margin:0;
}
.slicknav_nav .slicknav_row:hover {
background:#ccc;
color:#fff;
}
.slicknav_nav a:hover{
background:#ccc;
color:#222;
}
.slicknav_nav .slicknav_txtnode {
margin-left:15px;
}
/* slicknav */
.slicknav_menu {
display:none;
}
@media screen and (max-width: 890px) {
/* #masthead is the original menu */
#navtop {
display:none;
}
.slicknav_menu {
display:block;
}
}```



and 

    /* Slider */
    .slick-slider
    {
        position: relative;
    margin-bottom:0;
        display: block;
        box-sizing: border-box;

        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;

        -webkit-touch-callout: none;
        -khtml-user-select: none;
        -ms-touch-action: pan-y;
            touch-action: pan-y;
        -webkit-tap-highlight-color: transparent;odd-pager
    }

    .slick-list
    {
        position: relative;

        display: block;
        overflow: hidden;

        margin: 0;
        padding: 0;
    }


    .slick-list:focus
    {
        outline: none;
    }
    .slick-list.dragging
    {
        cursor: pointer;
        cursor: hand;
    }

    .slick-slider .slick-track,
    .slick-slider .slick-list
    {
        -webkit-transform: translate3d(0, 0, 0);
           -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
             -o-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }

    .slick-track
    {
        position: relative;
        top: 0;
        left: 0;

        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .slick-track:before,
    .slick-track:after
    {
        display: table;

        content: '';
    }
    .slick-track:after
    {
        clear: both;
    }
    .slick-loading .slick-track
    {
        visibility: hidden;
    }

    .slick-slide
    {
        display: none;
        float: left;

        height: 100%;
        min-height: 1px;
    }
    [dir='rtl'] .slick-slide
    {
        float: right;
    }
    .slick-slide img
    {
        display: block;
    }
    .slick-slide.slick-loading img
    {
        display: none;
    }
    .slick-slide.dragging img
    {
        pointer-events: none;
    }
    .slick-initialized .slick-slide
    {
        display: block;
    }
    .slick-loading .slick-slide
    {
        visibility: hidden;
    }
    .slick-vertical .slick-slide
    {
        display: block;

        height: auto;

        border: 1px solid transparent;
    }
    .slick-arrow.slick-hidden {
        display: none;
    }

    .slick-next{right:0px;}
    .slick-prev {

        margin-right: 8px;
    left:0px;
    }

    .slick-prev, .slick-next {
        top: 50%;
    z-index:999;
        width: 40px;

        height: 50px;
    }
    .slick-next:before {
        content: "";
    }
    .slick-prev:before {
        content: "";
    }

    .slick-prev:before, .slick-next:before{opacity:0;font-size:40px;transition:300ms;-o-transition:300ms;-moz-transition:300ms;-webkit-transition:300ms;}



    .slick-prev:before {
        color: #fff;text-align: center;
        display: block;
        line-height: 0;
    }

    .slick-next:before {
        color: #fff;text-align: center;
        display: block;
        line-height: 0;
    }

    .slickslider .item-wrap-inner{position:relative;}

    .slickslider .item-info {
            width:100%;font-size: 12px;

    }
    .slickslider .item{position:relative;}
    .slickslider
     .item-image {
        background: #000;
    }

    .slickslider .item-image a {
        opacity: .7!important;
    }
    .itemtopinfo {
        padding: 0;
        position: absolute;
        left: 50%;
        top: 50%;
        width: 55%;
        transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
    }
    .slickslider .item-info {
        width: 100%;
        font-size: 12px;
    }


Slick Slider具有自动播放选项,设置为true时将自动播放。使用autoplaySpeed选项,可以设置autoplay函数的间隔(以毫秒为单位)。 将autoplay:true和autoplaySpeed:2000添加到JavaScript文件中的初始化中

$('.the-slider-class').slick({
  autoplay: true,
  autoplaySpeed: 2000,
});
否则,如果您无法更改JavaScript文件或出于任何其他原因,则可以编辑slider元素的HTML并向元素添加数据属性。data属性的值是一个JSON字符串,其设置与JavaScript对应项相同。见下面的例子

<div class="the-slider-class" data-slick='{"autoplay": true, "autoplaySpeed": 2000}'>
  ...
</div>
这两种方法都应该奏效

如果您当前使用了其他设置,那么请确保将这些设置也包含在JavaScript或HTML中


查找Slick滑块的所有选项。

这是JavaScript初始化中的一个设置。您能在使用Slick的地方添加JavaScript部分吗?是的,这应该与列出的CSS类无关。它们处理的是外观和感觉,而不是功能。另外,你能链接到你已经实现的滑块吗?@ps138你的完整代码在哪里?