We Keep Coding

Tailwind Carousel Component auto-scroll not working

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.

How to stop user input interrupting "ScrollIntoView" whilst in progress

Context
I am creating a site where there are sections stacked in rows, and each row takes up the full viewport.
I don't want the site to be scrollable normally, and would instead like the site to "snap" to the bottom of each section, so that I can then play out the animations taking up the full view port.
Issue
I took the approach of listening to scroll events, and then triggering a nextsection.ScrollIntoView when the user had scrolled far enough to snap to the next view.
This doesn't work well though, as the ScrollIntoView is interupted by user scroll activity, including the latent scrolling of the mouse that hangs around for about 300ms after you've scrolled.
I managed to get it sort of working by using a setTimeout(scrollIntoView(), 400), but this takes too much time and relies on the user not interacting with the site after scrolling.
I made a CodePen (here) showing the type of setup I'm working with, however to see the issue you need to open it as a webpage itself, as CodePen doesn't perform a smooth animation when using ScrollIntoView and just jumps there.
I need a smooth and uninterruptable animation as the site switches from one section to another, but as of yet I've found no working ways to implement this.
Thanks for any answers.

Replace div on scroll, abort scroll, jquery or javascript

I am after a similar effect to that found here https://waaark.com/works/ - when you scroll down out of the top section, further scrolling actually replaces what is in view and no further scrolling happens. I don't want as complex animations though a simple slide in from the side is what I am after. that site is WordPress, but my site will not be.
I have tried to at least crack the slide in, but a lot of examples I have looked at and tried do not work, or don't work with multiple images - i.e. slide them all at once and don't wait for the scroll, and only slid in the first time you scroll down - want it to work every time you scroll up and down.

You could use Fullpage.js - There are a few examples for different configurations and it is very easy to setup.

Need Scroller with both autoplay and manual scrolling functionality

I am looking for a scroller which auto scrolls to the end and stops and switches to manual navigation. I tried googling, there are thousands of scrollers but I need one with both autoplay and manual scroll functionality. Where user can also switch to manual scroll with a single click while it is auto scrolling, something like this.
But it must stop auto scrolling when it has reached end and then switch to manual scrolling.

jQuery Easy Slider 1.7 (Demo here) has both manual scrolling and automatic scrolling, which automatically turns off as soon as the user clicks on the slider. It's also really easy to customize and extend - and I've done so in a few past projects.
As for the autoscrolling to stop at the last slide, you could manually add the functionality using a timer that turns off autoscrolling after all the slides are done. Or you could play with it and just add an event that gets fired whenever the last slide is reached.
Edit:
Using SmoothDivScroll is even better, because it allows the user (you) to add a number of callbacks. So you can just turn off autosliding when the last slide is reached:
$("#makeMeScrollable").smoothDivScroll({
autoScrollingRightLimitReached: function(eventObj, data) {
$("#makeMeScrollable").smoothDivScroll("option","autoScrollingMode","");
}
});
Edit 2:
Sadly, it seems that callbacks not working are a known issue on their bugtracker. You could try and contact the creator of the script and see whether he's planning on fixing them.

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.