0

Всем привет! Столкнулся с проблемой что не все слайды показываются во всю ширину. Вот что мне надо сделать по макету - Что нужно сделать А вот что получается у меня ( добавил серый бг что бы видно было ) Что у меня

Не знаю как поправить Вот код html:

        <div class="swiper">
        <div class="swiper-wrapper">
        <div class="swiper-slide" >
            <div class="card">
                <div class="feedback__info">
                    <div class="feedback__flex">
                        <img src="img/png/feedback_photo.png" alt="image">
                    <div class="feedback__name">
                        <p class="feedback__name--text">Алексей Гончаров</p>
                        <p class="feedback__company--text">CEO of Products</p>
                    </div>
                </div>
                    <p class="feedback__descr--text">
                        В действительности, это правда лучшие серверва, которые были в моём использованные за все года. Отныне,<br> Onyx завоевали моё сердце.
                    </p>
                </div>
        </div>
(swiper-slide - повторяется ещё 7 раз)

css:

.swiper {
    width: 100%;
    height: 20.6rem;

}

js:

 const swiper = new Swiper('.swiper', {
    spaceBetween: 30,
    loop: true,
    slidesPerView: 5.5,
    centeredSlides: true,
    initialSlide: 6,
    freemode: true,
    parralax:true,
    speed:2000,
    keyboard: true,
  });

1 ответ 1

0

Вы не к тому элементу подключаете плагин. Судя по тому, что вы тут пытались показать... надо вызывать на элементе swiper-slide

3
  • Если я подключу, вот так. То свайпер вообще перестает работать(( const swiper = new Swiper('.swiper-slide', { spaceBetween: 50, loop: true, slidesPerView: 5.5, centeredSlides: true, });
    – WeilBrain
    1 фев 2023 в 21:34
  • 1
    Возможно вы где-то тег не закрыли. Есть рабочий пример codesandbox.io/p/sandbox/d5128j?file=%2Findex.html Замените на свои карточки. 1 фев 2023 в 21:43
  • Похоже я где то и в правду забыл закрыть скобку. Починил, теперь всё работает. Спасибо большое!
    – WeilBrain
    1 фев 2023 в 21:48

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.