Autoplay more than one item?

Question

If the carousel shown 4 items, to set the autoplay replaced with 4 new items. Here the demo if you click on the item pagination, you can see the effect. But if we set auto play, then change only one item?

$(".owlcarousel").owlCarousel({
    autoplay: true,
    margin: 10,
    nav: true,
    loop: true,
    responsive: {
        0: {
            items: 1
        },
        600: {
            items: 3
        },
        1000: {
            items: 5
        }
    }
});

php / html code (cakephp)

    <?php $brands = $this -> requestAction('/brands'); ?>
<div class="featured-brands">
    <div class="container">
        <div class="col-xs-12">
            <div class="owlcarousel">
            <?php foreach ($brands as $brand) {?>
                <div class="item"><?php echo $this->Html->image('brands/'.$brand['Brand']['id'].'/'.$brand['Brand']['image'],array('class'=>'img-responsive')); ?></div>
            <?php } ?>
            </div>
        </div>
    </div>
</div>

score 5 · Accepted Answer · edited Dec 10 '19 at 10:45

I'd set slideBy to your item count:

$(".owlcarousel").owlCarousel({
    autoplay: true,
    margin: 10,
    nav: true,
    loop: true,
    responsive: {
        0: {
            items: 1,
            slideBy: 1
        },
        600: {
            items: 3,
            slideBy: 3
        },
        1000: {
            items: 5,
            slideBy: 5
        }
    }
});

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html#slideby

score 3 · Answer 2 · edited Dec 10 '19 at 14:03

3

In Owl Carousel 2 you use the option: slideBy:'page' for sliding the entire "page" on autoPlay (or navigation buttons).

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

edited Dec 10 '19 at 14:03

isherwood

58,414
16
114
157

answered Feb 22 '17 at 11:30

Jörgen Lundgren

273
1
13

Autoplay more than one item?

2 Answers2