carousel captions following cursor

[spiralglue]

hello! i'm curious if anyone can help out with a line up code i'm sitting on.

i found this super helpful thread from a few years ago that documented having carousel slide captions follow the cursor as you hover over the carousel area. link

the only noticeable issue in this code is when the carousel autoplays, or the user clicks towards the prev/next slide without moving their cursor. the moving caption will not update its text to match the current slide until the cursor moves, due to the nature of the jQuery / function. i have it pasted below for reference. does anyone know what line of code can be adjusted here, so the currentCaption variable is also updated whenever the .is-selected carousel slide changes in the document? and not only when the mouse moves. link to the site - carousel / effect in 1st section

        jQuery(".lay-carousel-slide").hover(function(){
            var projectNumber = jQuery(".is-selected").data("project");
            var currentCaption = jQuery(".single-caption[data-project='"+projectNumber+"']").text();
            jQuery(".moving-caption").text(`● ${currentCaption}`);
        });

thank you to anyone looking!

[arminunruh]

jQuery(".lay-carousel-slide").on('hover mouseup', function(){
            var projectNumber = jQuery(".is-selected").data("project");
            var currentCaption = jQuery(".single-caption[data-project='"+projectNumber+"']").text();
            jQuery(".moving-caption").text(`● ${currentCaption}`);
        });

adding mouseup might solve this

does that work?

if not, does this work?:

jQuery(".lay-carousel-slide").on('hover mouseup', function(){
setTimeout(function(){
            var projectNumber = jQuery(".is-selected").data("project");
            var currentCaption = jQuery(".single-caption[data-project='"+projectNumber+"']").text();
            jQuery(".moving-caption").text(`● ${currentCaption}`);
}, 0);
        });

[spiralglue]

thank you armin.

i switched out 'hover' for 'mouseover' in your code, .on('hover') was buggy because the API for it was deprecated i think? 'mouseup' did the trick for when manually switching between slides with mouse clicks! unfortunately, my main issue here is how to listen for when the carousel autoplay advances to the next slide, since this is independent from mouse events. when you wait for the autoplay to switch slides, the caption still stays with the previous slide, until the mouse is moved.

[arminunruh]

<script>

window.laytheme.on("newpageshown", function(){
    setTimeout(function(){
        jQuery(".lay-carousel-wrap").each(function(){
            var $carousel = jQuery(this);
            (function($carousel){
                var myswiper = $carousel.data('myswiper');
                if(myswiper) {
                    myswiper.on('slideChangeTransitionEnd', function () {
                      console.log('slide changed');
                      // var ix = myswiper.activeIndex;
                      var $activeSlide = $carousel.find('.is-selected');
                      console.log($activeSlide)
// do your thing
                    });
                }
            })($carousel);
        })
    }, 2000)
});

</script>

[arminunruh]

maybe other events will be better for u / good reads:

https://swiperjs.com/swiper-api#events

https://stackoverflow.com/questions/32945099/how-to-detect-current-slide-in-swiper-js

https://stackoverflow.com/questions/592396/what-is-the-purpose-of-a-self-executing-function-in-javascript