Не работает слайдер swiper

Некорректная работа при многоразовой инициализации swiper slider`ов на сайте

Проблема заключается в том, что при смене слайда с помощью перемещения мышкой, работает только то выпадающее меню, которое было открыто первым. Прикладываю скрины:

1)Корректная работа первого открытого:

2) А это второе открытое, в той же сессии: (слайдер перестал прокручиваться до конца и исчезла нумерация страниц).

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

Если что, вот элементы для подключения swiper slider

Буду очень благодарен, если сможете помочь решить эту проблему, спасибо.

1 ответ 1

Удалось достичь некоторых успехов. В html разметке были добавлены data-id, чтобы можно было использовать их в качестве отдельных переменных для каждого слайдера:

Полностью отредактирован js:

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

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

И еще вопрос. В мобильной версии, скролл мышкой работает только после того, как 1 раз нажмешь на контент или на любую из стрелочек, это возможно как-то пофиксить?

Источник

Мобильный сенсорный слайдер Swiper

На этом уроке я расскажу как подключить и настроить самый современный сенсорный слайдер Swiper. Есть несколько причин, почему Swiper лучший слайдер для сайта:

1. Swiper написан на чистом JavaScript и не требует подключения дополнительных библиотек. Это значит, что у вас не будет лишнего запроса к серверу.
2. Его API позволяет создавать собственную разбивку на страницы и кнопки навигации.
3. Swiper использует для построения макетов с гибкой сеткой технологию Flexbox
4. Swiper использует технику ленивой загрузки. Он задерживает загрузку изображений на неактивных слайдах, пока пользователь не проведет по ним пальцем. Это ускоряет загрузку страницы.
5. Swiper абсолютно бесплатен и имеет открытый исходный код

Подключение слайдера Swiper к проекту

// перед закрывающим тегом body

Добавить базовый HTML-макет

Создаем простую HTML структуру и прописываем стандартные классы слайдера. Вместо Slide 1, 2, 3 и.т.д, прописываете ваш контент, это может быть текст, картинки и вообще любые теги.

Инициализация Swiper

Для этого в main.js пропишем следующий код.

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

Демонстрация работы базового Swiper

Настройка слайдера Swiper

Однако базовых настроек слайдера не всегда бывает достаточно, особенно если вы работаете по техническому заданию заказчика. Предусмотрена возможность добавлять дополнительные настройки в HTML разметку кастомный JS файл (main.js). Все дополнительные параметры должны отделяться друг от друга запятой.

Добавление стрелок навигации

Слайдер можно снабдить стрелками навигации, при клике на которые будет меняться слайд. Вместо дефолтных классов навигационных стрелок можно прописывать свои классы. Поскольку стили стандартных стрелок реализованы с помощью иконочного шрифта, а значит их цвет и размер легко можно поменять. Это важно для кастомизации Swiper для верстки сайта по дизайнерскому макету.

// JS файл
new Swiper(‘.swiper-container’, <
// Вывод стрелок навигации
navigation: <
nextEl: ‘.swiper-button-next’,
prevEl: ‘.swiper-button-prev’,
>,

Вывод пагинации для слайдов

Дефолтный буллиты сделаны в виде кружков и они показываю на каком слайде мы сейчас находимся.

// JS код вывода пагинации
pagination: <
el: ‘.swiper-pagination’,
>,

Добавление скроллбара

Включим возможность перетаскивания ползунка у скроллбара.

// JS код вывода скроллбара
scrollbar: <
el: ‘.swiper-scrollbar’,
draggable: true
>,

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 2 ):

Отличный и лёгкий плагин. Всегда читаю публикации Михаила Юрьевича. В этом слайдере важной особенностью есть возможность подстройка его в адаптивном варианте всего пары селекторов. И наступает полная адаптация. Достаточно прописать .swiper-container < max-width:600px; height: auto; >.swiper-slide img < max-width:100%; >И не надо мучиться с кучей CSS стилей. Если хотите вставить текст вместо картинок или совместно с ним, есть особенности. Размер шрифта сильно масштабируется вместе с адаптированием картинки!? Писать текст через теги Р не получается, только делить через тег ВR. При этом размещение картинки в тексте делит текст пополам, обтекания нет. Но, можно сделать картинку блоком и центрировать как угодно. Вообще слайдер Swiper очень гибкая штука и простая.

Уже давно использую плагин Swiper. Сейчас возникла тупиковая проблема с этим плагином. Возможно дело в том, что я очень плохо знаю JS. В документации указано, что достаточно прописать observer: true, чтобы плагин автоматически отслеживал динамическое изменение html-контента. Но у меня так не работает: при клике на комбинацию подтягиваются другие фото в эту же структуру HTML, остаются и кнопки навигации, но уже скрипт не работает, не листает слайды: http://prntscr.com/13dvsfj .Что я только не пробовал как новичок в JS, ничего не помогло, я подозреваю, что проблема очень примитивная, но не для меня. Буду благодарен за любую помощь. Страница: http://new.forco.com.ua/ru/elektrika-i-elektronika-ford-fyuzhn-fusion-2013-2020/4-175-zadnij-fonar-pravyj-ford-escape-2017-ford-eskejp.html#/1-test-2011_2015

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Источник

Слайдер Swiper для сайта — установка, использование, параметры

В наше время компьютеры стали мощной площадкой для продвижения своих товаров и услуг. Выигрывают самые нестандартные сайты. Это многофункциональные проекты, красивые, которые приятно посещать пользователю. Слайдер для сайта является одним из способов привлечь внимание посетителя сайта и заставить его посмотреть ваш товар или услугу. Вы можете разместить удобный мобильный слайдер на своем сайте. Вам не нужны серьёзные навыки программировании для этого.

Достаточно разместить готовый слайдер под названием Swiper, указать настройки и привлекать больше клиентов!

Свипер адаптирован под мобильные устройства — android, iOS, iPhone и других. Он прекрасно выглядит на больших и маленьких экранах. Слайдер Swiper сам занимается адаптацией, ему достаточно указать количество слайдеров для разного разрешения экрана. Для больших мониторов можно указать больше, для маленьких экранах, например, для мобильных телефонов, можно указать 1-2 слайда. Swiper имеет множество настроек, все они легко используются и хорошо документированы.

Ниже описаны способы подключения слайдера Swiper для сайта! Не стесняйтесь задавать вопросы в комментариях, нам приятно будет вам помочь!

Начало работы с Swiper

Десктопный и мобильный слайдер Swiper для сайта — установка, использование, параметры

1a. Загрузка и установка слайдера Swiper

Прежде всего, мы должны скачать необходимые файлы Swiper:

• Мы можем загрузить их из репозитория Swiper GitHub
• Или мы можем установить их через Bower, введите в терминал:
• Или, используя Atmosphere as Meteor package:
• Или, используя NPM

В загруженном / установленном пакете нам нужны файлы из dist/ папки.

Как использование Swiper из CDN

Если вы не хотите подключить Swiper к сайту, вы можете использовать его из Swiper на cdnjs . Доступны следующие файлы:

2. Включите файлы Swiper на сайт / приложение.

После этого нам нужно включить CSS и JS-файлы Swiper на наш сайт / приложение. В вашем html-файле:

3. Добавить Swiper HTML Layout

Теперь нам нужно добавить базовый макет Swiper в наше приложение:

4. Swiper CSS Styles / Size

После этого нам может потребоваться установить размер Swiper в файле CSS:

Инициализирование слайдера для сайта Swiper

Наконец, нам нужно инициализировать Swiper в JS (подключение к сайту). Есть несколько вариантов / мест для этого:

Лучший вариант будет в встроенном скрипте или в файле сценария, который включен в самый конец тела (прямо перед закрывающим

Источник

Как заставить работать 2 слайдера swiper на странице?

всем привет.учусь верастать по видео с ютуба
так вот сверстал страницу на которой два слайдера и оба работают но в обеих слайдерах есть как картинки так и видео
автор ролика добавил клик на видо в js для одного слайдера а для второго я сам точно также сделал но приписал классы второго слайдера так вот клик не работает но знаю почему может поможете?
вот код первого слайда на котором работает и клик и видео

а вот второй слайд на котором хочу добавит клик на кнопку и воспроизвести видео

зарание всем спасибо

• Вопрос задан 08 апр.
• 105 просмотров

Стили бы.
А ещё лучше песочницу на jsfiddle.net

Думаю, что это потому что кнопка 0х0 или провалилась без z-index или типа того.

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

а вот стили второго слайдера в которой работают только картинки а видео не кликаеться кнопка и не показывает

jack iakovenko, вы запутали меня. Проблема со слайдером или с тем, что вы не умеете воспроизводить видео по кнопке?

Источник