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

Question

[mukzer]

Мне нужно сделать слайдер следующего вида:


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

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

HTML

<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>

CSS

.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);
}

JS

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',
    },
});

Comments

[Ankhena]

Давайте попробуем ещё раз.

Чтобы свайпер нормально работал, нужно подключить его скрипт и его стили.
Его стили вы не подключили.
Поэтому, всё работает не так, как вам хочется.

При переопределении классов элементов нужно сделать правки и в стилях тоже (в родных стилях свайпера исправить и селекторы)

https://jsfiddle.net/rszyLjb0/

[mukzer]

Ankhena, Было бы ещё понятно каких стилей не хватает, когда я меняю классы. А насчёт активного слайда, transform: scale я пробовал, мне кажется не совсем этот вариант подходит, так как нужно достаточно сильно увеличить активный слайд, но тогда он находит на другие, и ему всё равно на отступы....

[Ankhena]

mukzer,

Было бы ещё понятно каких стилей не хватает, когда я меняю классы.

Да я вроде вам даже работающую песочницу сделала.
Дальше можете экспериментировать, какие избыточны.

мне кажется не совсем этот вариант подходит, так как нужно достаточно сильно увеличить активный слайд, но тогда он находит на другие, и ему всё равно на отступы....

Так сделайте такие отступы, чтобы их хватало на scale

[Anonimmus]

Попробуйте явно задать колво slidesPerView: '3',
Так как авто не определит кто там по середине)
Поясню. Если я создаю свайпер с 4 изображениями,как по вашему кто будет в центре?! = 2 от слайда что означает два слайда и по середине spacebetween.
Далее вам нужно стилизовать центральный слайд, .
Scale игнорирует все отступы - это один из вариантов,
2 же задать конкретное значение ширины и высоты,
3 в крайняк попробуйте cssmode

[mukzer]

Anonimmus, А можно как-то самому задать ширину для слайдов, если стоит slidesPerView: 3, а не slidesPerView: 'auto'?
У меня активный слайдер их не принимает, когда я ставлю количество слайдов...

А если использовать slidesPerView: 'auto', то тогда центрирование не работает...

[mukzer]

Ankhena, Вот такое у меня получилось codepen, но не получается задать нормально width)

[Ankhena]

mukzer, что-то я устала...

Повторю то, что писала в прошлый раз.
Есть 2 варианта.
Либо вы задаете ширину слайдам и слайдер сам определяет сколько их показывать.
Либо вы задаете количество слайдов, а слайдер определяет их ширину исходя из ширины контейнера и отступов.

Вы можете схитрить.
Задать показ слайдов не по 3 штуки, а по 2 или 1,8. Подберите коэффициент, чтобы нормально смотрелось с вашим отступом. А еще лучше отступ внесите паддингом в сам слайд, а у свайпера уберите, так хоть calc будет работать.
И выравнивать картинки в предыдущем по правому краю, в следующем по левому, так чтобы визуально картинки были видны целиком.
p.s. не, прямо так не выйдет, при перелистывании будет плохо.

По-моему, вариант со scale решал все проблемы.

[Anonimmus]

Ankhena,
окей, давайте переберем.
Использую демо пример без лишних параметров. в итоге мы получаем центрированный слайдер вне зависимости от экрана.

<div class="slider-container swiper-container">
      <!-- Swiper -->
      <div class="swiper-container mySwiper">
        <div class="swiper-wrapper">

          <div class="swiper-slide">
            <img src="https://i.ibb.co/XLz2LLs/slider-photo-2.jpg" alt="" />
          </div> 
          <div class="swiper-slide">
            <img src="https://i.ibb.co/XLz2LLs/slider-photo-2.jpg" alt="" />
          </div> 
          <div class="swiper-slide">
            <img src="https://i.ibb.co/XLz2LLs/slider-photo-2.jpg" alt="" />
          </div> 

        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>

.swiper-container {
        width: 100%;
        height: 100%;
      display:flex;
      align-items:center;
      min-height:0;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        transition: all .6s ease-in-out;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
         opacity: 0.3;
      }

      .swiper-slide img { 
        display: block;
        width: 100%;
        max-height: 200px;
        object-fit: cover;
       
      }

.swiper-slide-active {
        opacity: 1!important;
        transition: all .6s ease-in-out;
        width: 100%;  
  opacity:1!important;
 transition: all .6s ease-in-out; 

}
      .swiper-slide-active img {
            transition: all .6s ease-in-out;
 
        }

var swiper = new Swiper(".mySwiper", {
 
        loop: true,
        centeredSlides: true,

        slidesPerView: 3,
        spaceBetween: 30, 
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          speed: 1000
        },
    speed: 1000,
    navigation: {
        nextEl: '.slider-button-next',
        prevEl: '.slider-button-prev',
    } 
      });

[Ankhena]

Anonimmus, эмммм и что делать с этой простыней? Да и вообще с этим кодом?

[Anonimmus]

Ankhena, здесь я показываю что все параметры swipera рабочие. все что остается сделать так это стилизовать активные элементы и не активные.

[Ankhena]

Anonimmus, рада за вас. Вам чем-то помочь?

[Anonimmus]

Ankhena, тут я чтото недопонял. Я к вам обращаюсь? Или все таки данный вопрос (простыня) вас не касается, нет? Тогда что ты влезла.
Вопрос был не работает центрирование. Я показываю раюочий пример.

[mukzer]

Anonimmus, Спасибо, этот вариант помог)

[Ankhena]

Anonimmus, а ведь можно не огрызаться, а просто тегнуть не меня, а того кому вы хотели предложить свой код..

[Anonimmus]

Ankhena, мой косяк, признаю.
но ведь можно было "не огрызаться" и просто промолчать или поправить. Сказав просто "жми кнопку ответить автору" мы продолжаем ваше же высказывание. Никто не сомневается что свою долю истины вы внесли

[Ankhena]

Anonimmus, :)

[Anonimmus]

Ankhena, мое почтение. Не ищу цели оскорбить.
Прошу прощение