🔗 Nested Carousel increase 'Slides on Display' max from 8

[awebguy99]

Prerequisites

• I have searched for similar feature requests in both open and closed discussions and cannot find an existing request.
• I have verified that the feature is still missing from the latest stable versions of Elementor or Elementor Pro.

What problem is your feature request going to solve? Please describe..

The Nested Carousel has a 'Slides on Display' max number of 8. I'm trying to use this to show a ecommerce stores main shop categories, which has 11, so the 8 limit prevents me from using the new Nested Carousel for this situation.

And I can't use the old Elementor Product Categories widget because of the lack of custom sorting.

Describe the solution you'd like.

Increase the 'Slides on Display' max number to something like 20 or allow us to enter a manual number.

Describe alternatives you've considered.

Creating multiple containers but then I'd lose the Carousel feature.

Additional context

No response

Agreement

• I agree that my request may be closed without action if it doesn't meet all the requirements.

[awebguy99]

Can someone please upvote this? Unless I'm missing a way to show more that 8 slides at once in a Nested Carousel?
The 8 limit is WAY too low.

[hitsgee]

Is this not in place for good performance and SEO? Querying say 20 nested slides would be a bit heavy on querying. Unless you have high performance hosting it's probably not worth it.

[awebguy99]

I understand your point but a lot of us digital agencies have powerful servers. And I really don't think querying 20 product categories is much. 8 is just not enough to display the top level product categories in a number of our stores.

[m1ga]

as a workaround you can edit nested-carousel.php and change the value of slides_on_display from 8 to 20. You just have to do it again when you update your Elementor.

[awebguy99]

Thanks very much for the suggestion. Even better, maybe someone has an idea on some PHP to override? I.E. Like your suggestion but some PHP we can add to Code Snippets (a plugin that allows code to be run).

[m1ga]

don't think that would work here as it is inside a protected regiter_controls function.

[awebguy99]

ok, thanks for the info. Unfortunately, it's not viable for us to keep re-editing that php file after every Elementor update. I guess we'll have to keep using a 3rd party plugin for category carousels for now.

Such a pity, Elementor almost got it right this time. ;)

[m1ga]

If you just care about the frontend you could just use JS as they've mentioned in the 2021 post: https://developers.elementor.com/expose-swiper-in-elementor/

Careful: the syntax changed a bit after that. The comments have better code. Something like this works for me:

var imageCarousel = jQuery (".swiper"),
swiperInstance = imageCarousel.data( "swiper" );
swiperInstance.params.slidesPerView = 10;
swiperInstance.update();

[awebguy99]

I'm surprised this 8 limit isn't affecting anyone else. Can I get some upvote love please, I'm just trying to improve Elementor. ;)

I probably didn't explain this well before.

Let's try this;
If I simply use the Product Categories widget, I can set the number of columns and number of categories displayed, to whatever I want (in Content>Layout>Columns & Categories Count).
See attached.

The 8 limit is way too low. Even just increasing it to something around 16 would be enough for a lot of ecommerce stores.

[m1ga]

I'm surprised this 8 limit isn't affecting anyone else.

no, because you can use the JS above to set it to be more or change any other swiper.js property (e.g. center slides etc.). It would be an easy fix in Elementor, they just need to switch to a number input field and it would be fixed. It's just that that part is in the Pro version so you can't make a PR for it.

[awebguy99]

I understand what you're saying (and thanks for contributing to the post) but using custom code isn't great for us, as they can break on Elementor/WordPress/plugin updates = unhappy clients.

All I'm asking for is, to be able to display the same number of items that their old Product Categories widget could display.

[m1ga]

it's swiperjs code so Elementor update shouldn't break that. Only if swiper.js will change and the last update to swiper took years 😄

[witty-code]

I have the same problem on my client's sales site, I wrote about it half a year ago:
https://github.com/orgs/elementor/discussions/22631

[awebguy99]

Thanks @witty-code . These Nested type widgets have so much potential to replace a whole host of other widgets. They just need to increase that limit.

Come on Elementor community, you can make a difference and improve this new widget and Elementor in general. Please upvote this Feature Request, so the developers will take notice (click the up arrow button that's in the first post, at the top of this page).

EDIT: Fixed some gramma.

[nicholaszein]

I've merged #22631 with this one, since this one contains only one request, as required in the Feature Request form.

[DownHouse]

This is just a limitation of the select element in the editor.
You can change the select value to anything, using developer tools. And it will work.

[DownHouse]

or you can add this code in functions.php also

add_action('elementor/editor/after_enqueue_scripts', function () {
    ?>
    <script>
    (function () {
        function extendSelect(select) {
            if (!select || select.dataset.extended) return;

            const values = [9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

            values.forEach(val => {
                if (!select.querySelector('option[value="' + val + '"]')) {
                    const option = document.createElement('option');
                    option.value = val;
                    option.textContent = val;
                    select.appendChild(option);
                }
            });

            select.dataset.extended = '1';
        }
        const observer = new MutationObserver(() => {
            document.querySelectorAll(
                'select[data-setting="slides_to_show"], select[data-setting="slides_to_scroll"]'
            ).forEach(extendSelect);
        });
        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    })();
    </script>
    <?php
});