Slider made using Slick.js. Three slides should always be displayed in the slider, but when scrolling, the slides "fly away", and instead they have an empty space. Tell me, please, what is the catch here?

'$('.starring_2').slick({ variableWidth: true, variableWidth: true, slidesToShow: 3, slidesToScroll: 1, nextArrow: '<img src="./img/next_arrow.png">', prevArrow: '<img src="./img/prev_arrow.png">' });' '<div class="starring_2"> <div class="actor_1"> <img src="img/actorphoto_1_960.png" alt="actorphoto_1"> <h3>актер</h3> <p>ЗОЯ БЕРБЕР</p> </div> <div class="actor_2"> <img src="img/actorphoto_2_960.png" alt="actorphoto_2"> <h3>актер</h3> <p>ИЛЬЯ ГЛИННИКОВ</p> </div> <div class="actor_3"> <img src="img/actorphoto_3_960.png" alt="actorphoto_3"> <h3>актер</h3> <p>ВАДИМ ДЕМЧОГ</p> </div> <div class="actor_1"> <img src="img/actorphoto_1_960.png" alt="actorphoto_1"> <h3>актер</h3> <p>ЗОЯ БЕРБЕР</p> </div> <div class="actor_2"> <img src="img/actorphoto_2_960.png" alt="actorphoto_2"> <h3>актер</h3> <p>ИЛЬЯ ГЛИННИКОВ</p> </div> <div class="actor_3"> <img src="img/actorphoto_3_960.png" alt="actorphoto_3"> <h3>актер</h3> <p>ВАДИМ ДЕМЧОГ</p> </div> </div>' ' .starring_2 { width: 650px; margin: 25px 0 0 500px; } .actor_1{ height: 379px; width: 197px; margin: 10px 0 0 626px; background-color: white; -webkit-box-shadow: 4px 6px 15px -4px rgba(0, 0, 0, 1); -moz-box-shadow: 4px 6px 15px -4px rgba(0, 0, 0, 1); box-shadow: 4px 6px 15px -4px rgba(0, 0, 0, 1); } .actor_2{ margin: 8px 0 0 24px; background-color: white; height: 380px; width: 198px; -webkit-box-shadow: 4px 6px 15px -4px rgba(0, 0, 0, 1); -moz-box-shadow: 4px 6px 15px -4px rgba(0, 0, 0, 1); box-shadow: 4px 6px 15px -4px rgba(0, 0, 0, 1); } .actor_3{ margin: 8px 0 0 24px; background-color: white; height: 380px; width: 198px; -webkit-box-shadow: 4px 6px 15px -4px rgba(0, 0, 0, 1); -moz-box-shadow: 4px 6px 15px -4px rgba(0, 0, 0, 1); box-shadow: 4px 6px 15px -4px rgba(0, 0, 0, 1); }'

слайдер по умолчанию

slider after scrolling

    1 answer 1

    Margin on the left must be removed, otherwise the slides are shifted.

     <div class="starring_2"> <div class="actor_1"> <img src="img/actorphoto_1_960.png" alt="actorphoto_1"> <h3>актер</h3> <p>ЗОЯ БЕРБЕР</p> </div> <div class="actor_2"> <img src="img/actorphoto_2_960.png" alt="actorphoto_2"> <h3>актер</h3> <p>ИЛЬЯ ГЛИННИКОВ</p> </div> <div class="actor_3"> <img src="img/actorphoto_3_960.png" alt="actorphoto_3"> <h3>актер</h3> <p>ВАДИМ ДЕМЧОГ</p> </div> <div class="actor_1"> <img src="img/actorphoto_1_960.png" alt="actorphoto_1"> <h3>актер</h3> <p>ЗОЯ БЕРБЕР</p> </div> <div class="actor_2"> <img src="img/actorphoto_2_960.png" alt="actorphoto_2"> <h3>актер</h3> <p>ИЛЬЯ ГЛИННИКОВ</p> </div> <div class="actor_3"> <img src="img/actorphoto_3_960.png" alt="actorphoto_3"> <h3>актер</h3> <p>ВАДИМ ДЕМЧОГ</p> </div> </div> .starring_2 { width: 650px; margin: 25px 0 0 500px; } .actor_1 { height: 379px; width: 197px; background-color: white; -webkit-box-shadow: 4px 6px 15px -4px rgba(0, 0, 0, 1); -moz-box-shadow: 4px 6px 15px -4px rgba(0, 0, 0, 1); box-shadow: 4px 6px 15px -4px rgba(0, 0, 0, 1); } .actor_2 { background-color: white; height: 380px; width: 198px; -webkit-box-shadow: 4px 6px 15px -4px rgba(0, 0, 0, 1); -moz-box-shadow: 4px 6px 15px -4px rgba(0, 0, 0, 1); box-shadow: 4px 6px 15px -4px rgba(0, 0, 0, 1); } .actor_3 { background-color: white; height: 380px; width: 198px; -webkit-box-shadow: 4px 6px 15px -4px rgba(0, 0, 0, 1); -moz-box-shadow: 4px 6px 15px -4px rgba(0, 0, 0, 1); box-shadow: 4px 6px 15px -4px rgba(0, 0, 0, 1); } $('.starring_2').slick({ slidesToShow: 3, slidesToScroll: 1, nextArrow: '<img src="./img/next_arrow.png">', prevArrow: '<img src="./img/prev_arrow.png">' });

    Working option.

    • Yes, the margin was superfluous here, as well as the slider setting variableWidth: true, Thank you very much. - Andrey Bal '
    • @AndreyBal ', in fact, can be removed and the width the slides, because slick.js will calculate the desired width. - Cheg