Just started using this plugin and really loving it so far but one thing that would make the autoplay function look that much more beautiful in my use-case, is if it would support 'smooth' autoplay. Meaning that it doesn't stop at every new image but just smoothly carries on looping forever.

Hey.

I have a problem with the owl-nav. I set it true but at the HTML output it adds the class "disabled".

Here my code i use the latest version, i downloaded it today.

<script type='text/javascript'>

jQuery(document).ready(function($) {
	 $('.owl-carousel').owlCarousel({
		nav: true,
		items: 1,
		loop: true,
		center: true,
		margin: 0,
		lazyLoad:true,
		dots: false
	});
 })

</script>"

It is ok in owl.carousel.2.0.0-beta.2.4; JSFiddle Link: https://jsfiddle.net/JSDavi/7z1th3cx/

But it doesn't work in this new version of owl.carousel.2.1.0; JSFiddle Link: https://jsfiddle.net/JSDavi/rtvc5exr/

Even in owl.carousel.2.1.4, it doesn't work; JSFiddle Link: https://jsfiddle.net/JSDavi/cotyqt6x/1/

Also in owl.carousel.2.1.5, it doesn't work; JSFiddle Link: https://jsfiddle.net/JSDavi/689q9zLd/

What I care is that I can't scroll to the last item.

Thanks.

I have a 100vh height owl carousel slider in my header on mobile (Android/Chrome) but can't swipe to scroll down the page (touch event on top of slider). Side swipe to trigger slide transitions works fine but no page scrolling is happening on upward or downward swipe. Using version 2.3.0.

Any help appreciated! Thanks!

Im using version 2.2.0 and when switching tab, the images do no autoplay

here is my code

$('#clients').owlCarousel({ center: true, items:4, loop:true, autoplay: true, autoplayTimeout: 1000, margin:10 });

Hello, I have a strange bug... I have several pages with a carousel with same option

$('.owl-carousel').owlCarousel({
    margin:10,
    autoWidth:true,
    items:4,
    nav: true,
    navText: ['<span class="fa fa-angle-left"></span>', '<span class="fa fa-angle-right"></span>']
})

On same of this pages the carousel doesn't work correctly: the width of the owl-stage element is calculated wrongly and the last item of the carousel goes on a new line (under the firs item in chrome ora under the last item of the first row in firefox). for example look at this page: http://www.galleriacarlasozzani.org/en/past?milano/2010

the main issue is that it is random... on the vast majority of page everything work fine and the pages with the bug are have exactly the same layout and template of the other one.

Do you have any idea about fixing this?

thanks daniele

List of products with slider are available on same slider class, but when i mouse hove in any one li product, then effect only on mouse hover li play and stop slider.

Only mouse hover li slider play and stop.

Html Code

<ul class="product-lists">
    <li class="product">
        <ul class="product-slider owl-carousel">
            <li>slide 1</li>
            <li>slide 1</li>
        </ul>
    </li>
    <li class="product">
        <ul class="product-slider owl-carousel">
            <li>slide 1</li>
            <li>slide 1</li>
        </ul>
    </li>
    <li class="product">
        <ul class="product-slider owl-carousel">
            <li>slide 1</li>
            <li>slide 1</li>
        </ul>
    </li>
    .
    .
    .   
</ul>

Slider js code bellow:

var owl = $(".product-slider");                 
owl.owlCarousel({
    loop:true,
    smartSpeed:450,
    responsiveClass: true,
    responsiveRefreshRate : 10,
    items:1,                        
});

$('.product-lists li.product').on('mouseover',function(e){
    owl.trigger('play.owl.autoplay');
})
$('.product-lists li.product').on('mouseleave',function(e){
    owl.trigger('stop.owl.autoplay');
})

I have use above code but it not working. Please help me how do it?

After upgrade to the latest git version, tapping (on image to follow link/open modal) and scrolling inside the carousel area isn't working anymore. Bug or feature? :-)

i looked in your code there still autoHight function but when i called it, it's showing an error: Uncaught TypeError: Cannot read property 'eq' of null

can you fixed that?

There are already some issues from the last year (#80, #278) dealing with the same topic but I think there is now real solution. So – what I want to achieve is just the same as in this demo in Owl version 1: http://owlgraphic.com/owlcarousel/demos/sync.html

I have done it so far: http://jsfiddle.net/19v6ybug/

You can click in the navigation in a thumb to navigate to the correct slide (but when you go back to slide number one… something is wrong). But what I also want to have included is that when I click on the last navigation-thumb the navigation-carousel should move one forward to show the next nav-thumb (like in the demo of owl carousel 1).

And for now the slide-carousel is not really synced with the navigation-carousel. I found this snippet but it does not work:

sync1 = $("#slider");
sync2 = $("#navigation");
sync1.on('changed.owl.carousel', function(event) {
sync2.trigger('to.owl.carousel', [event.item.index,300,true]);

Would be awsome if you can help to make a working snippet everyone can use.

When there are too many pictures, the couple last pictures of the carousel are not displaying. The last one displayed seems cut.

However, if we the browser is a lot wider, the pictures actually appear.

Here is an example: http://codepen.io/anon/pen/sxrje

Hello friends.

I'm working in a project of a bank. Embed the owl carousel ando this working, but, when I have just one item, this one expands and justify the item to width 100%. :(

Can you help me? Thanks!! ;)

i use this $(".owlCarousel").owlCarousel({ loop:false, center:false, margin:10, items:1, responsive:false, nav:true, dots:false })

but there is two nav and dots elemets in the pages.

(https://user-images.githubusercontent.com/18481641/205438215-3abbdbaa-7bd6-4ad6-b1d8-03a24b1cab68.jpg)

https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/scss/_theme.scss#L43

This line starts with a '*' which is unrenderable in css within chrome.

owl carousel items are not working when appended dynamically using ajax,jquery below is my ajax code..any help will be really appreciated..

for (let index = 0; index < count.length; index++) {
                    let i = index + 1;
                    $('.owl-carousel').append(`
                        
                            <div class="bg-primary text-white position-absolute p-1 rounded">${response[i].name_category}</div>
                            <div class="mini-card-hero" style="background-image: url('${base_url + "uploads/images/article/" + response[i].gambar}');">
                                <div class="p-3">
                                    <a href="artikel/${response[i].title_seo}">
                                        <h3 class="text-light mt-3">${response[i].title}</h3>
                                    </a>
                                    <p>${response[i].excerpt}</p>
                                </div>
                            </div>
                        
                    `)
                }

I'm getting this error when I'm using the owl carousel plugin in my laravel 9 project.

Uncaught TypeError: Cannot read properties of undefined (reading 'fn') at owl.carousel.js:1718:4 at owl.carousel.js:1755:1

this is how I installed it npm install --save owl.carousel then in app.js I added

import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel';

then

npm run build
nom run dev

this is my app.js file

import 'owl.carousel';
import * as bootstrap from 'bootstrap';

import '../sass/app.scss';


import jQuery from 'jquery';


window.$ = jQuery;
window.bootstrap = bootstrap;


$(document).ready(function() {
// codes
});

this is my vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app-rtl.scss',
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
            '$': 'jQuery',
        },
    },
});

How can I solve this issue ?? I did search on the web nothings works for me thanks

Hi guys hope everyone doing great!! in my laravel project am looping with foreach and in item number 10 i want to add active class on it. Am showing 1 item in my owl casourel and i want the item that i add active class to be showed in my page not from the first item When i try to add the active class in div item via "if" condition and check my page i find it removed and start with first item :(

the code am using :

@foreach($weeks as  $key => $w)
    @php
        $str = ltrim($w->weekNumber, 'S');
    @endphp
    @if($w->fromTo == $today)
        <div class="owl-item active aaaaaaaaaaaaaa">
            <a id="discbtn" class="btn btn-info btn-user btn-block">
                SEMAINE N°{{$str}}  - DU {{$w->fromTo}}
            </a>
        </div>
    @else
        <div class="owl-item">
            <a id="discbtn" class="btn btn-primary btn-user btn-block">
                SEMAINE N°{{$str}}  - DU {{$w->fromTo}}
            </a>
        </div>
    @endif
@endforeach

I try to add "active" class with if condition but is not working