How to disable the automatic swipe effect on the product page?

Question

Read a Book 88 Light Poster

10 Months Ago

Hello everyone i want to disable the automatic swipe effect on my product page on this site https://kupisi.mk
the lib is called lightgallery i am not able to find the line of code to turn it off for 2 days i need fresh pair of eyes !! :S

i made the link accessible for the libraries i use on the site
https://kupisi.mk/vendor/

the theme is called Mooncart and their customer support is non-existent i am trying to reach them for 1 week via messanger, phone, email ... but they never reply back .. I NEED HELP!! :S

html-css javascript

4 Contributors
12 Replies
235 Views
2 Months Discussion Span
Latest Post 7 Months Ago Latest Post by Dani

Dani 4,329 The Queen of DaniWeb

9 Months Ago

Hello there! I can try my best to help you as I'm pretty good with this kind of thing. However, I'm a bit confused what you're referring to. I'm on your website's homepage, and I don't know what swipe effect you're referring to? I'm on a macOS laptop using Chrome.

rproffitt commented: I see a carousel effect. Might be in CSS but I haven't dug into their site. +17

kimnancy 0 Newbie Poster

8 Months Ago

I recommend checking the lightgallery documentation or reaching out to their support forum for assistance with disabling the automatic swipe effect on your product page. It might provide you with specific guidance on the code modification you're looking for.

Dani 4,329 The Queen of DaniWeb

7 Months Ago

Hello,

Google Search Console is showing that vidceo is not the main content of the page, because I don't see any video on this page? I don't see how not having the carousel loop by default will change that?

Or are you referring to the other products at the bottom of the page that are rotating through as well?

Either way, I'm not seeing video anywhere on the page?

Can you provide a URL with an example of a product that has video, so I can see why you think Google is not prioritizing it?

As far as your carousel is concerned, I see a link to the javascript file https://www.kupisi.mk/js/dz.carousel.js at the bottom of the page. When I look at this MoonCartCarousel, I see that it is just the theme making calls to a jQuery class called Swiper and telling Swiper to set autoplay with various delays of 1500-2000 milliseconds. So then I looked at swiperjs.com and I can see here in the API docs that simply removing the autoplay: { } parameter will completely disable autoplay. You can make some other tweaks as well.

dz.carousel.js currently looks like this (I passed it through a JS beautifier to format the code):

