javascript - 我无法启用平滑滑块自动播放
问题描述
我正在尝试为朋友设置一个博客,它具有预构建的光滑滑块。我真的不擅长 Html 和 Javascript,我试图为滑块设置自动播放。
我应该在哪里添加课程?我应该如何设置javascript?我真的不知道我应该怎么做才能启用自动播放。默认为假。请给我解释
定义的光滑类是:
/* 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 有autoplay
选项,设置为true
自动播放。使用该autoplaySpeed
选项,您可以以毫秒为单位设置自动播放功能的间隔。autoplay: true
在 JavaScript 文件中将和添加autoplaySpeed: 2000
到您的初始化中。
$('.the-slider-class').slick({
autoplay: true,
autoplaySpeed: 2000,
});
否则,如果您的 JavaScript 文件无法更改或出于任何其他原因,您可以编辑滑块元素的 HTML 并将 a 添加data-attribute
到元素中。的值data-attribute
是一个 JSON 字符串,其设置与您的 JavaScript 对应项相同。请参见下面的示例。
<div class="the-slider-class" data-slick='{"autoplay": true, "autoplaySpeed": 2000}'>
...
</div>
要么应该做的伎俩。
如果您当前使用其他设置,请确保将这些设置也包含在您的 JavaScript 或 HTML 中。
在Slick Slider的文档和示例中查找所有选项。
推荐阅读
- leaflet - 透明 div“上方”地图阻止拖动
- css - Flexbox 行使用顶部菜单和灵活的底部内容
- angular - 查看服务器上存在的文档
- javascript - 如何为 Azure 表存储 REST 请求生成 SharedKeyLite
- php - 循环和排序结果而不重复
- android - 将对象从一个片段传递到另一个片段并将接收到的对象存储在全局对象中
- java - 无法为任务“:compileGroovy”捕获输入文件的指纹
- jenkins - Jenkins Terminal 不支持执行 hg purge
- javascript - 如何使用 Sinon 正确模拟 require('uuid/v1')
- java - 未触发 Firestore 的 AddonCompleteListener