Okay
  Public Ticket #3372886
carousel block does not work correctly
Closed

Comments

  •  1
    Dmitry started the conversation

    Hi! I noticed that the image carousel block does not work correctly, when the page first loads, it refuses to work, but if you reload the page, everything is fine. I think there is a problem with the coordinate calculations, because if I change the size of the window, the image block first jump to another location in accordance with the size of the browser window, and carousel after that starts to work fine even without reloading. Video attached

    Attached files:  222.mp4

  •  1,803
    Support replied

    Hi Dmitry,

    I have no problem using the carousel slider when coming from home page to this page

    https://j-e-r-k-y.com/tastes/biltong-african-style-beef-jerky/

    I can drag and scroll the slider normally

    https://prnt.sc/7WDWMOh77bAp

    But be careful how much dragging you do for the image you want to scroll. For example this much dragging

    https://prnt.sc/UWYZbpDuz-TU

    will snap the image back to its place because it did not go over half of the image

    Trying to figure out happens on your machine.

    What's your screen resolution you are testing with btw?

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  •  1
    Dmitry replied

    My screen resolution is 3440x1400, but I reduced the size of my browser when I recorded the video. In addition, I made a video recording from the iPhone screen, it shows that the problem also exists on the smartphone, and after I turn the screen, the carousel is reset and starts to work well.

    Interestingly, the same problem and on my other site (test version https://onegoa.ru/), if the main go to the first element of the portfolio (ELIRTEX), then I have the same problem, but on your site (http://clapat.ro/themes/colega-wordpress/) this problem does not exist.

    Testing on Windows, Google Chrome browser

    UPD: I tried the MacBook to open the site, the same problem if I'm go to the site for the first time, or open the browser in private mode

    Attached files:  IMG_8207.MP4

  •  1,803
    Support replied

    Hi,

    It looks that your slider init first and then load the images. Please try this:


    in scripts.js at Sliders() function, wrap the carousel into a wait for images function:

    $('body').waitForImages({
        finished: function() {
            
    //this is the original code
        
            var ContentCarouselOptions = {            
               direction: 'horizontal',
               simulateTouch: true,
               slidesPerView: 'auto',
               spaceBetween: 0,
               mousewheelControl: false,
               speed: 700,            
           }      
           
            var swiper = new Swiper(".content-carousel", ContentCarouselOptions);

    //Here is the end of the original code

                    
        },

        waitForAll: true
    });   


    Do the same for the content looped carousel


    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy