Как реализовать две js карусели?

Question

[Nikitos08]

Добрый день! Есть табы , а в них должны быть две карусели с товарами. Одна карусель работает , а вторая нет. Id для второй поменял но все равно не крутит (

<script>

    var lis = document.getElementsByTagName('li');
    for (var i = 0; i < lis.length; i++) {
    }

    var width = 200; 
    var count = 4; 

    var carousel = document.getElementById('carouselSecond');
    var list = carousel.querySelector('ul');
    var listElems = carousel.querySelectorAll('li');

    var position = 0; 

    carousel.querySelector('.prev').onclick = function() {

      position = Math.min(position + width * count, 0)
      list.style.marginLeft = position + 'px';
    };

    carousel.querySelector('.next').onclick = function() {

      position = Math.max(position - width * count, -width * (listElems.length - count));
      list.style.marginLeft = position + 'px';
    };
   </script>  
<script>

    var lis = document.getElementsByTagName('li');
    for (var i = 0; i < lis.length; i++) {
    }

   
    var width = 200; 
    var count = 4; 

    var carousel = document.getElementById('carousel');
    var list = carousel.querySelector('ul');
    var listElems = carousel.querySelectorAll('li');

    var position = 0; 

    carousel.querySelector('.prev').onclick = function() {
      position = Math.min(position + width * count, 0)
      list.style.marginLeft = position + 'px';
    };

    carousel.querySelector('.next').onclick = function() {
      position = Math.max(position - width * count, -width * (listElems.length - count));
      list.style.marginLeft = position + 'px';
    };
   </script>

<div id="carouselSecond" class="carousel">
                    <button class="arrow prev"><img src="/images/left-a.png"></button>
                        <div class="gallery">
                            <ul class="images">
                                <li>
                                <div class="itemImage"><img src="http://matari.ua/images/generator/mda7500se-ats/mda7500se-ats-main.jpg" style="width: 200px;" alt=""></div>
                                <a href="/generator/mda7500se-ats.html"><h5 class="creditTitle genn">Matari MDA7500SE-ATS  (5 кВт)</h5></a>
                                <div class="unit ratings">
                                  <div class="rate rate-5"></div>
                                  <div class="otz">Отзывов (3)</div>
                                  <div class="clear"></div>
                                </div>
                                <div class="product-panel fp">
                                  <div class="unit price-row">
                                    <div class="main-price-box"><span class="main-price">43384</span> грн</div>
                                    <div class="item-order">
                                      <div class="pp-price-status-block">
                                        <div class="pp-price-status pp-price-status-available ">Есть в наличии</div>
                                        <button name="buy_details" class="ibutton-css-green button success  goto change-to-details">Выбрать
                                        </button>
                                      </div>
                                    </div>
                                  </div>
                                </div>

                              </li>

И таких li 15 для каждой карусели.
Саму карусель взял с learn JS

Comments

[Максим Тимофеев]

carousel.querySelector('.prev') - где тут обращение ко второй карусели?

[Nikitos08]

Максим Тимофеев:

Но она все равно листает со второй карусели первую

[Nikitos08]

Nikitos08:

[Nikitos08]

Максим Тимофеев: var lis = document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
}

var width = 200;
var count = 4;

var carouselSec = document.getElementById('carouselSecond');
var list = carouselSec.querySelector('ul');
var listElems = carouselSec.querySelectorAll('li');

var position = 0;

carouselSec.querySelector('.prevSecond').onclick = function() {

position = Math.min(position + width * count, 0)
list.style.marginLeft = position + 'px';
};

carouselSec.querySelector('.nextSecond').onclick = function() {

position = Math.max(position - width * count, -width * (listElems.length - count));
list.style.marginLeft = position + 'px';
};

[Nikitos08]

Максим Тимофеев: matari.oldsparky.in.ua/rassrochka.html

Answer 1

[Максим Тимофеев]

Возьмите адекватную карусель, например fotorama.io, у нее есть документация и разработчики позаботились о возможности вставить несколько на страницу.

Answer 2

[Александр Филиппенко]

Как-то делал сайт на котором на каждой странице было от 3 до 10 каруселей.
Использовал jCarousel и написал такую функцию:

function create_slider(selector,options,autoscroll)
{
	var obj = $(selector + " .slider").jcarousel(options);
	if(autoscroll)
	{
		obj.jcarouselAutoscroll(autoscroll);
	}
	$(selector + ' .arr_left')
		.on('jcarouselcontrol:active', function() {
			$(this).removeClass('inactive');
		})
		.on('jcarouselcontrol:inactive', function() {
			$(this).addClass('inactive');
		})
		.jcarouselControl({
			target: '-=1'
		});
	$(selector + ' .arr_right')
		.on('jcarouselcontrol:active', function() {
			$(this).removeClass('inactive');
		})
		.on('jcarouselcontrol:inactive', function() {
			$(this).addClass('inactive');
		})
		.jcarouselControl({
			target: '+=1'
		});


	$(selector + ' .pagination')
		.on('jcarouselpagination:active', 'a', function() {
			$(this).addClass('active');
		})
		.on('jcarouselpagination:inactive', 'a', function() {
			$(this).removeClass('active');
		})
		.jcarouselPagination({
			'item': function(page, carouselItems) {
				return '<a href="#' + page + '"></a>';
			}
		});

}

Подключал так:

$(window).load(function() {
	create_slider("#main_slider",{wrap: 'circular'},{interval: 5000,target: '+=1',autostart: true});
	create_slider(".facultet_slider .slider_wrapper");
	create_slider(".news_block .banners_wrapper");
});