Question

我正在设置一个同步的猫头鹰滑块，即2个滑块（均具有5个幻灯片/项目），并在“ #homeslidernav”的左侧和右侧有一个附加的导航“ #homecustomnav”（上一个/下一个箭头）。希望有道理..

我目前面临2个问题，

使用设置为仅在移动视图上显示的“ #homecustomnav”时，使用“下一个”按钮时，“＃homeslidernav”会跳过幻灯片（特定于第二张幻灯片）。但是，使用“上一个”按钮没有问题。

我尝试将“ #homeslidernav”设置为“ loop：false”，但它似乎无法正常工作。使用“ #homecustomnav”时，它只会向任一方向移动。

<div id="homecustomnav">
  <a class="prev"></a>
  <a class="next"></a>
</div>

<div id="homeslidernav" class="owl-carousel">
  <div class="slide-content">
    <img src="" alt=""/>
    <h4></h4>
  </div>

  <div class="slide-content">
    <img src="" alt=""/>
    <h4></h4>
  </div>

  <div class="slide-content">
    <img src="" alt=""/>
    <h4></h4>
  </div>

  <div class="slide-content">
    <img src="" alt=""/>
    <h4></h4>
  </div>

  <div class="slide-content">
    <img src="" alt=""/>
    <h4></h4>
  </div>
</div>

<div id="homeslider" class="owl-carousel">
  <div class="slide-content clearfix">
    <div class="text-container">
      <h3></h3>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <a href="#" class="btn btn-outline-default"></a>
    </div>

    <div class="img-container">
      <img src="" alt="">
    </div>
  </div>

  <div class="slide-content clearfix">
    <div class="text-container">
      <h3></h3>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <a href="#" class="btn btn-outline-default"></a>
    </div>

    <div class="img-container">
      <img src="" alt="">
    </div>
  </div>

  <div class="slide-content clearfix">
    <div class="text-container">
      <h3></h3>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <a href="#" class="btn btn-outline-default"></a>
    </div>

    <div class="img-container">
      <img src="" alt="">
    </div>
  </div>

  <div class="slide-content clearfix">
    <div class="text-container">
      <h3></h3>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <a href="#" class="btn btn-outline-default"></a>
    </div>

    <div class="img-container">
      <img src="" alt="">
    </div>
  </div>

  <div class="slide-content clearfix">
    <div class="text-container">
      <h3></h3>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <a href="#" class="btn btn-outline-default"></a>
    </div>

    <div class="img-container">
      <img src="" alt="">
    </div>
  </div>
</div>

$（document）.ready（function（）{

    var homeslider = $("#homeslider");
    var homeslidernav = $("#homeslidernav");
    var homecustomnav = $("#homeslider");

    homeslidernav.owlCarousel({
      items: 5,
      itemsDesktop      : [1199,5],
      itemsDesktopSmall : [979,5],
      itemsTablet       : [768,1],
      pagination: false,
      navigation: false,
      responsiveRefreshRate: 150,
      afterInit: function(el){
        el.find(".owl-item").eq(0).addClass("active");
      }
    });

    homeslider.owlCarousel({
      singleItem: true,
      slideSpeed: 1000,
      navigation: false,
      pagination: false,
      afterAction: syncPosition,
      responsiveRefreshRate: 150,
    });

    function syncPosition(el){
      var current = this.currentItem;
      $("#homeslidernav")
        .find(".owl-item")
        .removeClass("active")
        .eq(current)
        .addClass("active")
      if($("#homeslidernav").data("owlCarousel") !== undefined){
        center(current)
      }
    }

    $("#homeslidernav").on("click", ".owl-item", function(e){
      e.preventDefault();
      var number = $(this).data("owlItem");
      homeslider.trigger("owl.goTo",number);
    });

    function center(number){
      var homeslidernavvisible = homeslidernav.data("owlCarousel").owl.visibleItems;
      var num = number;
      var found = false;
      for(var i in homeslidernavvisible){
        if(num === homeslidernavvisible[i]){
          var found = true;
        }
      }

      if(found===false){
        if(num>homeslidernavvisible[homeslidernavvisible.length-1]){
          homeslidernav.trigger("owl.goTo", num - homeslidernavvisible.length+2)
        }else{
          if(num - 1 === -1){
            num = 0;
          }
          homeslidernav.trigger("owl.goTo", num);
        }
      } else if(num === homeslidernavvisible[homeslidernavvisible.length-1]){
        homeslidernav.trigger("owl.goTo", homeslidernavvisible[1])
      } else if(num === homeslidernavvisible[0]){
        homeslidernav.trigger("owl.goTo", num-1)
      }
    }

    homecustomnav.owlCarousel();

    // Custom Navigation Events
    $(".next").click(function(){
      homecustomnav.trigger('owl.next');
    })

    $(".prev").click(function(){
      homecustomnav.trigger('owl.prev');
    })
  });

小故障猫头鹰轮播设置

0 个答案: