Tailwind Carousel Component auto-scroll not working - javascript

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.

Related

Loading animations triggers on scroll animation

I'm working on a one page website that has a loading animation similar to that one.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader5
It works great but it triggers also on scroll animation that don't works.
How can i fix it?
I'm using that library for on scroll animation
https://jjcosgrove.github.io/jquery-aniview/
here's a working example codepen.io/beer_baron/pen/qBBroRB

Slick slider should only show 4 slides. However part of a 5th slider is showing when it should not

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.

Multi Item Bootstrap 4 Carousel is not showing clean transition

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?

Cycle2 Next/Prev issues with AutoHeight

I am using Cycle2 in a site Im working on. It is a CMS and it is using jquery 1.6.4 which from the get go posed a problem - but got it taken care of with the .on/.bind hack to the cycle2 core. Unfortunately I cannot update jquery at the moment.
The slideshow is working fine after the hack - the Next and Prev buttons work as they should and the thumbnail navigation works fine as well.
The Issue:
Some of our images are taller than the rest and with the slideshow as is the taller images would get cut off at the bottom. So I integrated the data-cycle-auto-height="container" built in to Cycle2. Beautiful it works. I click on the taller image thumbnail and the image slideshow auto adjusts to the current image's height. BUT, now with the data-cycle-auto-height="container" height running, I can no longer use the Next/Prev buttons. They are clickable and the hover effect still works, but once clicked nothing happens. If I go ahead and remove the data-cycle-auto-height="container" from the slideshow div, they began to function again. I looked in the console and it is not throwing any additional errors - the only error I get in the console is Uncaught TypeError: $(...).on is not a function(…) which I was getting from the get-go, probably a jquery 1.6 and cycle2 compatibility issue still.
Here is the start of the slideshow div:
<div class="cycle-slideshow"
data-cycle-timeout="0"
data-cycle-manual-fx="fade"
data-cycle-pager="#no-template-pager"
data-cycle-prev="#tst-prod-prev"
data-cycle-next="#tst-prod-next"
data-cycle-loader="wait"
data-cycle-auto-height="container"
data-cycle-pager-template=""
data-cycle-tmpl-regex="\[\[((\.)?.*?)\]\]"
data-cycle-caption="#tst-custom-caption"
data-cycle-caption-template=[[title]] >
Any thoughts on what can be causing this issue?
Fixed it. Some more tweaks in the Cycle2 core - .on -> .bind. Again, this is a hack for jquery version before 1.7.

parallax.js automatically slide onload

I am using this jQuery plugin on a website: http://stolksdorf.github.com/Parallaxjs/
I am trying to achieve an effect where when a slide is navigated to, it automatically moves onto another slide once it has loaded - think of it as a transition slide.
For example:
parallax.transition.onload=function(){
parallax.citymid.show();
};
This code shows the city mid slide once the transition slide has loaded.
However:
parallax.transition.onload=function(){
parallax.citymid.bottom();
};
This does not make city mid slide in from the bottom as it would if it was called from a button.
Does anyone know whow I can make this work, or at least find a work around for it? I have contacted the developer of the plugin but to no avail.
Many thanks,
Oli
Using transition callbacks, everything works as it should.
parallax.pageB.right(function(){
parallax.pageC.right();
});
Call this bit of code while on pageA and it will slide in pageB from the right, and as soon as it's done it will slide in pageC. I've tested this and it works flawlessly.

Categories