Несколько слайдеров на одной странице, что поправить?

Question

[Александр]

Здравствуйте всем.
Появилась необходимость разместить несколько слайдеров на одной странице. Один прекрасно работает, при размещении второго и последующих начинается чехарда. Нашёл несколько вариантов решений, но реализовать не получилось, то ли не подходит к моему слайдеру, то ли руки кривые у меня.

Экспериментирую тут all-pc-games.ru

Вывод слайдера так:

<div class="flex-container"><div class="flexslider"><ul class="slides">
<li><a href="/......"><img src="/.......jpg" /></a><p>...........</p></li>
<li><a href="/........"><img src="/.........jpg" /></a><p>..........</p></li>
</ul></div></div>
<script>$(document).ready(function () {$('.flexslider').flexslider({animation: 'fade',controlsContainer: '.flexslider'});});</script>

Как и чего поправить. Спасибо!

Answer 1

[g_s_e]

У тебя у двух слайдах указано одно и то же имя класса. Попробуй так:
- для первого:

<div class="flex-container"><div class="flexslider">

- для второго:

<div class="flex-container"><div class="flexslider1">

- JavaScript:

$(document).ready(function () {
$('.flexslider').flexslider({animation: 'fade',controlsContainer: '.flexslider'});
$('.flexslider1').flexslider({animation: 'fade',controlsContainer: '.flexslider1'});
});

Comments

[Александр]

Спасибо Большое. Всё работает, стили подправил только немного.

Answer 2

[yura_1976]

А если имена классов формируются динамически? У меня, на странице есть несколько блоков, которые подгружаются из базы данных. Слайдер может быть в каждом блоке (а может и не в каждом, а только в некоторых). Количество этих блоков может быть от 1 до 25. Я пробовал такой вариант js-кода:

$('.slick-speaker').each(function() {
        $(this).slick({
            slidesToShow: 1,
            dots: false,
            arrows: false,
        });
    });

Не работает

Answer 3

[Роман Матвеев]

я вот так сделал два слайдера не зависимых друг от друга

<section class="slider">
        <div class="flexslider slider1">
          <ul class="slides">
            <li> </li>	    	    
  	     <li> </li>
          </ul>
        </div>
        <div id="carousel" class="flexslider carousel">
          <ul class="slides">
            <li> </li>	    	    
  	     <li> </li>
          </ul>
        </div>
      </section>

<section class="slider">
        <div class="flexslider slider1">
          <ul class="slides">
            <li> </li>	    	    
  	     <li> </li>
          </ul>
        </div>
        <div id="carousel" class="flexslider carousel">
          <ul class="slides">
            <li> </li>	    	    
  	     <li> </li>
          </ul>
        </div>
      </section>

<script type="text/javascript">
     $(window).load(function(){
      $('.carousel').each(function() {
        var slider1 = $(this).parent().children(".slider1");
              $(this).flexslider({
              animation: "slide",
              controlNav: false,
              animationLoop: false,
              slideshow: false,
              itemWidth: 210,
              itemMargin: 5,
              asNavFor: slider1
               
            });
          });
      
$('.slider1').each(function() {
      var carousel = $(this).parent().children(".carousel");
      $(this).flexslider({
        animation: "slide",
        controlNav: false,
        animationLoop: false,
        slideshow: false,
        sync: carousel,
        start: function(slider){
          $('body').removeClass('loading');
        }
      });

    });

  });
  </script>