Announcement

Collapse
No announcement yet.

Hero Slider stutters on load

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Hero Slider stutters on load

    The Hero Slider on this SFNT will stutter on loading - all the images display - then fall into place. What can be done to resolve it?
    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

  • Hi Leslie,

    Looks like you might have a JavaScript error on the page from Slick. This may be causing the stutter you are talking about. You can also set the section to visibility: hidden; and then after Slick loads, change it to visibility: visible;
    Matt Zimmermann
    Director of UI/UX Standards and Theme Development
    / Miva, Inc.

    Comment


    • Originally posted by Matt Zimmermann View Post
      Hi Leslie,

      Looks like you might have a JavaScript error on the page from Slick. This may be causing the stutter you are talking about. You can also set the section to visibility: hidden; and then after Slick loads, change it to visibility: visible;
      I fixed the JavaScript error - that didn't resolve it.

      I tried
      Code:
      .hero-slider {visibility: hidden;}
      .hero-slider.slick-initialized {visibility: visible; }
      that just results in a big jump white space before the image loads.
      Leslie Kirk
      Miva Certified Developer
      Miva Merchant Specialist since 1997
      Previously of Webs Your Way
      (aka Leslie Nord leslienord)

      Email me: [email protected]
      www.lesliekirk.com

      Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

      Comment


      • Hi Leslie,

        Since the script is taking time to load and initialize, that is why you see the white space. You can try modifying the classes you used to add some smoothness to the loading:
        Code:
        .hero-slider {
            opacity: 0;
            overflow: hidden;
            transition: opacity cubic-bezier(0, 0, 0.4, 1) 0.15s, visibility cubic-bezier(0, 0, 0.4, 1) 0.15s;
            visibility: hidden;
        }
        
        .hero-slider.slick-initialized {
            opacity: 1;
            overflow: auto;
            visibility: visible;
        }
        Matt Zimmermann
        Director of UI/UX Standards and Theme Development
        / Miva, Inc.

        Comment


        • That jumps too, seems a little slower.
          Leslie Kirk
          Miva Certified Developer
          Miva Merchant Specialist since 1997
          Previously of Webs Your Way
          (aka Leslie Nord leslienord)

          Email me: [email protected]
          www.lesliekirk.com

          Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

          Comment

          Working...
          X

          This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

          This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

          Accept