Several sliders on one page, what to fix?

Question

Slider

Hello everyone.
There was a need to place several sliders on one page. One works great, when placing the second and subsequent leapfrog begins. I found several solutions, but it didn’t work out, either it doesn’t fit my slider, or my hands are crooked.
Experimenting here all-pc-games.ru
The output of the slider is as follows:

<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>

How and what to fix. Thank you!

Answer 1

You have two slides with the same class name. Try like this:
- for the first one:
- for the second:
- JavaScript:

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

Answer 2

And if class names are formed dynamically? I have several blocks on the page that are loaded from the database. The slider can be in each block (or maybe not in each, but only in some). The number of these blocks can be from 1 to 25. I tried this version of the js code:

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

Does not work

Answer 3

this is how I made two sliders independent of each other

<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>