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
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Flexbox
Flexbox
сообщение 13.12.2020, 11:10; Ответить: Flexbox
Сообщение #5


Не смог создать новой темы, так как стоит ограничение до 15 сообщений. Интегрирую сайт на WP и использую для этого плагин Advanced-Custom-Fields-Pro для кастомных полей.
Мне нужно вывести такой двух уровнивый слайдер через эти поля. Я использую поля с типом повторитель, так как карточки однотипные, но проблема в том что в случаи добавление новой карточки она добавляется по вертикали вниз а мне нужно как на слайдере по четыре в ряд, всего их восемь. Как это сделать в html? Удаляю все карточки из разметки и оставляю только одну которую вывожу через плагин в полях - тип поля повторитель. Но ничего не работает( При добавлении тупо слайдер ломается, нужно сделать как-то по структуре...
Может кто-то подсказать как это правильно сделать?



И еще вопрос, как лучше сделать внутренние страницы на сайте, как здесь

Как вообще это делается на Word Press ? Чтобы добавлять новые страницы? С помощью записей или создать новую страницу и привязать к ней шаблон? Но мне же нужно добавлять новые товары...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Добавить ответ в эту тему
Быстрый ответ
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Два сайта под ваши статьи и постовые
Женская и стройка с Тиц 30
14 PostBrigada 8782 16.1.2019, 21:38
автор: Alexkoles
Открытая тема (нет новых ответов) Продаю два сайта на Wordpress тиц
1 tbr82 2299 20.7.2018, 22:36
автор: tbr82
Открытая тема (нет новых ответов) Продам два городских (районных) паблика в ВК с доходом
0 Bulava11 2460 28.6.2018, 15:01
автор: Bulava11
Открытая тема (нет новых ответов) В продаже два строительных сайта
Сайт проходит модерацию в ГГЛ
16 brucekiev 4961 25.3.2018, 13:11
автор: mnet
Открытая тема (нет новых ответов) Продам два шаблона PSD не дорого всего за 1200 рублей.
0 WerHover 2819 7.3.2018, 15:16
автор: -Алексей.1-


 



RSS Текстовая версия Сейчас: 22.1.2021, 8:13
Дизайн