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

How to slider autoplay start and stop on mousehover and mouseleave? #1471

Comments

presslayouts commented Jul 4, 2016 •

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.

Slider js code bellow:

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

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

NPanayotov commented Jul 11, 2016 •

owl.owlCarousel( <
loop:true,
smartSpeed:450,
responsiveClass: true,
autoplayHoverPause: true, // Stops autoplay
responsiveRefreshRate : 10,
items:1,
>);

autoplayHoverPause
Type: Boolean
Default: false

Pause on mouse hover.

presslayouts commented Jul 14, 2016

Thank you for reply,

By default autoplay is stop but when i mouse hover on li then autoplay star and when mouse on leave li then autopay is stop.

When autoplayHoverPause is working only stop autoplay slider.

Please you can help in my requirement.

NPanayotov commented Jul 14, 2016 •

var owl = $(«.product-slider»).addClass(‘owl-carousel);
owl.owlCarousel( <
loop:true,
smartSpeed:450,
responsiveClass: true,
responsiveRefreshRate : 10,
items:1,
>);

$(‘.product-slider li’).on(‘mouseenter’,function(e) <
$(this).closest(‘.owl-carousel’).trigger(‘play.owl.autoplay’);
>)

$(‘.product-slider li’).on(‘mouseleave’,function(e) <
$(this).closest(‘.owl-carousel’).trigger(‘stop.owl.autoplay’);
>)

presslayouts commented Jul 14, 2016

But it not working and i have already added class owl-carousel in html structure.

We will use owl carousel js version is Owl Carousel v2.1.6.

what’s a problem? or I will some misunderstanding.

We have use bellow code and it working autopay slider, but only first slider slide is pay not second slide pay and after stop. not working continue end slide autopay.

Please any help me?

NPanayotov commented Jul 14, 2016

Try using older version of the plugin. It seems that since the new owner started changing things some of the functions got broken.

presslayouts commented Jul 14, 2016

Thank you for your good and fast reply,

Please you can tell me which older version use, then your code works fine

Thank.
On 14-Jul-2016 8:31 pm, «NPanayotov» notifications@github.com wrote:

Try using older version of the plugin. It seems that since the new owner
started changing things some of the functions got broken.

NPanayotov commented Jul 14, 2016

Поздрави,
Николай Панайотов

Thank you for your good and fast reply,

Please you can tell me which older version use, then your code works fine

Thank.
On 14-Jul-2016 8:31 pm, «NPanayotov» notifications@github.com wrote:

Try using older version of the plugin. It seems that since the new owner
started changing things some of the functions got broken.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

presslayouts commented Jul 15, 2016

I have tried in version 2.0.0 but it not working.

I have attached bellow my example .zip file, please you can check and
resolve issue and after send me this example.

thank in advance.

On Thu, Jul 14, 2016 at 9:33 PM, NPanayotov notifications@github.com
wrote:

Поздрави,
Николай Панайотов

Thank you for your good and fast reply,

Please you can tell me which older version use, then your code works fine

Thank.
On 14-Jul-2016 8:31 pm, «NPanayotov» notifications@github.com wrote:

Try using older version of the plugin. It seems that since the new
owner
started changing things some of the functions got broken.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub

Vilz commented Aug 12, 2016 •

bardachev commented Aug 14, 2016

Confirm that starting autoplay after mouse leave is buggy. It sometimes starts, sometimes don’t. When I then swipe to a next slide by hand — autoplay starts again.
I have 1 item on a page.

presslayouts commented Aug 16, 2016 •

Than you for your reply and it working fine but one issue is remaining.

I have use nested carousal, it means carousal inside carousal, And will use above code in parent inside one slide inside child carousal. When i mouse hover on any one parent slide then move both slider parent and child.

See bellow html code:

Please you can help me, only move child slider not parent slider move.

Thank you in advance .

Vilz commented Aug 22, 2016 •

Check that the variables used in each, do not coincide with the variables of parental carousel.

Something like this

• start fix autoplay on hover straight

I would need to implement a similar behavior after a while, so I’ll check in my project and write, if need be

presslayouts commented Aug 23, 2016

Thank you for help and reply.

mainTechnologiesCarousal is undefined variable.

How can use mainTechnologiesCarousal variable.

We are waiting for your reply.
On 22-Aug-2016 6:04 am, «Vilz» notifications@github.com wrote:

Check that the variables used in each, do not coincide with the variables
of parental carousel.

Something like this

$(‘.product-slider.owl-carousel’).each(function() <
var mainPromoCarousel = $(this);
var interval;
mainPromoCarousel.owlCarousel( <
items: 1,
nav: false,
navText: [», »],
slideBy: 1,
dots: true,
loop:true
>);
function nextPress(obj) <
obj.trigger(‘next.owl.carousel’);
>;
$(this).hover(
function() <
nextPress(mainTechnologiesCarousel);
interval = setInterval(function() <
nextPress(mainTechnologiesCarousel);
>, 1500);
>,
function() <
clearInterval(interval);
>
);
>);

I would need to implement a similar behavior after a while, so I’ll check
in my project and write, if need be

Источник

Can’t stop carousel in autoplay mode after ‘to.owl.carousel’ trigger #144

Comments

sferrara commented Jun 11, 2014

Hello,
I’ve this 2 rows in my code:
owl.trigger(‘stop.owl.autoplay’);
owl.trigger(‘to.owl.carousel’,[index],[0]);

but the carousel doesn’t stop. If I remove the first row the stop works.

Can you help me?

Best Regards
Stefano

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

witrin commented Jun 16, 2014

@sferrara Could you provide a link to an example?

nford commented Jun 16, 2014

I’ll just jump in here. I couldn’t get the event above, or autoplay.stop.owl to work. Added to codepen. http://codepen.io/nford/pen/Jefcr

witrin commented Jun 16, 2014

witrin commented Jul 27, 2014

mufaddalmw commented Nov 27, 2014

@witrin Demo provided by you above doesn’t seem to be working. Can you update?

lmartins commented Feb 3, 2015

Have anyone found out a solution for this, can’t make autoplay stop either.

alteredstudio commented Feb 3, 2015

I tried this. Should work according to the Owl 2.0 docs. It never stops on hover, or autoplay.stop.owl
Any updates on bug fixes, or work arounds? Thanks

$(‘.owl-carousel’).owlCarousel( <
loop:true,
nav:true,
items:1,
margin:0,
autoplay:true,
autoplayHoverPause:true,
>);

$(‘.owl-item, .owl-prev, .owl-next, .owl-dot span’).on(‘click’,function() <
$(‘.owl-carousel’).trigger(‘autoplay.stop.owl’)
>)

lmartins commented Feb 6, 2015

Now that OwlCarousel changed hand, maybe we will see a fix soon. Let’s hope.

ghost commented Mar 31, 2015

Is there any more news on this? I’ve come across this issue now and would love for it to stop on request. Has any progress been made?

ghost commented Mar 31, 2015

I’ve taken a look at the code and it seems you’re just missing one line of code. The autoplay handlers has this for the stop event:

Looking at the stop() function, it is only set to this:

This only clears the interval but doesn’t stop the autoplay. Adding in a line to set the option fixes this:

Note this may need a similar fix if you want to start autoplay as well but I haven’t tested that. Hope this helps with the fix and helps anyone who needs this functionality.

Источник

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

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

Источник