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 ? Чтобы добавлять новые страницы? С помощью записей или создать новую страницу и привязать к ней шаблон? Но мне же нужно добавлять новые товары...

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) SEO-текст на главной странице сайта и в категориях
5 boltuk 1355 26.3.2024, 21:43
автор: c4p1t4l15t
Открытая тема (нет новых ответов) Сделать правки на html-странице
5 TABAK 2262 20.5.2023, 10:45
автор: EvilGomel
Открытая тема (нет новых ответов) Два сайта р травах и народной медицине Восстановленные на wordpress
2 tbr82 2147 19.5.2022, 0:52
автор: tbr82
Открытая тема (нет новых ответов) Два сайта под ваши статьи и постовые
Женская и стройка с Тиц 30
14 PostBrigada 11503 16.1.2019, 21:38
автор: Alexkoles
Открытая тема (нет новых ответов) Продаю два сайта на Wordpress тиц
1 tbr82 2994 20.7.2018, 22:36
автор: tbr82


 



RSS Текстовая версия Сейчас: 29.3.2024, 17:56
Дизайн