猫头鹰旋转木马有三个同步幻灯片

时间：2016-07-21 13:05:46

标签： javascript jquery html css

我正在寻找同步猫头鹰旋转木马幻灯片的解决方案。

我已经制作了同步幻灯片，只有2张幻灯片。

我真正需要的是一张幻灯片，它是一个类别，下面是第二张幻灯片，其中包含一个可变的内容计数，属于不同的类别。

我的解决方案是复制/粘贴两张幻灯片的前代码并更改所有类和所有内容。但它现在混淆了不同幻灯片上的所有课程。

这个想法有另一种解决方案吗？

的Javascript 

var sync1 = $(".service-line");
var sync2 =$(".servicetext");

$(".service-line").owlCarousel({
    navigation: false,
    pagination: true,
    slideSpeed: 1000,
    paginationSpeed: 500,
    paginationNumbers: true,
    singleItem: true,
    autoPlay: false,
    autoHeight:false,
    animateIn: 'slideIn',
    animateOut: 'slideOut',
    afterAction : syncPosition,
    responsiveRefreshRate : 200,
    afterMove: afterAction
});

function afterAction(){
   $( ".owl-item.active" ).find( "animation-cap" ).addClass( "animated", "bounce" );
}

$(".servicetext").owlCarousel({
     items: 1,
     pagination: false,
     slideSpeed: 800,
     paginationSpeed: 700,
     animateIn: 'slideIn',
     animateOut: 'slideOut',
     autoHeight: true,
     responsiveRefreshRate : 100,
     mouseDrag: false,
     afterInit : function(el){
         el.find(".owl-item").eq(0).addClass("synced");
     }
});

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

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

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

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

  }



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="konfig-slide-top"> <!--TOP Slider #1 -->

    <!--TOP SLIDER slide1-->
  <div class="slider-wrap">
    <div class="slide-content">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 animation-cap">
            <h2>Category 1</h2>
          </div>
        </div>


      </div>
      <!--<img src="img/service/01.png" alt="01">-->
    </div>

  </div><!--slide1 ends-->

  <!--TOP SLIDER slide2-->
  <div class="slider-wrap">
    <div class="slide-content">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 animation-cap">
            <h2>Category 1</h2>
          </div>
        </div>


      </div>
      <!--<img src="img/service/01.png" alt="01">-->
    </div>

  </div><!--slide2 ends-->


</div>
<!-- Top Slider ends -->


<!-- Bottom Slider Starts -->
<div class="konfig-slide-bottom">

  <!-- ======  BOTTOM SLIDER Slide 1 ====== -->
  <div class="row">
    <div class="row lower-input-main">
      <!-- ======  INNER SLIDER Slide starts ====== -->
      <div class="konfig-slide-bottom-inner">
        <div class="row">
          <!--inner slider slide 1 -->

          <div class="col-md-12">
            <h1 style="color:white;">Slide 1 inner slide</h1>
          </div>
        </div>

        <div class="row">
          <!--slide 2 inner slide -->

          <div class="col-md-12">
            <h1 style="color:white;">Slide 2 inner slide</h1>
          </div>
        </div>

      </div>



    </div>
  </div>
</div>

1 个答案:

答案 0 :(得分：0)

我发错了，对不起。 至少，我今天早上再次尝试并完成了我的任务。我只是想粘贴我的代码，所以这个问题得到了回答。

我的jquery代码：

var synctop = $(".konfig-slide-top");
    var syncbottom =$(".konfig-slide-bottom");


    $(".konfig-slide-top").owlCarousel({
        navigation: true,
        pagination: false,
        slideSpeed: 1000,
        paginationSpeed: 500,
        paginationNumbers: false,
        singleItem: true,
        autoPlay: false,
        autoHeight:false,
        animateIn: 'slideIn',
        animateOut: 'slideOut',
        afterAction : syncPositionnew,
        responsiveRefreshRate : 200,
        afterMove: afterActionnew
    });

    $(".konfig-slide-bottom").owlCarousel({
        items: 1,
        pagination: false,
        navigation: false,
        slideSpeed: 800,
        paginationSpeed: 700,
        animateIn: 'slideIn',
        animateOut: 'slideOut',
        autoHeight: true,
        responsiveRefreshRate : 100,
        mouseDrag: false,
        afterInit : function(el){
        el.find(".owl-item").eq(0).addClass("syncednew");
        }
    });


    var owl = $(".konfig-slide-inner");

    owl.owlCarousel({
        items: 1,
        pagination: false,
        navigation: false,

        slideSpeed: 800,
        paginationSpeed: 700,
        animateIn: 'slideIn',
        animateOut: 'slideOut',
        autoHeight: true,
        responsiveRefreshRate : 100,
        mouseDrag: false,
        loop: false,
        afterInit : function(el){
        el.find(".owl-item").eq(0).addClass("syncednew2");
        }
    });


    //slide inner slider        
    $('.next-inner').click(function() {
        owl.trigger('owl.next');
    });

    var top = $(".konfig-slide-top");

    // slide parent slider
    $('.next-top').click(function() {
        top.trigger('owl.next');
    });




    function afterActionnew(){
        $( ".owl-item.active" ).find( "animation-cap" ).addClass( "animated", "bounce" );
    }

    function syncPositionnew(el){
var current = this.currentItem;
$(".konfig-slide-bottom")
  .find(".owl-item")
  .removeClass("syncednew")
  .eq(current)
  .addClass("syncednew");
if($(".konfig-slide-bottom").data("owlCarousel") !== undefined){
  centernew(current);
}
  }

  $(".konfig-slide-bottom").on("click", ".owl-item", function(e){
e.preventDefault();
var number = $(this).data("owlItem");
synctop.trigger("owl.goTo",number);
  });

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

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

 }

在HTML中，konfig-slide-inner嵌套在konfig-slide-bottom中：

<div class="konfig-slide-top">
-slide 1
-slide 2
- etc.
</div>

<div class="konfig-slide-bottom">
  <div class="konfig-slide-inner">
    -slide 1 
       -text 1
       -text 2
       -text 3
    -slide 2
       -text 1
       -text 2
       -text 3
    - etc.
  </div>
</div>

现在我有一个带有多个幻灯片的滑块，它与顶部滑块同步。 唯一的问题是，当konfig-slide-inner从slide1更改为slide2时，未显示来自slide2的text1，它会直接跳转到text2。这总结了，所以如果我现在有幻灯片3，则不会显示2个文本幻灯片，依此类推。 我无法得到它的线索。 拜托，有人可以帮助我吗？

相关问题
最新问题