Image Carousel Displaying Wrong Images, Navigation Buttons Non-Functional

  • Resolved pgabrielandrei

    (@pgabrielandrei)


    5 years, 6 months ago

    We have recently updated to the latest version of Elementor (Version 2.7.1).

    After adding 24 small PNG images to an image carousel on our home page (183×144, only 40kb in total), the desktop browser is displaying only the first 5, which are stuck, are not sliding (as they previously used to), and the arrows and dots have no functionality (do not slide the carousel when clicked). This is occurring on multiple browsers (Opera, Edge, Chrome).

    The most salient issue is when accessing the website using a mobile browser (Opera/Safari Mobile): none of the images uploaded to the carousel are being displayed. Instead, a completely random image hosted on the website is being displayed and is covering the rest of the carousel buttons (the arrows and the dots).

    The carousel has the following settings:
    Desktop: set to show 5 images per slide and scroll 1 image per slide
    Tablet: set to show 3 images per slide and scroll the default number of images (1) per slide
    Mobile: set to show 2 images per slide and scroll the default number of images (1) per slide

    Additional Options (default, unchanged)

    Operating systems used: Windows 10, Android, iOS
    Browsers used: Opera Desktop, Microsoft Edge, Google Chrome, Opera Mobile, Opera Mini, Opera Touch, Safari Mobile.
    Website cache has been deleted using Autoptimize.

    The page I need help with: [log in to see the link]

Viewing 12 replies - 1 through 12 (of 12 total)

  • The problem is still relevant.
    My operating System: Windows 7
    Browser: Opera Desktop
    Everything worked fine before update.

    Hi,

    A patch version (2.7.1) came out that should take care of this issue.
    Could you upgrade Elementor to 2.7.1 and let us know if the problem persists?

    Thread Starter pgabrielandrei

    (@pgabrielandrei)

    udidol (@udidol)
    2 hours, 26 minutes ago
    Hi,

    A patch version (2.7.1) came out that should take care of this issue.
    Could you upgrade Elementor to 2.7.1 and let us know if the problem persists?

    Hi @udidol,

    Please refer to the first sentence of the initial post:

    We have recently updated to the latest version of Elementor (Version 2.7.1).

    There are currently no other updates available for the Elementor plugin (none that appear on the WordPress update-core dashboard).

    My apologies, I missed that first bit.

    I looked into your page’s source code – it seems you have some plugin on your site which manipulates the DOM around images (adds a noscript tag containing the image tag before each image tag in your site). My guess is a lazy-load plugin. This manipulation happens inside the gallery images as well, and it messes with the gallery, preventing the gallery script from working properly. If you have such a plugin, try disabling it and see if that fixes the problem.

    @pgabrielandrei Looks like Autoptimize’s lazyload, you can exclude images from being lazyloaded by adding any attribute/ value from the image tag to the comma-separated lazyload exclusion list.

    @udidol any tips for what to use as exclude flag for Elementors gallery? ??

    hope this helps,
    frank (ao dev)

    @optimizingmatters
    The class name attached to the image tags in the Image Carousel widget is ‘.swiper-slide-image’.

    Try excluding this class and let us know if that solved your problem.

    @pgabrielandrei can you indeed try adding swiper-slide-image (so without the dot) to the lazyload exclusion list?

    Thread Starter pgabrielandrei

    (@pgabrielandrei)

    @optimizingmatters
    @udidol
    Thanks a lot for your replies.

    I tried excluding the swiper-slide-image class, as well as the elementor-widget-container from the Autoptimize Lazy-load Image Settings and waited a few days for the changes to take effect, after clearing the cache. It does not seem to have solved the issue (unless I have used the wrong format for the exclusions).

    I doubt the problem is Autoptimize, as the Lazy-load image option was enabled since setting up the website and there were no issues until the recent Elementor update…

    unless I have used the wrong format for the exclusions

    that is the case @pgabrielandrei ; instead of class="xyz" you should just add xyz, so just swiper-slide-image, elementor-widget-container would be the right way (not sure if the container one matters, as AO only honors attributes of the img tag, not of tags higher up the DOM that contain the img tag).

    Thread Starter pgabrielandrei

    (@pgabrielandrei)

    Thanks for that @optimizingmatters
    I just added swiper-slide-image, but it still has not resolved the issue.

    OK, I had a look at the HTML source and can confirm the swiper slide images are not lazyload any more, meaning e.g. the <noscript tags aren’t added for those any more, so back to @udidol ??

    It seems like a clash with another plugin.
    Try to disable all plugins except Elementor/Elementor Pro and check if this problem persists.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Image Carousel Displaying Wrong Images, Navigation Buttons Non-Functional’ is closed to new replies.