Вкладки с несколькими слайд-шоу иногда не загружают слайдеры - PullRequest
0 голосов
/ 25 октября 2019

Я создал вкладки. Есть 3 элемента вкладки, и содержимое вкладок является ползунками. Когда я использую эти слайд-шоу без вкладок, он работает нормально. Но когда используются вкладки, ползунок tab2 или tab3 иногда не загружается. Это происходит только иногда. Из того, что я узнал, он отлично загружается при загрузке страницы, когда не используется никаких вкладок, но с вкладками мне приходится скрывать две другие вкладки при загрузке страницы. Поэтому при нажатии на эти вкладки слайд-шоу иногда не отображается / не загружается. Иногда оно также работает нормально. Вкладки работают нормально, текстовое содержимое также. Я работал над shopify, поэтому использовал слайд-шоу темы. Вот код HTML-кода для вкладок:

<ul class="tabs">
    <li>
        <a data-toggle="tab" href="#menu1">Tab 1</a>
    </li>
    <li>
        <a data-toggle="tab" href="#menu2">Tab 2</a>
    </li>
    <li>
        <a data-toggle="tab" href="#menu3">Tab 3</a>
    </li>
</ul>
<!-- Code for tabs Contnet -->
<div id="menu1">
    <section class="homepage-slideshow js-homepage-slideshow">
        <div class="gallery-cell slide1">
            <div class="oc_img_container">
                <img  src="image1.jpg"/>
            </div>
        </div>
        <div class="gallery-cell slide1">
            <div class="oc_img_container">
                <img  src="image2.jpg"/>
            </div>
        </div>
        <div class="gallery-cell slide1">
            <div class="oc_img_container">
                <img  src="image3.jpg"/>
            </div>
        </div>
    </section>
</div>
<div id="menu2">
    <section class="homepage-slideshow js-homepage-slideshow">
        <div class="gallery-cell slide1">
            <div class="oc_img_container">
                <img  src="image21.jpg"/>
            </div>
        </div>
        <div class="gallery-cell slide1">
            <div class="oc_img_container">
                <img  src="image22.jpg"/>
            </div>
        </div>
        <div class="gallery-cell slide1">
            <div class="oc_img_container">
                <img  src="image23.jpg"/>
            </div>
        </div>
    </section>
</div>
<div id="menu3">
    <section class="homepage-slideshow js-homepage-slideshow">
        <div class="gallery-cell slide1">
            <div class="oc_img_container">
                <img  src="image31.jpg"/>
            </div>
        </div>
        <div class="gallery-cell slide1">
            <div class="oc_img_container">
                <img  src="image32.jpg"/>
            </div>
        </div>
        <div class="gallery-cell slide1">
            <div class="oc_img_container">
                <img  src="image33.jpg"/>
            </div>
        </div>
    </section>
</div>

Javascript для вкладок

<script type="text/javascript">
    $(document).ready(function() {
        $('ul.tabs').each(function(){
          var active, content, links = $(this).find('a');
          active = links.first().addClass('active');
          content = $(active.attr('href'));
          links.not(':first').each(function () {
            $($(this).attr('href')).hide();
          });
          $(this).find('a').click(function(e){
            active.removeClass('active');
            content.hide();
            active = $(this);
            content = $($(this).attr('href'));
            active.addClass('active');
            content.show();
            return false;
          });
        });
    });
</script>

Я работаю в shopify и с помощью ползунка темы, вот код для слайд-шоуиз темы.

var slideshow = {
  init: function(){

    $('.js-homepage-slideshow').each(function (index, value){
      var $homepageSlider = $(this);
      var settings = {
        slideshowSpeed: $homepageSlider.data('slideshow-speed')*1000,
        slideshowTextAnimation: $homepageSlider.data('slideshow-text-animation'),
        adaptiveHeight: $homepageSlider.data('adaptive-height')
      }

      //initiate the slideshow
      if (!$homepageSlider.hasClass('flickity-enabled')){
        var arrowShow = $homepageSlider.find('.gallery-cell').length === 1 ? false : true;
        $homepageSlider.flickity({
                    adaptiveHeight: settings.adaptiveHeight,
                    wrapAround: true,
                    cellAlign: 'left',
                    imagesLoaded: true,
                    prevNextButtons: arrowShow,
                    draggable: arrowShow,
                    pageDots: usePageDots,
                    autoPlay: settings.slideshowSpeed,
                    arrowShape: arrowSize
                  });

        if (settings.slideshowTextAnimation != ''){
          var flkty = $homepageSlider.data('flickity');
          setTimeout(function() {
            $homepageSlider.find('.gallery-cell:nth-child(1) .caption-content').addClass('animated ' + settings.slideshowTextAnimation);
          }, 400);

          $homepageSlider.on( 'select.flickity', function() {
            if($homepageSlider.is(':visible')) {
              var currentSlide = flkty.selectedIndex + 1;
              setTimeout(function() {
                $homepageSlider.find('.caption-content').removeClass('animated ' + settings.slideshowTextAnimation);
                $homepageSlider.find('.gallery-cell:nth-child(' + currentSlide + ') .caption-content').addClass('animated ' + settings.slideshowTextAnimation);
              }, 400);
            }
          });
        }
      }

      if ($homepageSlider.find('.gallery-cell').length > 1) {
        $homepageSlider.addClass('multi-image');
      } else {
        $homepageSlider.addClass('single-image');
      }

      $homepageSlider.find('.gallery-cell').each(function(){
        var buttonWidth = 0;
        $(this).find('.action_button').each(function(){
          $button = $(this);
          if($(this).width() > buttonWidth){
              buttonWidth = $(this).width();
          }
        });
        $(this).find('.action_button').width(buttonWidth);
      });

    });
  },
  unload: function($target){

    var $slider = $target.find('.js-homepage-slideshow');
    $slider.flickity('destroy');

  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...