Of the three tabs, Swiper works normally only in the first one, in subsequent ones, as I understand it, it cannot calculate the screen width. Tell me who faced how to solve the problem.

<div class="tab-conteiner"> <div class="w-container container"> <div class="w-row"> <div class="w-col w-col-12"> <!--<div class="tab-conteiner w-col w-col-2">--> <!-- Навигация --> <ul class="nav nav-tabs row" role="myTabs"> <li class="active w-col-4"><a href="#home" aria-controls="home" role="tab" data-toggle="tab"><h3>Для дома</h3></a> </li> <li class="w-col-4"><a href="#foo" aria-controls="profile" role="tab" data-toggle="tab"><h3>Для кафе</h3></a></li> <li class="w-col-4"><a href="#bar" aria-controls="messages" role="tab" data-toggle="tab"><h3> Для Отдыха</h3></a> </li> </ul> <!-- Содержимое вкладок --> <div class="tab-content"> <div role="tabpanel" class="tab-pane fade in active" id="home"> <div class="slidersection"> <!-- Swiper --> <div class="swiper-container1"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="images/slider/slider1.jpg" alt="image01"/></div> <div class="swiper-slide"><img src="images/slider/slider2.jpg" alt="image02"/></div> <div class="swiper-slide"><img src="images/slider/slider3.gif" alt="image03"/></div> </div> <div class="swiper-pagination1"></div> <div class="swiper-button-next1"></div> <div class="swiper-button-prev1"></div> </div> </div> </div> <div role="tabpanel" class="tab-pane " id="foo"> <div class="slidersection"> <!-- Swiper --> <div class="swiper-container2"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="images/slider/slider4.jpg" alt="image01"/></div> <div class="swiper-slide"><img src="images/slider/slider5.jpg" alt="image02"/></div> <div class="swiper-slide"><img src="images/slider/slider6.gif" alt="image03"/></div> </div> <div class="swiper-pagination2"></div> <div class="swiper-button-next2"></div> <div class="swiper-button-prev2"></div> </div> </div> </div> <div role="tabpanel" class="tab-pane in " id="bar"> <div class="slidersection"> <!-- Swiper --> <div class="swiper-container3"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="images/slider/slider7.jpg" alt="image01"/></div> <div class="swiper-slide"><img src="images/slider/slider8.jpg" alt="image02"/></div> <div class="swiper-slide"><img src="images/slider/slider9.gif" alt="image03"/></div> </div> <div class="swiper-pagination3"></div> <div class="swiper-button-next3"></div> <div class="swiper-button-prev3"></div> </div> </div> </div> </div> </div> </div> </div>

I initialize three times

 <script> var swiper = new Swiper('.swiper-container1', { pagination: '.swiper-pagination1', nextButton: '.swiper-button-next1', prevButton: '.swiper-button-prev1', paginationClickable: true, spaceBetween: 30, centeredSlides: true, autoplay: null, autoplayDisableOnInteraction: false }); var swiper = new Swiper('.swiper-container2', { pagination: '.swiper-pagination2', nextButton: '.swiper-button-next2', prevButton: '.swiper-button-prev2', paginationClickable: true, spaceBetween: 30, centeredSlides: true, autoplay: null, autoplayDisableOnInteraction: false }); var swiper = new Swiper('.swiper-container3', { pagination: '.swiper-pagination3', nextButton: '.swiper-button-next3', prevButton: '.swiper-button-prev3', paginationClickable: true, spaceBetween: 30, centeredSlides: true, autoplay: null, autoplayDisableOnInteraction: false }); });

  • Good evening, you can find out what version of bootstrap? - Raz Galstyan
  • one
    For closed tabs, the display:none property display:none Because of this, the sviper can be initialized with zero dimensions. (Such an ambush at the o-roundabout, for example.). Try opening the tabs to send a resize event or reinitialize it to the required sviper. - Gleb Kemarsky

1 answer 1

