Jump to content
gluck

Маленькая шабашка для знатока JS

Recommended Posts

На сайте стоит вот такой свайпер: http://www.idangero.us/sliders/swiper/api.php

Все прекрасно работает (вариант без API).

 

Нужно повторить такой же свайпер еще раз на той же самой странице. Картинки другие, размеры другие (это я сам осилю), функционал тот же самый. На php  это не решить, нужно знать JS.

 

Сделаем?

Share this post


Link to post
Share on other sites

Можно на этом сайте посмотреть _bikinimal.ru там на карточке товара я до 4х слайдеров на этом скрипте вывел

Share this post


Link to post
Share on other sites

А толку смотреть итоговую страницу? :) Там уже чистый результат выведен... 

Сделаете мне второй свайпер за вразумительную денежку?

Share this post


Link to post
Share on other sites

Да чего его там делать то? 

Share this post


Link to post
Share on other sites

<script type="text/javascript">
		      var mySwiper = new Swiper('.swiper-container', {
		      	loop: false,
		      	slidesPerView: 4
		      })
		       $('.arrow-left').on('click', function(e) {
		      	e.preventDefault()
		      	mySwiper.swipePrev()
		      })
		       $('.arrow-right').on('click', function(e) {
		      	e.preventDefault()
		      	mySwiper.swipeNext()
		      })
</script>
<script type="text/javascript">
		      var mySwiper1 = new Swiper('.swiper-container1', {
		      	loop: false,
		      	slidesPerView: 4
		      })
		       $('.arrow-left1').on('click', function(e) {
		      	e.preventDefault()
		      	mySwiper1.swipePrev()
		      })
		       $('.arrow-right1').on('click', function(e) {
		      	e.preventDefault()
		      	mySwiper1.swipeNext()
		      })
</script>

Ну и так далее, модуль слайдера копируешь по аналогии прибавляя цифры на конце с умом, в css так же прописываешь прибавляя цифры с умом.

 

Тут вообще делать не чего, все очень просто.

Edited by Kerm (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

Если б знал, не просил бы :)

 

У меня в html все выглядит как у вас, но событие "потянул за картинку" обрабатывается только на первом свайпере. Я уже пробовал по-разному обзывать дивы, добавлять их новые имена в инициализацию js, но все мимо :( Подозреваю, что дело в одной строкае, но какой и где — для такого валенка как я сие тайна есть :)

Share this post


Link to post
Share on other sites

О, мерси, счас попробую ваш вариант.

swiper-container1 я уже делал, но наверное не так или не там :)

Share this post


Link to post
Share on other sites

Спасибо, заработало только в таком виде:

<script type="text/javascript">
window.onload = function() {
var mySwiper = new Swiper('.swiper-container', {
		      	loop: true,
		      	slidesPerView: 4
		      })
var mySwiper = new Swiper('.swiper-container1', {
		      	loop: true,
		      	slidesPerView: 4
		      })
		       $('.arrow-left').on('click', function(e) {
		      	e.preventDefault()
		      	mySwiper.swipePrev()
		      })
		       $('.arrow-right').on('click', function(e) {
		      	e.preventDefault()
		      	mySwiper.swipeNext()
		      })}
</script>

В вашем варианте ни в какую не хочет.

Share this post


Link to post
Share on other sites

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More