Как скрыть часть слайдера в swiper?
Нужно чтобы слайдер по центре показывал активный слайд, а остальные как-бы уходили за края
на данный момент при сужении экрана, слайдер просто сжимает сами слайды, когда нужно оставить их ширину
в идеале всё должно выглядеть так:
Сейчас стоят такие настройки:
var swiper = new Swiper(".mySwiper", { slidesPerView: 3, loop: true, spaceBetween: 30, centeredSlides: true, fade: true, pagination: { el: ".swiper-pagination", clickable: true, }, }); |
var swiper = new Swiper(".mySwiper", { slidesPerView: 3, loop: true, spaceBetween: 30, centeredSlides: true, fade: true, pagination: { el: ".swiper-pagination", clickable: true, }, });
Дополнительно:
slidesPerView: auto так-же не помогает, попробовал задать ширину с ним через
.slider-item.swiper-slide { width: 340px; height: 440px; } |
.slider-item.swiper-slide { width: 340px; height: 440px; }
,но в итоге ничего не выходит
Какая глупость, самая простая опечатка от незнания js
var swiper = new Swiper(".mySwiper", { slidesPerView: 'auto', loop: true, spaceBetween: 30, centeredSlides: true, fade: true, pagination: { el: ".swiper-pagination", clickable: true, }, }); |
var swiper = new Swiper(".mySwiper", { slidesPerView: 'auto', loop: true, spaceBetween: 30, centeredSlides: true, fade: true, pagination: { el: ".swiper-pagination", clickable: true, }, });
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для скрытия части слайдера в Swiper, вы можете использовать параметр `slidesPerView` в конфигурации Swiper. Этот параметр определяет, сколько слайдов отображается одновременно в слайдере.
Например, если у вас есть слайдер с 3 слайдами, и вы хотите скрыть одну часть слайдера, вы можете установить `slidesPerView` на 2. Таким образом, будет отображаться только 2 слайда из 3.
Пример кода на JavaScript с использованием Swiper:
var mySwiper = new Swiper('.swiper-container', { slidesPerView: 2, spaceBetween: 10, // остальные параметры слайдера });
Этот код скроет одну часть слайдера, показывая только 2 слайда одновременно. Вы можете настроить параметры `slidesPerView` и `spaceBetween` в зависимости от ваших потребностей.
Если вы хотите скрыть конкретный слайд или часть слайда, вам нужно использовать CSS для скрытия элементов. Например, вы можете добавить класс к элементу слайда и применить стили для скрытия этого элемента.
Надеюсь, этот ответ поможет вам скрыть часть слайдера в Swiper. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.