Я хочу, чтобы гладкая карусель отображала изображения разного размера по одному в режиме центра, но это не работает

Question

У меня сейчас проблема с скользящим слайдером от keewheeler.Я пытался создать карусель, которая отображала бы изображения разного размера, но проблема в том, что когда я пытаюсь использовать центральный режим, следующий и предыдущий ползунки отображаются в стороне от центрированного ползунка.

Я пытался использоватьтакие свойства как: sliderToShow, centerPadding и другие решения css, такие как: box-sizing: border-box и т.д.

<script type="text/javascript">
        $(document).ready(function() {
            $('.sliderslick').slick({
                centerMode: true,
                centerPadding: '0px',
                variableWidth: true,
                slidesToShow: 1,
                autoplay: true,
                arrows: true,
                autoplaySpeed: 5000,
                cssEase: 'ease'
            });
        });
    </script>

Код CSS, который я пытался использовать для решения проблемы:

.slick-slide img {
    max-height: 398px;
    max-width: 600px;
    width: 100%;
    text-align: center;
}

img{
    vertical-align: middle;
}

и на всякий случай html-часть, которая должна быть каруселью:

<div class="sliderslick">


                                    <div>
                                        <img src="Chambre_hote/chambrePoetic1.jpg" class="ls-bg" alt="Slide background">
                                    </div><!-- Slide1-->
                                    <div>
                                        <img src="Chambre_hote/chambrePoetic2.jpg" class="ls-bg" alt="Slide background">
                                    </div><!-- Slide2-->
                                    <div>
                                        <img src="Chambre_hote/chambrePoetic3.jpg" class="ls-bg" alt="Slide background">
                                    </div><!-- Slide3-->
                                    <div>
                                        <img src="Chambre_hote/chambrePoetic4.jpg" class="ls-bg" alt="Slide background">
                                    </div><!-- Slide4-->
                                    <div>
                                        <img src="Chambre_hote/chambrePoetic5.jpg" class="ls-bg" alt="Slide background">
                                    </div><!-- Slide5-->

                                </div>

Я только ожидаю, что отображается только основной слайдер, а не предыдущий и не следующий.

Answer 1

Если я правильно помню, вы не можете установить для variableWidth значение true и только один слайд за раз. Это конфликт сам по себе.

Есть способ обойти это. Вы можете создать контейнер для каждого изображения одинаковой ширины и центрировать изображение в этом контейнере. Таким образом, вы получите тот же эффект.