X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Добавить ответ в эту тему
> Swiper-Два слайдера на странице
HITMAN84
HITMAN84
Topic Starter сообщение 17.11.2020, 19:27; Ответить: HITMAN84
Сообщение #1


Привет!
Как подключить 2 слайдера на странице?

1) Первый слайдер
swiper.js

var swiper = new Swiper('.swiper1', {
slidesPerView: 5,
spaceBetween: 30,
slidesPerGroup: 1,
autoplay: {
delay: 5000,
},
breakpoints: {

slidesPerView: 2,
},
modifier: 1,
shortSwipes: true,
loop: true,
loopFillGroupWithBlank: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',


},
});


Второй:

var swiper = new Swiper('.swiper2', {
effect: 'flip',
grabCursor: true,
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});

2) На главной html :
1 слаидер:
<div class="swiper-container swiper1">
<div class="swiper-wrapper">

{selections id="22,4,6,7,9,10" sort="desc" order="date" cache="yes" template="custom-slide" limit="30"}
</div><br>

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


2 слаидер:

<div class="swiper-container swiper2">
<div class="swiper-wrapper">
{selections id="22,4,6,7,9,10" sort="desc" order="date" cache="yes" template="custom-slide2" limit="30"}
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>

В результате они зависят друг от друга: Тыкаешь стрелку на 1 слайде и вращаются оба...

0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lostprophet
lostprophet
сообщение 17.11.2020, 20:56; Ответить: lostprophet
Сообщение #2


HITMAN84, подозреваю, что элементы навигации одинаковые у Вас
Код
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
HITMAN84
HITMAN84
Topic Starter сообщение 17.11.2020, 21:20; Ответить: HITMAN84
Сообщение #3


lostprophet,

Точно!
Сделал так для второго и норм всё)
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper2-button-next',
prevEl: '.swiper2-button-prev',
},
});

Т.е тупо добавил 2 :hmhm:

А как добавить стрелки По бокам-у первого есть слайда:
var swiper = new Swiper('.swiper1', {
slidesPerView: 5,
spaceBetween: 30,
slidesPerGroup: 1,
autoplay: {
delay: 5000,
},
breakpoints: {

slidesPerView: 2,
},
modifier: 1,
shortSwipes: true,
loop: true,
loopFillGroupWithBlank: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',


},
});

У второго нет:

var swiper = new Swiper('.swiper2', {
effect: 'flip',
grabCursor: true,
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper2-button-next',
prevEl: '.swiper2-button-prev',
},
});

Сообщение отредактировал HITMAN84 - 17.11.2020, 21:21
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
HITMAN84
HITMAN84
Topic Starter сообщение 20.11.2020, 20:21; Ответить: HITMAN84
Сообщение #4


Привет!
Поставил карусель на вверх и с боку вертикальную Vertical Slider https://stackblitz.com/edit/swiper-demo-9-v...file=index.html
Всё норм, но при включении автоплея Слаидеры идут вверх по другим блокам, т.е повверх шаблона все они идут... Какой параметр нужно добавить, чтобы не выезжал дальше своего блока?

Сообщение отредактировал HITMAN84 - 20.11.2020, 20:23
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Добавить ответ в эту тему
Быстрый ответ
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Максимальное количестве внешних ссылок на странице при покупке
10 Mansurka 444 8.10.2020, 23:35
автор: Latinos
Открытая тема (нет новых ответов) Тошнота ключа на странице
14 Vmir 687 7.9.2020, 1:00
автор: NormanSky
Открытая тема (нет новых ответов) Yandex suggest, XMLHttpRequest - на локальной странице
1 pointer 423 3.9.2020, 16:19
автор: Degradator
Открытая тема (нет новых ответов) Два сайта под ваши статьи и постовые
Женская и стройка с Тиц 30
14 PostBrigada 8630 16.1.2019, 21:38
автор: Alexkoles
Открытая тема (нет новых ответов) Продаю два сайта на Wordpress тиц
1 tbr82 2247 20.7.2018, 22:36
автор: tbr82


 



RSS Текстовая версия Сейчас: 1.12.2020, 6:08
Дизайн