Owl carousel loop не работает

How to fix Owl-Carousel loop issue?

I am creating a carousel with infinite loop in my website by using Owl-Carousel 2 but whatever I’ve tried, I could not make the carousel work. The carousel always moves little bit and comes back, it kind of stuck.

I have tried without loop and just autoPlay, then it works but no looping. Also, if I add autoplayHoverPause: true, with loop:true, it does not work unless I hover on the carousel, then it slides but of course loop still does not work.

The PHP loop code;

Thank you for your help

2 Answers 2

You can write like this. It works correctly.

I use Owl Carousel with the loop and it works perfectly. If you check https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html you can find the official documentation.

I think that your PHP code is not generating the right html structure with regards to the default js,css owl carousel files that you must include in your project

Assuming that you are working with these default files, you PHP code looks like this

I think it should be done with regards to the documentation, So it should be something like this instead

And honestly I don’t understand why you are adding multiple owl-carousel classes!! when you just need to apply the owl carousel js function for your slider like explained in the docs, so it should look like this.

Here you can find explanations for the slider options, So you are getting that infinite loop when you define loop to true in your js owlCarousel function call.

You can use multiple Owl Carousel on the page you just need to modify your HTML code and javascript

The div tag containing the class «owl-carousel» must have another custom class for each carousel, example:

The javascript must be updated too, each carousel:

Источник

The «loop» setting cloning items, when it shouldn’t #2091

Comments

aik099 commented Oct 13, 2017 •

I have carousel with 2 items in it, but configured to show 4 per page with loop option enabled. The these 2 items are cloned to create 4 items, but since scrolling doesn’t happen (I have less items than shown per page) it results in duplicate items being shown.

The text was updated successfully, but these errors were encountered:

keefyhub commented Oct 13, 2017

Maybe move the loop inside of the responsive option, then define a variable

You might need a variable for each screen width

aik099 commented Oct 13, 2017

Maybe this can’t be built-in in the library so that with loop setting enabled the cloning doesn’t happen, when there is nothing to scroll.

DD-soft commented Jan 28, 2018

If fx. each div item inside the carousel (class call ‘items’ in your example) has the , i do this in my settings which works perfectly:

omaracrystal commented Sep 18, 2018

So, I’ve been banging my head over this cloning issue with passing click events to the cloned slide.

what finally solved it for me is to set these two config values:

loop: false
rewind: true

This may solve your issue.

aik099 commented Sep 18, 2018

@DD-soft , totally missed your comment, but your solution looks correct theoretically. Still the carousel could automate that stuff at least.

@omaracrystal , by setting rewind option to true you’ll get different visual effect: by the end of carousel you’re dragged to the 1st icon of carousel. Since you’ve disabled loop option, then of course no duplicates would be created, but due to different visual effect that solution won’t help.

omaracrystal commented Sep 18, 2018

@aik099 I didn’t see any difference in visual effect.

aik099 commented Sep 20, 2018

@omaracrystal , that is really strange. Maybe it depends on element count in carousel itself. There won’t be 2 options ( rewind and loop ) if they would be doing the same thing.

sandip5678 commented Jan 3, 2019

So, I’ve been banging my head over this cloning issue with passing click events to the cloned slide.

what finally solved it for me is to set these two config values:

loop: false
rewind: true

This may solve your issue.

thanks for this. it helped.

vikaschauhan1 commented Feb 25, 2019

So, I’ve been banging my head over this cloning issue with passing click events to the cloned slide.

what finally solved it for me is to set these two config values:

loop: false
rewind: true

This may solve your issue.

Thanks resolved my problem 🙂

but I have one concern regarding OwlCarousel — Why do they make a clone of every item? Is there any specific reason for all this?

delroh commented Mar 31, 2019

Hmmm API docs states that the rewind option’s default value is true , though it doesn’t work if you don’t explicitly add rewind: true to the options.
https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

Thank you @omaracrystal, solved my issue.

kamleshwebtech commented Oct 9, 2019

So, I’ve been banging my head over this cloning issue with passing click events to the cloned slide.

what finally solved it for me is to set these two config values:

loop: false
rewind: true

This may solve your issue.

I used it same but i think below setting is better solution:
loop:( $(‘.item’).length > 5 )

sam03041993 commented Jun 13, 2020

So, I’ve been banging my head over this cloning issue with passing click events to the cloned slide.

what finally solved it for me is to set these two config values:

loop: false
rewind: true

This may solve your issue.

This worked for me , Thank you @omaracrystal 🙂

Rattone commented Nov 9, 2020

So, I’ve been banging my head over this cloning issue with passing click events to the cloned slide.

what finally solved it for me is to set these two config values:

loop: false
rewind: true

This may solve your issue.

This is simply a different approach, not a solution.

