I can't enable slick slider autoplay

Question

I am trying to setup a blog for a friend and it has prebuild slick slider. I am really not good with Html and Javascript and i was trying to setup autoplay for the slider alla fternoon.

Where should i add a class? How should i setup javascript? I really dont know what i should do in order autoplay to be enabled. It is default false. Please explain to me

Slick classes defined are :

/* 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;
    }

Answer 1

Slick Slider has the autoplay option, which when set to true will play automatically. With the autoplaySpeed option you can set the interval of the autoplay function in milliseconds. Add both the autoplay: true and autoplaySpeed: 2000 to your initialization in your JavaScript file.

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

Otherwise, if you JavaScript file cannot be changed or for any other reason, you can edit the HTML of the slider element and add a data-attribute to the element. The value of the data-attribute is a JSON string with the same settings as your JavaScript counterpart. See example below.

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

Either should do the trick.

If you currently have other settings that you use, then make sure that you incorporate those as well in your JavaScript or HTML.

Look for all the options at the documentation and examples of Slick Slider.