var MoonCartCarousel = function() {
    var handleMainSwiper = function() {
        if (jQuery('.main-swiper').length > 0) {
            var swiper = new Swiper(".main-swiper-thumb", {
                loop: true,
                spaceBetween: 10,
                freeMode: true,
                watchSlidesProgress: true,
                autoplay: {
                    delay: 1500,
                },
            });
            var swiper2 = new Swiper(".main-swiper", {
                loop: true,
                effect: "fade",
                speed: 1000,
                parallax: true,
                autoplay: {
                    delay: 1500,
                },
                pagination: {
                    el: ".swiper-pagination-five",
                    clickable: true,
                    renderBullet: function(index, className) {
                        return '<span class="' + className + '">' + 0 + (index + 1) + "</span>";
                    },
                },
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });
        }
    }
    var handlekanbernSwiper = function() {
        if (jQuery('.kanbern-bnr').length > 0) {
            var swiperTestimonial = new Swiper('.kanbern-bnr', {
                loop: true,
                spaceBetween: 10,
                slidesPerView: "auto",
                effect: "fade",
                parallax: true,
                speed: 1500,
                autoplay: {
                    delay: 2000,
                },
            });
        }
    }
    var BlogSlideshowSwiper = function() {
        if (jQuery('.blog-slideshow').length > 0) {
            var swiperTestimonial = new Swiper('.blog-slideshow', {
                loop: true,
                spaceBetween: 0,
                slidesPerView: "auto",
                speed: 1500,
                autoplay: {
                    delay: 2000,
                },
                pagination: {
                    el: ".swiper-pagination-two",
                    clickable: true,
                },
            });
        }
    }
    var handleProjectCarousel = function() {
        if (jQuery('.project-carousel').length > 0) {
            var swiperBook = new Swiper('.project-carousel', {
                loop: true,
                centeredSlides: true,
                spaceBetween: 30,
                slidesPerView: 1.5,
                autoplay: {
                    delay: 4000,
                },
                navigation: {
                    nextEl: ".portfolio-button-next",
                    prevEl: ".portfolio-button-prev",
                },
                breakpoints: {
                    300: {
                        slidesPerView: 1,
                    },
                    600: {
                        slidesPerView: 1,
                    },
                    767: {
                        slidesPerView: 2,
                    },
                    991: {
                        slidesPerView: 1.5,
                    },
                    1600: {
                        slidesPerView: 1.5,
                    },
                }
            });
        }
    }
    var handleSwiperFour = function() {
        if (jQuery('.swiper-four').length > 0) {
            var swiper = new Swiper('.swiper-four', {
                slidesPerView: 4,
                spaceBetween: 30,
                loop: true,
                autoplay: {
                    delay: 2500,
                },
                navigation: {
                    nextEl: ".tranding-button-next",
                    prevEl: ".tranding-button-prev",
                },
                breakpoints: {
                    1200: {
                        slidesPerView: 4,
                    },
                    1024: {
                        slidesPerView: 4,
                    },
                    991: {
                        slidesPerView: 3,
                    },
                    591: {
                        slidesPerView: 2,
                        spaceBetween: 20,
                    },
                    340: {
                        slidesPerView: 2,
                        spaceBetween: 15,
                    },
                }
            });
        }
    }
    var handleSwiperFive = function() {
        if (jQuery('.swiper-five').length > 0) {
            var swiper = new Swiper('.swiper-five', {
                slidesPerView: 1,
                spaceBetween: 20,
                loop: true,
                autoplay: {
                    delay: 2500,
                },
                pagination: {
                    el: ".swiper-pagination-two",
                    clickable: true,
                },
                navigation: {
                    nextEl: ".about-button-next",
                    prevEl: ".about-button-prev",
                },
                breakpoints: {
                    1600: {
                        slidesPerView: 1,
                    },
                }
            });
        }
    }
    var handleSwiperBlogPost = function() {
        if (jQuery('.swiper-blog-post').length > 0) {
            var swiper = new Swiper('.swiper-blog-post', {
                slidesPerView: 3,
                spaceBetween: 30,
                loop: true,
                pagination: {
                    el: ".swiper-pagination-trading",
                },
                autoplay: {
                    delay: 2000,
                },
                breakpoints: {
                    1200: {
                        slidesPerView: 3,
                    },
                    1024: {
                        slidesPerView: 3,
                    },
                    991: {
                        slidesPerView: 2,
                    },
                    767: {
                        slidesPerView: 1.5,
                        spaceBetween: 15,
                        centeredSlides: true,
                    },
                    575: {
                        slidesPerView: 1.5,
                        spaceBetween: 15,
                        centeredSlides: true,
                    },
                    300: {
                        slidesPerView: 1.2,
                        spaceBetween: 15,
                    },
                }
            });
        }
    }
    var handleCategorySwiper = function() {
        if (jQuery('.category-swiper').length > 0) {
            var swiper = new Swiper('.category-swiper', {
                slidesPerView: 7,
                centeredSlides: false,
                spaceBetween: 20,
                loop: true,
                pagination: {
                    el: ".swiper-pagination-two",
                },
                autoplay: {
                    delay: 3000,
                },
                navigation: {
                    nextEl: ".tranding-button-next",
                    prevEl: ".tranding-button-prev",
                },
                breakpoints: {
                    1600: {
                        slidesPerView: 7,
                    },
                    1200: {
                        slidesPerView: 5,
                    },
                    991: {
                        slidesPerView: 4,
                    },
                    591: {
                        slidesPerView: 3,
                    },
                    320: {
                        slidesPerView: 2,
                        spaceBetween: 15,
                    },
                }
            });
        }
    }
    var handleCategorySwiper2 = function() {
        if (jQuery('.category-swiper2').length > 0) {
            var swiper = new Swiper('.category-swiper2', {
                slidesPerView: 6,
                centeredSlides: false,
                spaceBetween: 20,
                loop: true,
                autoplay: {
                    delay: 3000,
                },
                navigation: {
                    nextEl: ".tranding-button-next",
                    prevEl: ".tranding-button-prev",
                },
                breakpoints: {
                    1600: {
                        slidesPerView: 6,
                        spaceBetween: 40,
                    },
                    1200: {
                        slidesPerView: 6,
                        spaceBetween: 20,
                    },
                    991: {
                        slidesPerView: 4,
                        spaceBetween: 20,
                    },
                    575: {
                        slidesPerView: 3,
                        spaceBetween: 15,
                    },
                    320: {
                        slidesPerView: 2,
                        spaceBetween: 15,
                    },
                }
            });
        }
    }
    var handleSwiperProduct = function() {
        if (jQuery('.swiper-product').length > 0) {
            var swiper = new Swiper('.swiper-product', {
                slidesPerView: 4,
                spaceBetween: 15,
                loop: true,
                pagination: {
                    el: ".swiper-pagination-trading",
                },
                autoplay: {
                    delay: 2000,
                },
                breakpoints: {
                    1200: {
                        slidesPerView: 4,
                    },
                    991: {
                        slidesPerView: 3,
                    },
                    767: {
                        slidesPerView: 2,
                    },
                    575: {
                        slidesPerView: 1.5,
                    },
                    340: {
                        slidesPerView: 1,
                        centeredSlides: true,
                    },
                }
            });
        }
    }
    var ProductGallerySwiper1 = function() {
        if (jQuery('.product-gallery-swiper').length > 0) {
            var swiper = new Swiper(".product-gallery-swiper", {
                spaceBetween: 15,
                slidesPerView: 4,
                freeMode: true,
                watchSlidesProgress: true,
                pagination: {
                    el: ".swiper-pagination-trading",
                },
            });
            var swiper2 = new Swiper(".product-gallery-swiper2", {
                spaceBetween: 0,
                updateOnWindowResize: true,
                autoplay: {
                    delay: 1500,
                },
                navigation: {
                    nextEl: ".gallery-button-next",
                    prevEl: ".gallery-button-prev",
                },
                thumbs: {
                    swiper: swiper,
                },
            });
        }
    }
    var handleQuickModal = function() {
        if (jQuery('.quick-modal-swiper').length > 0) {
            var swiper = new Swiper(".quick-modal-swiper", {
                spaceBetween: 15,
                slidesPerView: 4,
                freeMode: true,
                watchSlidesProgress: true,
            });
            var swiper2 = new Swiper(".quick-modal-swiper2", {
                spaceBetween: 0,
                updateOnWindowResize: true,
                navigation: {
                    nextEl: ".gallery-button-next",
                    prevEl: ".gallery-button-prev",
                },
                thumbs: {
                    swiper: swiper,
                },
            });
        }
    }
    var handleProductGallery = function() {
        if (jQuery('.product-gallery').length > 0) {
            var swiper = new Swiper(".product-thumb", {
                slidesPerView: "2",
                spaceBetween: 0,
                grid: {
                    rows: 2,
                },
                autoplay: {
                    delay: 1500,
                },
                pagination: {
                    el: ".product-swiper-pagination",
                    clickable: true,
                    renderBullet: function(index, className) {
                        return '<span class="' + className + '">0' + (index + 1) + "</span>";
                    },
                },
                breakpoints: {
                    576: {
                        slidesPerView: 2,
                    },
                    300: {
                        slidesPerView: 1,
                    },
                }
            });
            var swiper2 = new Swiper(".product-gallery", {
                slidesPerView: "1",
                thumbs: {
                    swiper: swiper,
                },
            });
        }
    }
    var handlePortfolioGallery = function() {
        if (jQuery('.portfolio-gallery').length > 0) {
            var swiper = new Swiper(".portfolio-thumb", {
                slidesPerView: "auto",
                spaceBetween: 0,
            });
            var swiper2 = new Swiper(".portfolio-gallery", {
                slidesPerView: "1",
                thumbs: {
                    swiper: swiper,
                },
            });
        }
    }
    var handlePortfolioGallery2 = function() {
        if (jQuery('.portfolio-gallery2').length > 0) {
            var swiper = new Swiper('.portfolio-gallery2', {
                slidesPerView: "auto",
                spaceBetween: 30,
                loop: true,
                autoplay: {
                    delay: 2500,
                },
                pagination: {
                    el: ".swiper-pagination-two",
                },
                navigation: {
                    nextEl: ".portfolio-button-next",
                    prevEl: ".portfolio-button-prev",
                },
                breakpoints: {
                    1200: {
                        slidesPerView: "auto",
                    },
                    576: {
                        slidesPerView: "auto",
                    },
                    300: {
                        slidesPerView: 1,
                    },
                }
            });
        }
    }
    var handlePortfolioGallery3 = function() {
        if (jQuery('.portfolio-gallery3').length > 0) {
            var swiper = new Swiper('.portfolio-gallery3', {
                slidesPerView: 3,
                spaceBetween: 30,
                loop: true,
                autoplay: {
                    delay: 2500,
                },
                pagination: {
                    el: ".swiper-pagination-two",
                },
                navigation: {
                    nextEl: ".portfolio-button-next",
                    prevEl: ".portfolio-button-prev",
                },
                breakpoints: {
                    1200: {
                        slidesPerView: 3,
                    },
                    768: {
                        slidesPerView: 2,
                    },
                    600: {
                        slidesPerView: 2,
                        spaceBetween: 15,
                    },
                    300: {
                        slidesPerView: 1,
                        spaceBetween: 15,
                    },
                }
            });
        }
    }
    var handleSplitSwiper = function() {
        if (jQuery('.spilt-swiper-slider').length > 0) {
            var spiltSwiper = new Swiper('.spilt-swiper-slider', {
                direction: "vertical",
                loop: true,
                slidesPerView: 1,
                mousewheel: true,
                paginationClickable: true,
                autoplay: {
                    delay: 1500,
                },
                pagination: {
                    el: ".swiper-pagination-two",
                },
                grabCursor: true,
                speed: 1000,
                parallax: true,
                effect: "slide",
                mousewheelControl: 1,
            });
        }
    }
    return {
        init: function() {},
        load: function() {
            handleMainSwiper();
            handlekanbernSwiper();
            BlogSlideshowSwiper();
            handleProjectCarousel();
            handleSwiperFour();
            handleSwiperFive();
            handleSwiperBlogPost();
            handleCategorySwiper();
            handleCategorySwiper2();
            handleSwiperProduct();
            ProductGallerySwiper1();
            handleProductGallery();
            handlePortfolioGallery();
            handlePortfolioGallery2();
            handlePortfolioGallery3();
            handleSplitSwiper();
            handleQuickModal();
        },
        resize: function() {
            ProductGallerySwiper1();
        }
    }
}();
jQuery(document).ready(function() {
    'use strict';
    MoonCartCarousel.init();
});
jQuery(window).on('load', function() {
    'use strict';
    MoonCartCarousel.load();
});
jQuery(window).on('resize', function() {
    'use strict';
    MoonCartCarousel.resize();
});

