Owl carousel Slider-是否可以通过悬停分页器而不是点击分页器来控制？

Question

[blog]:这样写可不可以

$("#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 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>

对于演示，请仔细阅读此 link 并查看。 http://digishoppers.com/newhomepage

Answer 2

我想到了一个更简单的解决方案。我使用到达 js 来检测何时创建分页元素，并在鼠标悬停时触发 mouseup

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

https://github.com/uzairfarooq/arrive

Answer 3

很简单：

    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:

Owl carousel Slider-是否可以通过悬停分页器而不是点击分页器来控制？

Owl carousel Slider-Is it possible to control via hover paginator instead of click paginator?

css

jquery

slider

owl-carousel