The site will have 8 blocks: 4 at the top, 4 at the bottom (12 blocks for each col-lg-12 col-xl-12 ).

With a width of less than 768 pixels, they will be embedded in one column as you can see col-md-6 for the projects-block class.

It is necessary that with a small width (below 768 pixels) slick -slider began to work.

And with large screens I deactivated I already tried everything I set up with slider-container and nothing helps the row class and the projects-block class.

But the problem is that he does not give an error in the console.

Help, I beg you.

 function mobileOnlySlider() { $(document).ready(function(){ $('.projects-block').slick({ slidesToShow: 2, slidesToScroll: 1, autoplay: true, arrows: false, touchMove:true, dots: false, pauseOnHover: false, responsive: [{ breakpoint: 568, settings: { slidesToShow: 2, settings:"unslick" } }] }); }); } if(window.innerWidth < 768) { mobileOnlySlider(); } $(window).resize(function(e){ if(window.innerWidth < 768) { if(!$('.slider').hasClass('slick-initialized')){ mobileOnlySlider(); } }else{ if($('.slider').hasClass('slick-initialized')){ $('.slider').slick('unslick'); } } }); 
 .projects_block { margin-bottom: 2%; display: flex; } .project_block { display: flex; flex-direction: column; height: 100px; margin: 0 1%; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="projects"> <h3 class="projects_title">Our <span>project</span></h3> <div class="container-fluid"> <div class="row"> <div class="projects_block slider-container col-sm-6 col-md-6 col-lg-12 col-xl-12"> <div class="project_block slide"> <div class="project_name">Discover Milan's religious sites</div> </div> <div class="project_block slide"> <div class="project_name">Saint Petersburg Philharmonic Orchestra</div> </div> <div class="project_block slide"> <div class="project_name">Grand Hall Music </div> </div> <div class="project_block slide"> <div class="project_name">Hand-made art & design workshop</div> </div> </div> <div class="projects_block slider-container col-sm-6 col-md-6 col-lg-12 col-xl-12"> <div class="project_block slide"> <div class="project_name">Historical instruments expo</div> </div> <div class="project_block slide"> <div class="project_name">2016 Festival & Performance Guide</div> </div> <div class="project_block slide"> <div class="project_name">Winston Creek Regional Museum</div> </div> <div class="project_block slide"> <div class="project_name">Michelle Adams: A star on the rise</div> </div> </div> </div> </div> </div>

    2 answers 2

    Add this

     $(window).on('load resize', function() { if ($(window).width() < 640) { $('#items:not(.slick-initialized)').slick({ centerMode: true, dots: true, infinite: true, speed: 100, slidesToShow: 1 }); } else { $("#items.slick-initialized").slick("unslick"); } }); 
     body { margin: 0; } .item { height: 50px; background-color: #cda; border: 1px solid; text-align: center; line-height: 50px; font-size: 30px; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script> <div id="items"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>

    • thanks a lot - Demon __ ANT
    • @MaksimLensky, you need to add another load event and make protection from the launch of an already initialized slider (I use the selector :not(.slick-initialised) ). Otherwise, the slider will not start at the entrance from the mobile, only after resize . - zhurof
    • @Gennadiy Zhurov Yes, I already did :) - Demon __ ANT
    • @MaksimLensky copy the same code that you provided to remove unslick and add instead resize onload and that's it :) - Demon __ ANT
    • one
      @ MaksimLensky is the answer to your question. Show me how to do it - Demon __ ANT

    Perhaps my decision will help someone.

    You need to create a copy of the block with the slider and wrap both blocks in overlay. And open / hide blocks at breakpoints by specifying the display property for overlay . Thus, there is no intersection with the properties that slick sets .

    Important! The slider is not overlay, but the block inside it - project_slider.

    It works stably, without jQuery, you do not need to reload the page.

     .project_slider_overlay { display: none; } .project_blocks_overlay { display: block; } @media screen and (max-width: 768px) { .project_slider_overlay { display: block; } .project_blocks_overlay { display: none; } } 
     <div class="project_slider_overlay"> <div class="project_slider"> <div class="project_block slide"> <div class="project_name">Discover Milan's religious sites</div> </div> <div class="project_block slide"> <div class="project_name">Saint Petersburg Philharmonic Orchestra</div> </div> <div class="project_block slide"> <div class="project_name">Grand Hall Music </div> </div> <div class="project_block slide"> <div class="project_name">Hand-made art & design workshop</div> </div> </div> </div> <div class="project_blocks_overlay"> <div class="project_blocks"> <div class="project_block slide"> <div class="project_name">Discover Milan's religious sites</div> </div> <div class="project_block slide"> <div class="project_name">Saint Petersburg Philharmonic Orchestra</div> </div> <div class="project_block slide"> <div class="project_name">Grand Hall Music </div> </div> <div class="project_block slide"> <div class="project_name">Hand-made art & design workshop</div> </div> </div> </div>