What we need to do is figure out which code block has to do with the specific product page, and disable autoplay in that section. When I look at the HTML code, I'm seeing the product carousel on that page is wrapped in a class called product-gallery-swiper2. Therefore, we simply need to adjust this section of the HTML code to look like this instead:

            var swiper2 = new Swiper(".product-gallery-swiper2", {
                spaceBetween: 0,
                updateOnWindowResize: true,
                navigation: {
                    nextEl: ".gallery-button-next",
                    prevEl: ".gallery-button-prev",
                },
                thumbs: {
                    swiper: swiper,
                },
            });

Notice I just removed this part:

            autoplay: {
                delay: 1500,
            },

And that should do the trick!

Good luck :)

Edited 7 Months Ago by Dani

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

I see a carousel effect. Might be in CSS but I haven't dug into their site.

Read a Book 88 Light Poster · Answer 1 · 2024-01-25T11:43:58+00:00

I am sorry i am a little bit late to reply but i still didnt manage to fix the problem.
Here is the product page https://kupisi.mk/product/%D0%B7%D0%B0-%D0%B4%D0%BE%D0%BC%D0%B0/%D1%83%D0%BD%D0%B8%D0%B2%D0%B5%D1%80%D0%B7%D0%B0%D0%BB%D0%BD%D0%BE-%D0%BF%D0%B0%D0%BC%D0%B5%D1%82%D0%BD%D0%BE-%D0%B4%D0%B0%D0%BB%D0%B5%D1%87%D0%B8%D0%BD%D1%81%D0%BA%D0%BE/18

