Question

[博客]：是否有可能这样写

$("#owl-demo").owlCarousel({
    navigation: true,
    slideSpeed: 300,
    paginationSpeed: 400,
    singleItem: true,
    paginationhover: true//is it possible to write like that or not
});

Answer 1

这很简单：

    var owl = jQuery(".cd-hover-gal");
      owl.owlCarousel({
          items: 1,
          margin: 0,
          animateOut: 'fadeOut',
          animateIn:  'fadeIn',
          smartSpeed: 450,
      });
  jQuery(".cd-hover-gal .owl-dot").hover(function() {
      jQuery(this).trigger("click");
    }
  );

see working example:

Answer 2

我花了两天但没找到任何论坛来解决这个问题。最后，我通过我编写的快捷功能完成了这项任务。希望它对你有所帮助。请检查代码并根据您的要求进行修改。

var slidercarousel = $(".owl-carousel");
  slidercarousel.owlCarousel({
    navigation : false,
    pagination : true,
    slideSpeed : 300,
    paginationSpeed : 400,
    singleItem : true,
    lazyLoad   : true,
    lazyFollow : true,
    lazyEffect  : "fade",
    autoPlay    : true,
    stopOnHover : true,
    addClassActive : true,
    afterInit: makePages,
    afterUpdate: makePages
  });

$( ".myslider" ).mouseover(function() {
    slidercarousel.trigger('owl.goTo', this.id);
    $('.myslider').removeClass('slider_active');
    $(this).addClass('slider_active');
  });

function makePages() {
    $.each(this.owl.userItems, function(i) {
    $('.owl-controls .owl-page').eq(i)
            .html("<div class='myslider' id='"+i+"'>"+$('.figureCaption'+i).html()+"</div>")
    });
  }

活动项目的CSS

<style>   
.home-page-slider .owl-controls .owl-pagination .active{
border-bottom: 4px solid rgb(161, 206, 42);
 }
</style>

演示请仔细阅读此链接并查看。 http://digishoppers.com/newhomepage

Answer 3

我提出了一个更简单的解决方案。我使用到达js来检测分页元素的创建时间和鼠标悬停时触发鼠标

$(document).arrive(".owl-page", function () {
    var dot = $(this);
    dot.mouseover(function () {
        $(this).mouseup();
    });
});

https://github.com/uzairfarooq/arrive

猫头鹰旋转木马滑块 - 是否可以通过悬停分页器控制而不是点击分页器？

3 个答案: