Как настроить автоширину слайдов с Swiper Js?

Question

[Владислав Петренко]

Имеется слайдер из 12 слайдов разной ширины.
Swiper Js почему-то присваивает им всем одинаковую ширину и из-за этого содержимое слайдов обрезается. Принудительно задавал ширину, но Swiper её игнорировал и присваивал всё равно всем слайдом одинаковую ширину.

Как исправить эту проблему, чтобы ширина слайда подстраивалась под ширину контента в нём?

Comments

[Anna_BS]

Отстаньте от слайдера и позиционируйте в блоке саму картинку https://codepen.io/hujesse/pen/vgzmjb

[Владислав Петренко]

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

[Елена]

Владислав Петренко, я решила это просто - width: auto !important для слайдов самих. В отличие от совы у свайпера нет проблем с заданием своей ширины) Можно и его стили по дефолту настроить, можно и класс для слайдов прописать, но это самый простой путь.

Answer 1

[Anonimmus]

Юзай slidesPerView: 'auto', и в css задавай ширину блоков, слайдер автоматически подстроится под размеры

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

                <div class="swiper-slide infoPost">
                    <div class="infoText">
                        <h2>Коллекция авторских коробок</h2>
                        <p>Бесплатная доставка по городу Воронеж от 2000 рублей</p>
                        <a href="">Купить</a>
                    </div>
                </div>

                <div class="swiper-slide imgPost1"> </div>



                <div class="swiper-slide infoPost">
                 <div class="infoText">
                    <h2>Коллекция авторских коробок</h2>
                    <p>Бесплатная доставка за город от 3999 рублей</p>
                    <a href="">Купить</a>
                </div>
            </div>

            <div class="swiper-slide imgPost2"> </div>




            
        <div class="swiper-slide infoPost">
             <div class="infoText">
                <h2>Коллекция авторских коробок</h2>
                <p>Бесплатная доставка по городу от 1700 рублей</p>
                <a href="">Купить</a>
            </div>
        </div>

        <div class="swiper-slide imgPost3"> </div>


    </div>
    <!-- Add Arrows -->
    <div class="btns">
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
</div>

<script src="js/slider.js"></script>

var swiper = new Swiper('.swiper-container', {
      slidesPerView: 2,
      spaceBetween: 0,
      // init: false,
     loop: true,
     slidesPerGroup: 2,
  
    autoplay: {
        delay: 7000,
        disableOnInteraction: false
    },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
       pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      breakpoints: {
        300: {
   <b>       slidesPerView: 'auto',</b> 
          spaceBetween: 0,
        },
        768: {
          slidesPerView: 'auto',
          spaceBetween: 0,
        },
        1024: {
          slidesPerView: 'auto',
          spaceBetween: 0,
        },

      }
    });

.infoPost {
  width: 1165px;
  height: auto;
  margin-left: -150px;
  background: url("../img/bac-slider.png") no-repeat;
  mix-blend-mode: multiply;
  background-position: top center;
}

.imgPost1 {
  width: 750px;
}

.imgPost2 {
  width: 750px;
}

.imgPost3 {
  width: 750px;
}

Comments

[Александр Погребной]

Реально сработало, спасибо большое!

[Александр Погребной]

Второй раз уже выручает, нигде не написано это в документациях)

Answer 2

[Александр Шульга]

просто задать слайдам width:auto!important; в css файле и тогда размером они будут по контенту

Comments

[abelkinn]

Этот способ мне помог, спасибо

[Ilia Malashko]

!important; это костыль. По возможности таких решений надо избегать.

[aleksandr-n]

var swiper = new Swiper('.js-swiper-responsive', {
slidesPerView: 'auto',
spaceBetween: 30,
grabCursor: false,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: ".my-medium-swiper-next",
prevEl: ".my-medium-swiper-prev",
},
});

За это отвечает свойство

slidesPerView: 'auto',

только потом не забыть указать в css свою ширину