Question

我使用owlcarousel2滑块，我希望幻灯片项显示自定义类

jQuery(document).ready(function($){
  $(".owl-carousel").owlCarousel({
  	items: '7',
  	rtl: true,
  });
});

<div class="item">
	<img src="http://welearn.site/wp-content/uploads/2016/09/k2.jpg" title="" alt="" />
</div>
    <div class="item">
	<img src="http://welearn.site/wp-content/uploads/2016/09/k2.jpg" title="" alt="" />
</div>
    <div class="item">
	<img src="http://welearn.site/wp-content/uploads/2016/09/k2.jpg" title="" alt="" />
</div>    <div class="item">
	<img src="http://welearn.site/wp-content/uploads/2016/09/k2.jpg" title="" alt="" />
</div>
    <div class="item">
	<img src="http://welearn.site/wp-content/uploads/2016/09/k2.jpg" title="" alt="" />
</div>
    <div class="item">
	<img src="http://welearn.site/wp-content/uploads/2016/09/k2.jpg" title="" alt="" />
</div>
    <div class="item custom-slide">
	<img src="http://welearn.site/wp-content/uploads/2016/09/k2.jpg" title="" alt="" />
</div>

我希望使用自定义类“custom-slide”滑块启动

Answer 1

您尚未指定要覆盖的确切类别。（几乎）所有Owl Carousel 2类都被描述为here。

默认情况下，Owl Carousel 2会生成以下代码：

<div class="owl-carousel owl-theme owl-loaded">
    <div class="owl-stage-outer">
        <div class="owl-stage">
            <div class="owl-item">...</div>
            <div class="owl-item">...</div>
            <div class="owl-item">...</div>
        </div>
    </div>
    <div class="owl-controls">
        <div class="owl-nav">
            <div class="owl-prev">prev</div>
            <div class="owl-next">next</div>
        </div>
        <div class="owl-dots">
            <div class="owl-dot active"><span></span></div>
            <div class="owl-dot"><span></span></div>
            <div class="owl-dot"><span></span></div>
        </div>
    </div>
</div>

如果你真的需要，你可以在初始化轮播时更改这些类（虽然我在文档中找不到更好的）：

$('.owl-carousel').owlCarousel({
    items: '7',
    rtl: true,
    refreshClass: 'owl-refresh',
    loadedClass: 'owl-loaded',
    loadingClass: 'owl-loading',
    rtlClass: 'owl-rtl',
    responsiveClass: 'owl-responsive',
    dragClass: 'owl-drag',
    itemClass: 'owl-item',
    stageClass: 'owl-stage',
    stageOuterClass: 'owl-stage-outer',
    grabClass: 'owl-grab',
    autoHeightClass: 'owl-height',
    navContainerClass: 'owl-nav',
    navClass: [ 'owl-prev', 'owl-next' ],
    slideBy: 1,
    dotClass: 'owl-dot',
    dotsClass: 'owl-dots'
})

使用自定义类启动项目owlcarousel2滑块

1 个答案: