Slick slider

Initialized before ajax

function sliderIndex() {
    $('.items_slider_kitchen_line').not('.slick-initialized').slick({
        infinite: false,
        slidesToShow: 3,
        slidesToScroll: 1
    });
}

//ajax success
sliderIndex();

Slider youtube

//js
//slider detail
$(document).ready(function(){
    $('.slider_detail').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: true,
        asNavFor: '.nav_slider_detail',
        rows: 0
    });
    $('.nav_slider_detail').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        asNavFor: '.slider_detail',
        dots: false,
        focusOnSelect: true,
        arrows: true,
        rows: 0,
        responsive: [
            {
                breakpoint: 992,
                settings: {
                    slidesToShow: 2,
                    arrows: false
                }
            }
        ]

    });
    playVideoSlider();
});

//play video slider
function playVideoSlider() {
    var srcVideo = $('.slider_detail .slider_youtube iframe').attr('src');
    $('.nav_slider_detail').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
        event.preventDefault();
        if ($('.slider_detail .slider_youtube iframe').length) {
            var curVideoItem = $(this).find("[data-slick-index='" + nextSlide + "']");
            if (curVideoItem.hasClass('nav_slider_youtube')) {
                $('.slider_detail .slider_youtube iframe').attr('src', srcVideo + '&autoplay=1');
            } else {
                $('.slider_detail .slider_youtube iframe').attr('src', srcVideo);
            }
        }
    });
}

//html
<div class="slider_detail">
  <div>
    <img src="img/slider_big_1.jpg" alt="">
  </div>
  <div class="slider_youtube">
    <div class="video-responsive">
       <iframe src="https://www.youtube.com/embed/8DuSy2XdizM?rel=0&showinfo=0"
           frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
     </div>
  </div>
  <div>
    <img src="img/slider_big_2.jpg" alt="">
  </div>
 </div>

<div class="nav_slider_detail">
  <div>
    <img src="img/slider_big_1.jpg" alt="">
  </div>
  <div class="nav_slider_youtube">
    <img src="https://img.youtube.com/vi/8DuSy2XdizM/mqdefault.jpg" alt="">
  </div>
  <div>
    <img src="img/slider_big_3.jpg" alt="">
  </div>
</div>
    
    

Template & arrows slider

//html
<div class="slider_index slider_slick">
    <div class="item">
        <a href="#">
      <img src="img/demo/banner_desktop_1.jpg" alt="">
    </a>
  </div>
  <div class="item">
    <a href="#">
      <img src="img/demo/banner_desktop_2.jpg" alt="">
    </a>
  </div>
  <div class="item">
    <a href="#">
      <img src="img/demo/banner_desktop_3.jpg" alt="">
    </a>
  </div>
  <div class="item">
    <a href="#">
      <img src="img/demo/banner_desktop_4.jpg" alt="">
    </a>
  </div>
</div>

//js
$('.slider_index').slick({
        dots: true,
        infinite: true,
        speed: 300,
        autoplay: true,
        rows: 0,
        responsive: [
            {
                breakpoint: 600,
                settings: {
                    dots: false
                }
            }
        ]
});

//css
.slick-arrow {
    font-size: 0;
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    border: 0;
    border-left: 3px solid #000;
    border-bottom: 3px solid #000;
    cursor: pointer;
    background: none;
    z-index: 1;
    margin-top: -10px;
    opacity: 0.25;
    -webkit-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.slick-arrow:hover {
    opacity: 1;
}

/*vertikal*/
.slick-vertical .slick-arrow.slick-prev{
  top: 0;
  left: 50%;
  margin-left:-11px;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
}

.slick-vertical .slick-arrow.slick-next{
  top: auto;
  bottom: 0;
  left: 50%;
  margin-left:-11px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
/*vertikal*/

.slick-arrow.slick-prev {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    left: 20px;
}

.slick-arrow.slick-next {
    -webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg);
    right: 20px;
}

.slick-dots {
    position: absolute;
    width: 100%;
    left: 0px;
    bottom: 12px;
    list-style: none;
    text-align: center;
}

.slick-dots li {
    display: inline-block;
    vertical-align: top;
    font-size: 0px;
    margin: 0 4px;
}

.slick-dots li button {
    border: 3px solid #ffffff;
    width: 12px;
    height: 12px;
    display: block;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #272727;
}

.slick-dots li.slick-active button {
    background: #fdc300;
}

.slider_slick > div.item {
    display: none;
}

.slider_slick > div.item:first-child {
    display: block;
}


//css show background
/*slick slider --- start*/
.slick-arrow {
    font-size: 0;
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    background: #fff;
    z-index: 1;
    margin-top: -20px;
    opacity: 1;
    -webkit-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
    border: 0;
    box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.2);
}
.slick-arrow:after{
    content: '';
    position: absolute;
    width: 30%;
    height: 30%;
    border: 0;
    border-left: 2px solid #6a6b6d;
    border-bottom: 2px solid #6a6b6d;
    top: 50%;
    left: 50%;
    margin-top: -15%;
    opacity: 0.6;
}

.slick-arrow:hover:after {
    opacity: 1;
}

.slick-arrow.slick-prev {
    left: -20px;
}
.slick-arrow.slick-prev:after{
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-left: -4px;
}

.slick-arrow.slick-next {
    right: -20px;
}

.slick-arrow.slick-next:after{
    -webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg);
    margin-left: -8px;
}

.slick-dots {
    position: absolute;
    width: 100%;
    left: 0px;
    bottom: 12px;
    list-style: none;
    text-align: center;
}

.slick-dots li {
    display: inline-block;
    vertical-align: top;
    font-size: 0px;
    margin: 0 10px;
}

.slick-dots li button {
    width: 8px;
    height: 8px;
    display: block;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #58595b;
    opacity: 0.5;
    border: 0;
}

.slick-dots li.slick-active button {
    background: #FFFFFF;
    opacity: 1;
}

.slider_slick > div.item {
    display: none;
}

.slider_slick > div.item:first-child {
    display: block;
}

update resize

// slick on mobile
function slick_on_mobile(slider, settings) {
    $(window).on('load resize', function () {
        if (window.innerWidth > 992) {
            if (slider.hasClass('slick-initialized')) {
                slider.slick('unslick');
            }
            return
        }
        if (!slider.hasClass('slick-initialized')) {
            return slider.slick(settings);
        }
    });
}

// slider blog
    var sliderBlog = $('.list_blog_slider');
    var sliderBlogSetting = {
        dots: true,
        arrows: false,
        rows: 0,
        responsive: [
            {
                breakpoint: 992,
                settings: {
                    slidesToShow: 2,
                }
            },
            {
                breakpoint: 767,
                settings: {
                    slidesToShow: 1,
                }
            }
        ]
    }
    slick_on_mobile(sliderBlog, sliderBlogSetting);