I am new to css and I am trying to use tailwind Carousel (from tw-elements) with my gatsby react app and everything is working fine except for the auto-scroll on page load. I copied the first example from this link, which already has auto-scroll enabled.
On playing with it a bit longer I realised that the auto-scroll starts working once I interact with the carousel - only via the next/prev buttons. If I click on the indicators before clicking on the next/prev buttons the autoplay never starts.
I tried some workarounds that are probably not ideal but didn't work anyway -
I tried manually clicking the next button on pageload with the help of ref.current.click but it still does not start the auto-scroll. I need to hover my mouse over the Carousel and then exit for the auto-scroll to begin.
I also tried setting data-bs-pause={false} to not make it stop on mouse hover but that just stops the auto-scroll completely.
Is this due to some differences between how gatsby and tw-elements work or am I missing something basic here?
ps - the attributes I passed for the the carousel were picked from the bootstrap documentation, since tw-elements are built on top of bootstrap.
I am using a owl Carousel Plugin on my Joomla site. When I hover over the carousel, it stop the autoplay. I don't want it to stop. I want it to continue autoplay even on mouseover. I don't understand Javascript but pasting the Owl Carousel JS section where this is hover. Is there a way to modify this so as not to stop the autoplay on hover?
},this),"play.owl.autoplay":a.proxy(function(a,b,c){this.play(b,c)},this),"stop.owl.autoplay":a.proxy(function(){this.stop()},this),"mouseover.owl.autoplay":a.proxy(function(){this.core.settings.autoplayHoverPause&&this.pause()},this),"mouseleave.owl.autoplay":a.proxy(function(){this.core.settings.autoplayHoverPause&&this.autoplay()},this)},this.core.$element.on(this.handlers)};d.Defaults={autoplay:!1,autoplayTimeout:5e3,autoplayHoverPause:!1,autoplaySpeed:!1},d.prototype.autoplay=function(){this.core.settings.autoplay&&!this.core.state.videoPlay?(b.clearInterval(this.interval),this.interval=b.setInterval(a.proxy(function(){this.play()},this),this.core.settings.autoplayTimeout)):b.clearInterval(this.interval)},d.prototype.play=function(){return c.hidden===!0||this.core.state.isTouch||this.core.state.isScrolling||this.core.state.isSwiping||this.core.state.inMotion?void 0:this.core.settings.autoplay===!1
I apologize is if this is not the proper way to ask this question to solve this issue.
You can customise the behaviour of the owl carousel with this code. Add this to the bottom of the page on which you have the carousel. and set 'stopOnHover' to true
$('your-carousel-id-or-class').owlCarousel({
autoplayHoverPause:true,
stopOnHover:true <===
loop:true,
margin:0,
nav:true
})
I am creating a slider of properties, I am using the slick slider library. However part of the next slide is showing and part of the last slide is cut off.
I only want 4 slides to appear at desktop level.
I have tried stackoverflow and googling solutions with no luck.
https://codepen.io/bkdigital/pen/VoXGmR - To run the code you will need to open the codepen in firefox and have an add on to allow CORS to view the slider in action.
code
Wrapping the slider elements inside a div fixed the layout issues.
I probably need a step in the right direction as I'm not sure if this is a CSS transition issue or a Jquery issue.
I'm trying to implement the carousel listed here:
https://www.codeply.com/go/XPajZsz60p/bootstrap-4-responsive-carousel-4-slides-slide-one
But when I tried to implement it (see half way down the page under Recent Clients) and try to slide right, it does not have a smooth transition. The slide left works perfectly.
http://www.fordengineering.ca
When I slide right, the new icon appears almost immediately and covers over the whole slide.
Is this because I should be doing this on the bs.slid.carousel function instead of the bs.slide.carousel function in JQuery? Or is this because of a CSS issue?
I have 2 Bootstrap carousels here.
If you're in Chrome and shrink the screen down to a mobile view(under 500px), you'll see the slider under "Check out our latest real rides". If you click on the arrows it behaves really weird. It keeps sliding the first slide back to the active position. Even though the other items have the active class.
Here is my JS:
$('#slCarousel, #real-rides-mobile').carousel({
interval: 5000 });
I'm not sure what's going on exactly. You can view the source right in dev tools.
Any help is very much appreciated
Remove display:block; from #real-rides-mobile .item
The carousel is supposed to use that property.