When you use loop the slide scrolls endlessly.
When you use rewind you go back to the beginning once you reach the end.

omaracrystal commented Feb 17, 2021

So, I’ve been banging my head over this cloning issue with passing click events to the cloned slide.
what finally solved it for me is to set these two config values:
loop: false
rewind: true
This may solve your issue.

This is simply a different approach, not a solution.

When you use loop the slide scrolls endlessly.
When you use rewind you go back to the beginning once you reach the end.

It’s a solution for most! May not be a solution for you though.

Источник

Wrong index if loop-option is enabled #1203

Comments

hahrens commented Jan 31, 2016

The Event «changed.owl.carousel» has a wrong/invalid index in event.item.index when loop is enabled.

I have the following Options:

animateOut: «fadeOut»,
items: 1,
itemsDesktop: false,
itemsDesktopSmall: false,
itemsTablet: false,
itemsTabletSmall: false,
itemsMobile: false,
singleItem : true,
itemsScaleUp: true,
pagination: false,
navigation: false,
autoplay: true,
loop: true,
autoplayTimeout: 5000,
slideSpeed: 300

The text was updated successfully, but these errors were encountered:

lbineau commented Feb 1, 2016

👍 Same issue with loop: true option (1 or multiple items)

jbrialon commented Feb 1, 2016

+1 I always have issues when I use the loop:true option

nicolasRdr commented Feb 1, 2016

It’s also blocking for me, in the same condition (loop:true)

diesonne commented Feb 10, 2016

same issue here when loop: true
if the carousel is set to autoplay the index starts at 3
if the carousel is not set to autoplay the index starts at 2
not yet sure if this is consistent, if so, easily fixed in my own code

louiswalch commented Mar 6, 2016

ohepworthbell commented Jun 13, 2016

Yes, I am getting this issue too.

It seems that when loop is set to true, Owl Carousel adds in «clone» slides and then mistakenly includes these when calculating the index. I have a carousel with 4 full-width slides. When loop is set to false, the index.count returns 0,1,2,3 (correct) and when loop is set to true, it returns 3,4,5,6,3,4,5,6. etc. (incorrect)

ohepworthbell commented Jun 13, 2016 •

A quick fix for now (that might be worth implementing into the actual Owl Carousel) is:

var current_slide_in_loop = e.page.index — (e.relatedTarget._clones.length / 2)

Rouche commented Jun 30, 2016 •

Same problem also.

Fix above does not seem to work with version 2.1.6.

I had to use this formula:

Not a good way to fix it definatelly if its fixed one day.

SergeySagan commented May 23, 2017 •

Will this ever be fixed? It’s setting the active class to the wrong item in my case 🙁 @Rouche Where did you add this code? Furthermore I’m using the NG2 Wrapper version of this. so doing this inside the Component class would be much more preferable:

Rouche commented May 23, 2017 •

options is the options pased to owl init function owlCarousel()

SergeySagan commented May 24, 2017 •

Thanks for your post, this got me all excited but to no avail. I am now getting this:

ERROR Error: Uncaught (in promise): TypeError: this.homeCarousel.options.onChanged is not a function

I get my homeCarousel like this:

this.homeCarousel.options.onChanged stuff in the ngOnInit

Thanks for your help!

SergeySagan commented May 25, 2017

For NG2 wrapped carousel. you can do this:
(I’m doing it in the ngOnInit)

The problem remains still that the initially loaded frame is not getting the active applied to it. only on the second round trip it does.

SergeySagan commented May 25, 2017

For this who care, again this is for the NG2 wrapper of OwlCarousel 2, here you go:

It’s definitely a jimmy-rig, but it lets me keep going.

pttsky commented Sep 26, 2017 •

I managed to sync two infinite owl carousels based on your pretty good idea, thank you @Rouche!

I simplified your code (removed if (index > 0) thing) because synced carousel remained still when going from the last slide to first.

ivanmart commented Feb 21, 2018

You guys are awesome, thanks. One remark is that / 2 won’t work as expected when active item is the first item in the carousel and you’re dragging in the reverse direction so the next active item will be the last item in the carousel. In this situation there’ll be +1 clone before index, so the only way we have is to get the exact number of clones before index. And there’s a useful jQuery function prevAll for it. Also
$carousels.not(this) means all other carousels on the page which is not what I needed, so I trigger strictly the previous carousel as it’s main to this one. Here’s the code:

daria2303 commented Sep 13, 2018

This is still not working properly if displayed item is not 1. Numbers repeat in my case 🙁

GavinJaynes commented Dec 13, 2018

I’m still experiencing the issue

don-dev commented Feb 12, 2019

++1 still experiencing issue

costheme commented Feb 15, 2019

I’m having the same issue, in place of 4 existing items i see 8 cloned. Any fix?

yunusga commented Mar 11, 2019