When you enter in the page the images start to scroll automatically... i need that turned off because of SEO problems. I want only the user to swipe the images manually.

Read a Book 88 Light Poster · Answer 2 · 2024-01-27T11:24:26+00:00

Please if someone have the knowledge or used this theme before help me i have searched the files many times and i am not able to find that variable to turn it OFF :S

Read a Book 88 Light Poster · Answer 3 · 2024-02-22T17:19:48+00:00

Read a Book 88 Light Poster

8 Months Ago

Anyone can help on this problem?

Read a Book 88 Light Poster · Answer 4 · 2024-03-19T12:26:12+00:00

@kimnancy

I tried contacting them for over 2 weeks... Their customer support is non existent
P.S i still have the same problem... i still cannot disable the auto swiping effect...
Tried to learn the lightgallery docs. but cant find relevant info

rproffitt 2,662 "Nothing to see here." Moderator · Answer 5 · 2024-03-19T15:59:35+00:00

This is not an offer of edits or support.

slideDelay at https://www.lightgalleryjs.com/docs/settings/ looks like something I'd look to add or change.
Sometimes website owners don't code so they end up a little frustrated.

Read a Book 88 Light Poster · Answer 6 · 2024-03-19T20:14:32+00:00

I saw that the slideDelay is already set to 0. I uploaded the full code from the file lightgallery.min.js
here is the pastebin link to it
https://pastebin.com/v4qKbwVd

