Hello! The situation is as follows: there is a page with many blocks, each of which contains a slider. Doing a separate slider for each block is not an option (there are a lot of blocks), so I thought about what to do ... until I accidentally discovered that there was no need to invent a bicycle.

Using swiper, it is enough to initialize one slider on the page, everything works correctly, which was checked in the codepen (look better at the codepen, everything went here).

var mySwiper = new Swiper ('.swiper-container', { nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', }) 
 * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } .wrapper { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-items: center; height: 100%; width: 100%; background: #d3d3d3; } .item { height: 250px; width: 30%; background: #fff; } .swiper-container { width: 100%; height: 100%; } .swiper-slide { width: 100%; display: flex; align-items: center; justify-content: center; } 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.js"></script> <div class="wrapper"> <div class="item"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </div> <div class="item"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </div> <div class="item"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </div> <div class="item"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </div> <div class="item"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </div> <div class="item"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </div> <div class="item"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </div> <div class="item"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </div> <div class="item"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </div> </div>

But in practice, the situation is, unfortunately, different: when using one slider in several blocks, it stops working completely from the word. I can not imagine why. Can someone answer this question? Link to the page where the slider does not work.

  • 2
    The first thing I can say - on the page you have an error from the swiper hangs. View it carefully - alexoander
  • That's just the point - several times I checked the correctness of the connection, initialization, structure of the svayper - that's right. From where these errors can not understand. - Igor
  • 2
    As written here - you need to look for conflicts. If this case works in a “pure form” on the foam code, it means that something is somewhere in your application or 1) is too global and prevents the svayperu 2) the svayper itself covers something - alexoander
  • Doing a separate slider for each block is not an option. Certainly not an option, it is enough to construct one slider object constructor and call it on the necessary blocks - pepel_xD

1 answer 1

Look in the console, you have an error there

TypeError: Cannot read property 'nodeType' of null (swiper.min.js: 15)

There are two options:

  • you are doing something wrong
  • the library is in conflict with something

If you cannot find an error in the code, then install a non-minified version of the library and sort it out from where the error appears.

  • Amazing. I replaced the compressed version of the library with the full one and it all worked. Thanks for the advice. - Igor