Как в Swiper-слайдере реализовать переключение слайдов по щелчку на ссылку?
Понимаю, что делается это через хеши, но как именно?
<div class="info-slider__item swiper-slide" data-hash="slide-1"> |
<div class="info-slider__item swiper-slide" data-hash="slide-1">
hashNavigation: { watchState: true, } |
hashNavigation: { watchState: true, }
А к ссылке это как подключить? Чтобы результат был, как на картинке:
Дополнительно:
Посмотрите на вариант свайпера с превью.
Эти ваши типа ссылки это превью и есть.
Их можно сделать реальными ссылками, но в js задать preventDefault()
Ответы:
Почитайте внимательно документацию: https://swiperjs.com/swiper-api#hash-navigation
Также есть пример: https://swiperjs.com/demos#hash-navigation
В ней вы можете открыть просмотр в CodeSandbox, где сами изучите код из примера
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для реализации переключения слайдов по щелчку на ссылку в Swiper-слайдере, вам потребуется использовать JavaScript. Вот пример кода, который позволит вам достичь этой функциональности:
1. Добавьте ссылки, по клику на которые будет происходить переключение слайдов:
```html
Слайд 2
Слайд 3
```
2. Инициализируйте Swiper и добавьте обработчики событий для ссылок:
```php
var swiper = new Swiper('.swiper', { // настройки Swiper }); var links = document.querySelectorAll('.swiper-link'); links.forEach(function(link, index) { link.addEventListener('click', function() { swiper.slideTo(index); // переключение на слайд с указанным индексом }); });
```
Теперь, при клике на любую из ссылок в блоке `.swiper-links`, Swiper будет переключаться на соответствующий слайд. Не забудьте подключить библиотеку Swiper и стили для корректной работы слайдера.