owl-carousel - 具有自定义类的启动项目 owlcarousel2 slider

Question

我使用 owlcarousel2 slider ，并且我希望幻灯片项目显示该自定义类

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>

我希望 slider 以自定义类“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'
})