mayurjadav77 commented Nov 11, 2019

function syncPosition2(el) <
if (syncedSecondary) <
let current = (el.item.index + 1) — el.relatedTarget._clones.length / 2;
let itemsCount = el.item.count;

szymsza commented Jan 21, 2020

Any updates on this? Quite an important issue, yet still open 4 years later

Источник

Owl carousel loop не работает

List including all options from built-in plugins video, lazyload, autoheight and animate.

items

Type: Number
Default: 3

The number of items you want to see on the screen.

margin

Type: Number
Default: 0

margin-right(px) on item.

Type: Boolean
Default: false

Infinity loop. Duplicate last and first items to get loop illusion.

center

Type: Boolean
Default: false

Center item. Works well with even an odd number of items.

mouseDrag

Type: Boolean
Default: true

Mouse drag enabled.

touchDrag

Type: Boolean
Default: true

Touch drag enabled.

pullDrag

Type: Boolean
Default: true

Stage pull to edge.

freeDrag

Type: Boolean
Default: false

Item pull to edge.

stagePadding

Type: Number
Default: 0

Padding left and right on stage (can see neighbours).

merge

Type: Boolean
Default: false

Merge items. Looking for data-merge=’‘ inside item..

mergeFit

Type: Boolean
Default: true

Fit merged items if screen is smaller than items value.

autoWidth

Type: Boolean
Default: false

Set non grid content. Try using width style on divs.

startPosition

Type: Number/String
Default: 0

Start position or URL Hash string like ‘#id’.

URLhashListener

Type: Boolean
Default: false

Listen to url hash changes. data-hash on items is required.

Type: Boolean
Default: false

Show next/prev buttons.

rewind

Type: Boolean
Default: true

Go backwards when the boundary has reached.

navText

Type: Array
Default: [‘next’,’prev’]

navElement

Type: String
Default: div

DOM element type for a single directional navigation link.

slideBy

Type: Number/String
Default: 1

Navigation slide by x. ‘page’ string can be set to slide by page.

slideTransition

Type: String
Default: «

You can define the transition for the stage you want to use eg. linear.

Type: Boolean
Default: true

Show dots navigation.

dotsEach

Type: Number/Boolean
Default: false

Show dots each x item.

dotsData

Type: Boolean
Default: false

Used by data-dot content.

lazyLoad

Type: Boolean
Default: false

Lazy load images. data-src and data-src-retina for highres. Also load images into background inline style if element is not

lazyLoadEager

Type: Number
Default: 0

Eagerly pre-loads images to the right (and left when loop is enabled) based on how many items you want to preload.

autoplay

Type: Boolean
Default: false

autoplayTimeout

Type: Number
Default: 5000

Autoplay interval timeout.

autoplayHoverPause

Type: Boolean
Default: false

Pause on mouse hover.

smartSpeed

Type: Number
Default: 250

Speed Calculate. More info to come..

fluidSpeed

Type: Boolean
Default: Number

Speed Calculate. More info to come..

autoplaySpeed

Type: Number/Boolean
Default: false

navSpeed

Type: Number/Boolean
Default: false

dotsSpeed

Type: Boolean
Default: Number/Boolean

dragEndSpeed

Type: Number/Boolean
Default: false

callbacks

Type: Boolean
Default: true

Enable callback events.

responsive

Type: Object
Default: empty object

Object containing responsive options. Can be set to false to remove responsive capabilities.

responsiveRefreshRate

Type: Number
Default: 200

Responsive refresh rate.

responsiveBaseElement

Type: DOM element
Default: window

Set on any DOM element. If you care about non responsive browser (like ie8) then use it on main wrapper. This will prevent from crazy resizing.

video

Type: Boolean
Default: false

Enable fetching YouTube/Vimeo/Vzaar videos.

videoHeight

Type: Number/Boolean
Default: false

Set height for videos.

videoWidth

Type: Number/Boolean
Default: false

Set width for videos.

animateOut

Type: String/Boolean
Default: false

Class for CSS3 animation out.

animateIn

Type: String/Boolean
Default: false

Class for CSS3 animation in.

fallbackEasing

Type: String
Default: swing

Easing for CSS2 $.animate.

Type: Function
Default: false

Callback to retrieve basic information (current item/pages/widths). Info function second parameter is Owl DOM object reference.

nestedItemSelector

Type: String/Class
Default: false

Use it if owl items are deep nested inside some generated content. E.g ‘youritem’. Dont use dot before class name.

itemElement

Type: String
Default: div

DOM element type for owl-item.

stageElement

Type: String
Default: div

DOM element type for owl-stage.

navContainer

Type: String/Class/ID/Boolean
Default: false

Set your own container for nav.

dotsContainer

Type: String/Class/ID/Boolean
Default: false

Источник