What is the empty div wrapper in slick item? On off. There is no website in the examples. In my example, he is. How to remove it?

enter image description here

$('.js-slider').slick(); 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.4-rc1/css/foundation.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script> <div class="grid-container"> <div class="grid-x"> <div class="cell medium-6 medium-offset-3"> <div class="js-slider slider"> <a href="#"><img src="http://via.placeholder.com/350x150?text=Slide 1"></a> <a href="#"><img src="http://via.placeholder.com/350x150?text=Slide 2"></a> <a href="#"><img src="http://via.placeholder.com/350x150?text=Slide 3"></a> </div> </div> </div> </div>

    3 answers 3

    It will work

     $('.reviews').slick({ draggable: false, infinite: true, rows: 0,// удаляет div });

      If this is the code that is generated by the script itself, then apparently this wrapper is for some reason needed by the script, and if it doesn’t bother you, then you shouldn’t bother with this topic.

      In many js frameworks and libraries, for example, React or Vue, there are many such wrappers, and at least there could be a way to remove them, but nobody bothers about it, as they usually do not interfere, just a couple of extra tags.

      Most often, such wrappers are made as a container for several child elements, where the system (JS library or framework) for some reason cannot work without such a container, or it would significantly complicate its work.

        Option 1: due to the fact that as an element you have a link with display: inline; - slick-slider wraps them in a <div> , so that the slide is like a block solution - try setting display: block; to these links display: block; or display: inline-block; option 2: somewhere did not close the tag, check the html-code