How to limit the images in a smart carousel

This topic has 8 replies, 2 voices, and was last updated 1 day, 15 hours ago ago by Jack Richardson

  • Avatar: selqs
    selqs
    Participant
    March 30, 2026 at 22:24

    Hello,

    I am using the Image Effect smart carousel as a hover effect in the Elementor Products Grid widget. However, I want to limit the number of product images displayed there for example, it should not show more than 3 gallery images. Right now, it tries to load all images for products with many visuals, resulting in too many dots being displayed. How can I dynamically limit the maximum number of images?
    Also, because of this, when there are many products with many images, our loading speed decreases. Thank you.

    If there is no ready-made setting, how can I limit it with a function code?

    Files is visible for topic creator and
    support staff only.
    7 Answers
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    March 31, 2026 at 13:15

    Hello @selqs,

    You can use the following custom CSS snippet to limit the number of items to two:

    .hover-slider-images-toggler .hover-slider-toggle-pane:nth-child(3) ~ .hover-slider-toggle-pane,
    .hover-slider-indicator .hover-slider-indicator-dot:nth-child(3) ~ .hover-slider-indicator-dot {
        display: none;
    }

    Please note that you can adjust the number in the snippet, which is currently set to 3.

    Custom CSS documentation: https://www.8theme.com/documentation/xstore/additional-customisation/optimal-placement-for-custom-css-code/

    Best regards,
    Jack Richardson
    The 8Theme’s Team

    Avatar: selqs
    selqs
    Participant
    March 31, 2026 at 14:42

    Hello, @Jack-Richardson

    How reasonable is it to limit this with CSS? Because in the background, all images will be loaded when the page is opened, and this will negatively affect our speed. It seems more logical to limit it directly via settings or code. With CSS, we are only restricting the appearance, which doesn’t seem successful in terms of optimization.

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    March 31, 2026 at 15:22

    Hello @selqs,

    The additional images are not loading with the specified image effect because they are stored in a data attribute, which does not load any images until the corresponding pagination is activated by hovering. However, since you can only hover over the first few pagination dots (using the CSS snippet we provided), the remaining images will not be loaded or displayed.

    If you would like us to provide a PHP snippet implementation to set a limit on the PHP side and prevent additional images from being rendered, please provide us with temporary wp-admin access so that we can implement this solution on your website.

    Best regards,
    Jack Richardson
    The 8Theme’s Team

    Avatar: selqs
    selqs
    Participant
    March 31, 2026 at 20:44

    Hello, @Jack-Richardson
    I added the CSS code you suggested, but it didn’t work as described. The limitation itself works fine—it shows only 3 items—but when I check the source code and inspect it via the browser’s developer panel, I can still see that all the hidden images are being loaded in the DOM. Could you please create a limiting solution using PHP? I can share the details in a private message.
    I have removed the CSS code I added, just so you know.

    Content is visible for topic creator and
    support staff only.
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    April 1, 2026 at 05:59

    Hello @selqs,

    Thank you for providing us with the correct credentials.

    We have added the following custom snippet to your child-theme/functions.php file:

    add_filter('etheme_product_grid_list_product_attachments_limit', function() {  
        return 2; // 2 additional items + main image -> 3 items total max  
    });

    Additionally, we have made some modifications to the XStore Core plugin files to enable the implementation of such changes through the child theme code. These modifications will be included in the next theme update, ensuring that you will not lose them after updating.

    Best regards,
    Jack Richardson
    The 8Theme’s Team

    Avatar: selqs
    selqs
    Participant
    April 2, 2026 at 20:19

    Hello, thank you. This worked for me and runs nicely. I hope in the next update you introduce a built-in setting to permanently update the widget. Good work.

    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    April 3, 2026 at 06:49

    Hello @selqs,

    Thank you for your kind feedback.
    If you have any additional questions or concerns, please do not hesitate to reach out to us. Our support team is always available to assist you.

    Kind regards, Jack Richardson
    The 8theme’s team

  • Viewing 8 results - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.