https://www.kupisi.mk/vendor/lightgallery/lightgallery.min.js

There are three files in the lightgallery folder
lightgallery.min.js
lightgallery.umd.js
lightgallery.es5.js

Please take a look and tell me if i am wrong

Read a Book 88 Light Poster · Answer 7 · 2024-03-21T08:32:54+00:00

@rproffitt

I tried it with various higher numbers than 0 and it did no helped...

How can this be so big problem i don't understand :/

The products with videos in them are hurting my SEO...

That tells us that the object is not a slide/carousel or wrong object. Why not use a static image instead?

Read a Book 88 Light Poster · Answer 8 · 2024-03-22T10:34:20+00:00

WOW finally solved! Thank you so much DANI !!
Removing the autoplay from the // Product Gallery Swiper1 == solved the problem!

Thank you so much!

Here is a product page with a video
https://www.kupisi.mk/product/за-дома/глава-за-туш-со-филтер-за-прочистување-вода/41

Dani 4,329 The Queen of DaniWeb Administrator Featured Poster Premium Member · Answer 9 · 2024-03-22T17:05:12+00:00

Glad you were able to get it working.

I am seeing the product page with a video you're referring to. The video does not autoplay. Are you wanting the video to autoplay? (I don't think it should. It's a bad user experience.) Is Google not considering these pages as having video content?