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

    #2
    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

    Miva Web Developer
    Alchemy Web Development
    https://www.alchemywebdev.com
    Site Development - Maintenance - Consultation

    Miva Certified Developer
    Miva Professional Developer

    https://www.dev4web.net | Twitter

    Comment


      #3
      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


        #4
        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

        Miva Web Developer
        Alchemy Web Development
        https://www.alchemywebdev.com
        Site Development - Maintenance - Consultation

        Miva Certified Developer
        Miva Professional Developer

        https://www.dev4web.net | Twitter

        Comment


          #5
          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