start items owlcarousel2 slider with custom class

Question

i use owlcarousel2 slider and i want slide item displayed that custom class

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>

I want slider start with custom class "custom-slide"

score 5 · Answer 1 · answered May 27 '17 at 06:38

You haven't specified which class exactly you want to overwrite. (Almost) all Owl Carousel 2 classes are described here.

By default Owl Carousel 2 generates following code:

<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>

if you really need to, you can change those classes when initializing the carousel (although I couldn't find that in the documentation which could be better):

$('.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'
})

start items owlcarousel2 slider with custom class

1 Answers1