Как скроллить внутри блока слайды swiper?
Есть блок со слайдерером Swiper. Сейчас стоит скролл колесиком мыши по пунктам и видео внутри. Но проблема что надо навести мышкой на этот блок, чтобы скролл происходил. Как сделать так чтобы слайды прокручивались принудительно даже если потянуть за скроллбар?
// Инициализация слайдера с видео const sliderThumbs = new Swiper(".benefits__section_video_inner .swiper-container", { // ищем слайдер превью по селектору // задаем параметры direction: "vertical", // вертикальная прокрутка slidesPerView: 1, // показывать по 3 превью spaceBetween: 24, // расстояние между слайдами mousewheel: { releaseOnEdges: true, }, }); // Инициализация слайдера с контентом const sliderImages = new Swiper(".benefits__section_inner .swiper-container", { // ищем слайдер превью по селектору // задаем параметры direction: "vertical", // вертикальная прокрутка slidesPerView: 2, // показывать по 2 изображению mousewheel: { releaseOnEdges: true, }, grabCursor: true, // менять иконку курсора // thumbs: { // // указываем на превью слайдер // swiper: sliderThumbs // указываем имя превью слайдера // }, }); sliderImages.controller.control = sliderThumbs; sliderThumbs.controller.control = sliderImages; |
// Инициализация слайдера с видео const sliderThumbs = new Swiper(".benefits__section_video_inner .swiper-container", { // ищем слайдер превью по селектору // задаем параметры direction: "vertical", // вертикальная прокрутка slidesPerView: 1, // показывать по 3 превью spaceBetween: 24, // расстояние между слайдами mousewheel: { releaseOnEdges: true, }, }); // Инициализация слайдера с контентом const sliderImages = new Swiper(".benefits__section_inner .swiper-container", { // ищем слайдер превью по селектору // задаем параметры direction: "vertical", // вертикальная прокрутка slidesPerView: 2, // показывать по 2 изображению mousewheel: { releaseOnEdges: true, }, grabCursor: true, // менять иконку курсора // thumbs: { // // указываем на превью слайдер // swiper: sliderThumbs // указываем имя превью слайдера // }, }); sliderImages.controller.control = sliderThumbs; sliderThumbs.controller.control = sliderImages;
Дополнительно:
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы реализовать скроллинг внутри блока слайдов в Swiper, вам необходимо задать параметр `nested: true` при инициализации Swiper. Этот параметр позволяет вложить один Swiper в другой и обеспечивает скроллинг внутри вложенного Swiper.
Пример инициализации Swiper с использованием параметра `nested: true`:
var parentSwiper = new Swiper('.parent-swiper', { // параметры родительского Swiper nested: true, }); var childSwiper = new Swiper('.child-swiper', { // параметры дочернего Swiper });
В данном примере `parentSwiper` является родительским Swiper, а `childSwiper` - дочерним. Обратите внимание, что у дочернего Swiper необходимо указать другой класс для инициализации.
Теперь вы можете скроллировать внутри блока слайдов в Swiper, управляя свайпами вложенного Swiper. Не забудьте настроить параметры каждого Swiper согласно вашим потребностям, например, высоту слайдов, количество видимых слайдов и т.д.
Надеюсь, что данное решение поможет вам реализовать скроллинг внутри блока слайдов в Swiper. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.