Я не могу включить автозапуск слайдера - PullRequest
0 голосов
/ 20 февраля 2020

Я пытаюсь настроить блог для друга, и у него есть готовый слайдер. Я действительно не очень хорошо разбираюсь с Html и Javascript, и я пытался настроить автозапуск для ползунка alla fnight.

Где мне добавить класс? Как мне настроить 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;
    }


1 Ответ

1 голос
/ 20 февраля 2020

Slick Slider имеет опцию autoplay, которая при установке на true будет воспроизводиться автоматически. С опцией autoplaySpeed вы можете установить интервал функции автозапуска в миллисекунды . Добавьте autoplay: true и autoplaySpeed: 2000 к вашей инициализации в файле JavaScript.

$('.the-slider-class').slick({
  autoplay: true,
  autoplaySpeed: 2000,
});

В противном случае, если ваш JavaScript файл не может быть изменен или по любой другой причине, вы можете отредактировать HTML элемента слайдера и добавьте data-attribute к элементу. Значение data-attribute - это строка JSON с теми же настройками, что и у вашего JavaScript аналога. См. Пример ниже.

<div class="the-slider-class" data-slick='{"autoplay": true, "autoplaySpeed": 2000}'>
  ...
</div>

Любой из них должен сработать.

Если у вас в данный момент есть другие настройки, которые вы используете, убедитесь, что вы включили их также в свои JavaScript или HTML.

Просмотрите все параметры в документации и примерах Slick Slider.

...