Maybe this solution will suit you.

  #myTabContent{ background-color:#fefefe; padding:15px; } .main{ width: 80%; margin: 0 auto; padding: 15px; } .swiper-slide{ background-color:#ddd; padding: 15px; } .swiper-text .swiper-slide{ background-color:#ddd; padding: 40px; } 
  <!DOCTYPE html> <html dir="ltr" lang="ru"> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css"> </head> <body> <div class="main"> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="slider1-tab" href="#slider1">First</a> </li> <li class="nav-item"> <a class="nav-link" id="slider2-tab" href="#slider2">Two</a> </li> <li class="nav-item"> <a class="nav-link" id="slider3-tab" href="#slider3">Three</a> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane show active" id="slider1"> <div class="swiper-container" id="slider1_1"> <!-- Additional required wrapper --> <div class="swiper-wrapper swiper-text"> <!-- Slides --> <div class="swiper-slide">Slide 1 - 1 slider</div> <div class="swiper-slide">Slide 2 - 1 slider</div> <div class="swiper-slide">Slide 3 - 1 slider</div> <div class="swiper-slide">Slide 4 - 1 slider</div> <div class="swiper-slide">Slide 5 - 1 slider</div> </div> <!-- If we need navigation buttons --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </div> <div class="tab-pane" id="slider2" role="tabpanel"> <div class="swiper-container" id="slider2_1"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide"><img class="img-fluid" src="https://idangero.us/swiper/i/logo.png" /></div> <div class="swiper-slide"><img class="img-fluid" src="https://idangero.us/swiper/i/logo.png" /></div> <div class="swiper-slide"><img class="img-fluid" src="https://idangero.us/swiper/i/logo.png" /></div> <div class="swiper-slide"><img class="img-fluid" src="https://idangero.us/swiper/i/logo.png" /></div> <div class="swiper-slide"><img class="img-fluid" src="https://idangero.us/swiper/i/logo.png" /></div> </div> <!-- If we need navigation buttons --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <div class="swiper-pagination"></div> </div> <div class="swiper-container" id="slider2_2"> <!-- Additional required wrapper --> <div class="swiper-wrapper swiper-text"> <!-- Slides --> <div class="swiper-slide">Slide 1 - 2 slider</div> <div class="swiper-slide">Slide 2 - 2 slider</div> <div class="swiper-slide">Slide 3 - 2 slider</div> <div class="swiper-slide">Slide 4 - 2 slider</div> <div class="swiper-slide">Slide 5 - 2 slider</div> </div> <!-- If we need navigation buttons --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </div> <div class="tab-pane" id="slider3" role="tabpanel"> <div class="swiper-container" id="slider3_1"> <!-- Additional required wrapper --> <div class="swiper-wrapper swiper-text"> <!-- Slides --> <div class="swiper-slide">Slide 1 - 3 slider</div> <div class="swiper-slide">Slide 2 - 3 slider</div> <div class="swiper-slide">Slide 3 - 3 slider</div> <div class="swiper-slide">Slide 4 - 3 slider</div> <div class="swiper-slide">Slide 5 - 3 slider</div> </div> <!-- If we need navigation buttons --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <div class="swiper-pagination"></div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script> <script> var mySwipers = {}; function initSwiper(id,idname){ var allslider = $(id).find('.swiper-container'); $.each(allslider,function(key,val){ var selecto = id +' #'+$(val).attr('id'); mySwipers[idname] = new Swiper (selecto, { // Optional parameters loop: key == 0 ? true : false, slidesPerView: 4, slidesPerGroup:1, autoplay: { delay: key == 0 ? 1500 : 1000, disableOnInteraction: false }, spaceBetween:15, pagination: { el: selecto+' .swiper-pagination', dynamicBullets:true, dynamicMainBullets:3 }, navigation: { nextEl: selecto+' .swiper-button-next', prevEl: selecto+' .swiper-button-prev', }, on:{ slideChange(){ //console.log('change slide ',this.activeIndex , this.el.id); } }, breakpoints: { 320: { slidesPerView: 1, spaceBetween: 10 }, 768: { slidesPerView: 2, spaceBetween: 15 }, 1024: { slidesPerView: 3, spaceBetween: 15 } }, observer:true, observeParents:true, observeSlideChildren:true }) }) } $('#myTab a').on('click', function (e) { e.preventDefault() var self = this; var id = $(e.target).attr('href'); var re = /#/gi; var idname = id.replace(re, ''); $(self).tab('show'); initSwiper(id,idname); }) initSwiper('#slider1','slider1'); </script> </body> </html>