Hide Arrows on first and last slide

Hi @kintianua,

Hope you’re doing well today ??

Actually, there’s no direct way to do that, but here’s a custom JS code to achieve that. You can add that using Elementor HTML widget. Please make sure to add the widget below your carousel widget.

<script>

setTimeout(function() {
    
    const $carousel = jQuery('.premium-carousel-inner');
    const $prevArrow = jQuery(".premium-carousel-inner>.carousel-prev");
    const $nextArrow = jQuery(".premium-carousel-inner>.carousel-next");
    
    if( $prevArrow.length ) {
        $prevArrow.hide();    
    } else {
        $carousel.on('init', function( event, slick, currentSlide, nextSlide) {
            $prevArrow.hide();
        });    
    }
    
    $carousel.on('afterChange', function( event, slick, currentSlide, nextSlide) {
        
        let activeSlide = $carousel.find('.slick-slide.slick-current.slick-active').attr('data-slick-index');
        
        let totalSlides = $carousel.slick("getSlick").slideCount;
        
        if( activeSlide == 0 ) {
            
            $prevArrow.hide();
            
        } else if( activeSlide == ( totalSlides - 1 ) ) {
            
            $nextArrow.hide();
            
        } else {
            
            $prevArrow.show();
            $nextArrow.show();
            
        }
    });
    
}, 500 );
</script>

Regards.

@leap13support Works perfectly, thanks a lot!!!

Hi @kintianua,

Great, I’m so glad that everything is working just fine with you now.

If you have any farther questions, please don’t hesitate to feed me back anytime?
It would be great if you could please do us a BIG favor by rating Premium Addons for Elementor on our WordPress?page.
Regards

Regards

Hi @leap13support,
I just realized the following:
I have two carousels on the same page and the script seems to “confuse” these two. How can I assign each script to one specific carousel?
Thanks so much and sure I will rate the plugin, awesome support.

Hi @kintianua,

Hope you’re doing well today ??

In this case, we will need to replace the code above with this:

<script>
    (function ($) {
        var PremiumCarouselHandler = function ($scope, $) {
            const $carousel = $scope.find('.premium-carousel-inner');
                let $prevArrow = null,
                $nextArrow = null;
                $carousel.on('init', function( event, slick, currentSlide, nextSlide) {
                     $prevArrow = $scope.find(".premium-carousel-inner .carousel-prev");
                    $nextArrow = $scope.find(".premium-carousel-inner .carousel-next");
                    $prevArrow.hide();
                });
            $carousel.on('afterChange', function( event, slick, currentSlide, nextSlide) {
                let activeSlide = $carousel.find('.slick-slide.slick-current.slick-active').attr('data-slick-index');
                let totalSlides = $carousel.slick("getSlick").slideCount;
                if( activeSlide == 0 ) {
                    $prevArrow.hide();
                } else if( activeSlide == ( totalSlides - 1 ) ) {
                    $nextArrow.hide();
                } else {
                    $prevArrow.show();
                    $nextArrow.show();
                }
            });
        };
        jQuery(window).on("elementor/frontend/init", function () {
            elementorFrontend.hooks.addAction("frontend/element_ready/premium-carousel-widget.default", PremiumCarouselHandler);
        });
    })(jQuery);
</script>

Regards.

• This reply was modified 4 years, 7 months ago by leap13support.

@leap13support Wow awesome! Thank you so much!

@kintianua You’re most welcome anytime. Glad to hear that everything is now working fine on your end ??

It would be greatly appreciated if you could rate us on our page from here. This would make a huge difference ??

Cheers!