@mukzer

Как сделать активный слайд центрированным, если “centeredSlides: true” не работает?

Помогите, пожалуйста. Мне нужно сделать слайдер следующего вида
610992eea79da441671388.jpeg
Но мой слайдер по какой-то причине не центрирован. Мне нужно три слайда, где активный слайд больше и центрирован...

Вот что я пытался сделать codepen jsfiddle

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<section class="slider section-outer">
                    <div class="container">
                        <div class="slider-inner">
                            <div class="slider-container swiper-container">
                                <div class="slider-items">
                                    <div class="slider-item">
                                        <img src="https://i.ibb.co/vdCRM7c/slider-photo-1.jpg">
                                    </div>
                                    <div class="slider-item">
                                        <img src="https://i.ibb.co/XLz2LLs/slider-photo-2.jpg">
                                    </div>
                                    <div class="slider-item">
                                        <img src="https://i.ibb.co/dG3gyCV/slider-photo-3.jpg">
                                    </div>
                                    <div class="slider-item">
                                        <img src="https://i.ibb.co/vdCRM7c/slider-photo-1.jpg">
                                    </div>
                                    <div class="slider-item">
                                        <img src="https://i.ibb.co/XLz2LLs/slider-photo-2.jpg">
                                    </div>
                                    <div class="slider-item">
                                        <img src="https://i.ibb.co/dG3gyCV/slider-photo-3.jpg">
                                    </div>
                                </div>
                                <div class="slider-navigation reviews-navigation">
                                    <div class="slider-button slider-button-prev">
                                        <svg viewBox="0 0 66 10">
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M61.2071 0.292847L65.9142 4.99995L61.2071 9.70706L59.7929 8.29285L62.0858 5.99995H0V3.99995H62.0858L59.7929 1.70706L61.2071 0.292847Z"/>
                                        </svg>
                                    </div>
                                    <div class="slider-pagination"></div>
                                    <div class="slider-button slider-button-next">
                                        <svg viewBox="0 0 66 10">
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M61.2071 0.292847L65.9142 4.99995L61.2071 9.70706L59.7929 8.29285L62.0858 5.99995H0V3.99995H62.0858L59.7929 1.70706L61.2071 0.292847Z"/>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>


.slider-container {
     width: 1230px;
     height: 425px;
}
 .slider-items {
     display: flex;
     align-items: center;
     height: 100%;
     padding-bottom: 50px;
}
 .slider-item {
     cursor: pointer;
     opacity: 0.6;
     transition: all 0.6s ease-in-out;
     width: 285px;
     height: 190px;
}
 .slider-item img {
     width: 285px;
     height: 190px;
     transition: all 0.6s ease-in-out;
}
 .slider .slider-item--active {
     opacity: 1;
     transition: all 0.6s ease-in-out;
     width: 545px;
     height: 365px;
}
 .slider .slider-item--active img {
     width: 545px;
     height: 365px;
     transition: all 0.6s ease-in-out;
}
 .slider .slider-navigation {
     right: 0;
     left: 0;
     margin: 0 auto;
}
 .swiper-button-disabled {
     opacity: 0.3;
}
 .swiper-pagination-bullet {
     width: 10px;
     height: 10px;
     background: none;
     border: 1px solid #dfd7d3;
     opacity: 1;
     transition: all 0.3s;
}
 .swiper-pagination-bullet + .swiper-pagination-bullet {
     margin-left: 10px;
}
 .swiper-pagination-bullet-active {
     background: #ca6d38;
     box-shadow: 0 1px 4px rgba(243, 241, 239, 0.25);
}
 .slider-navigation {
     position: absolute;
     bottom: 0;
     display: flex;
     justify-content: space-between;
     width: 100%;
     max-width: 556px;
}
 .slider-button {
     display: inline;
     cursor: pointer;
     transition: all 0.3s;
}
 .slider-button svg {
     width: 91px;
     height: 11px;
     fill: #ca6d38;
}
 .slider-button:hover path {
     box-shadow: 0 1px 4px rgba(243, 241, 239, 0.25);
}
 .slider-button:active path {
     box-shadow: 0 1px 4px rgba(243, 241, 239, 0.25);
     fill: rgba(202, 109, 56, 0.8);
}
 .slider-button-prev svg {
     transform: rotate(-180deg);
}


const swiper = new Swiper(".slider-container", {
    slideClass: 'slider-item',
    wrapperClass: 'slider-items',
    slideActiveClass: 'slider-item--active',
    spaceBetween: 57,
    slidesPerView: 'auto',
    centeredSlides: true,
    loop: true,
    pagination: {
        el: '.slider-pagination',
        clickable: true,
    },
    speed: 1000,
    navigation: {
        nextEl: '.slider-button-next',
        prevEl: '.slider-button-prev',
    },
});


Надеюсь на помощь, спасибо!
  • Вопрос задан
  • 1246 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы