1

из трех вкладок Swiper работает нормально только в первой, в последующих же он как я понимаю не может посчитать ширину экрана. Подскажите кто сталкивался, как правильно решить задачу.

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

инициализирую три раза

<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
    });

});

2
  • Добрый вечер, можно узнать какая версия bootstrap-а? 27 мая 2017 в 16:39
  • 1
    У закрытых вкладок свойство display:none Из-за этого свайпер может инициализмроваться с нулевыми размерами. (Такая засада у оул-карусели, например.). Попробуйте при открытии вкладок отправлять нужному свайперу событие resize или переинициализировать его. 29 мая 2017 в 16:31

1 ответ 1

0

Может подойдет вам такое решение

#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://bestofjs.org/logos/swiper.svg" /></div>
                    <div class="swiper-slide"><img class="img-fluid" src="https://bestofjs.org/logos/swiper.svg" /></div>
                    <div class="swiper-slide"><img class="img-fluid" src="https://bestofjs.org/logos/swiper.svg" /></div>
                    <div class="swiper-slide"><img class="img-fluid" src="https://bestofjs.org/logos/swiper.svg" /></div>
                    <div class="swiper-slide"><img class="img-fluid" src="https://bestofjs.org/logos/swiper.svg" /></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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.