Announcement

Collapse
No announcement yet.

Text Hero Slider

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

    Text Hero Slider

    Is it possible to use the Hero Slider to rotate text banners instead of images?

    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,

    Should be able to.
    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
      I think I probably have some sort of CSS issue going one with my attempt. I can see the slides rotating (in the console), but I cannot see the text content itself. The site is behind a wall so I can't share
      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,

        I would start by using the inspector to see if the slides have width and height. Then I would check their visibility to make sure they are visible, not hidden, and have opacity.
        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
          Originally posted by Matt Zimmermann View Post
          Hi Leslie,

          I would start by using the inspector to see if the slides have width and height. Then I would check their visibility to make sure they are visible, not hidden, and have opacity.
          If I change the .x-carousel visibility to visible I can see everything just fine. Why would it be "stuck" to visibility:hidden;?
          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


            #6
            Hi Leslie,

            Since you are not using images, it looks like Roundabout has nothing to "pre-load" so the visibility is not changed. To get around that, add the class x-carousel--is-loaded to your x-carousel element and it should work.
            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


              #7
              Originally posted by Matt Zimmermann View Post
              Hi Leslie,

              Since you are not using images, it looks like Roundabout has nothing to "pre-load" so the visibility is not changed. To get around that, add the class x-carousel--is-loaded to your x-carousel element and it should work.
              And where would I find the element?

              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


                #8
                Navigate to ReadyTheme -> Content Sections
                Code:
                <section class="x-carousel" data-hook="hero-carousel">
                Would become
                Code:
                <section class="x-carousel x-carousel--is-loaded" data-hook="hero-carousel">
                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


                  #9
                  Originally posted by Matt Zimmermann View Post
                  Navigate to ReadyTheme -> Content Sections
                  Code:
                  <section class="x-carousel" data-hook="hero-carousel">
                  Would become
                  Code:
                  <section class="x-carousel x-carousel--is-loaded" data-hook="hero-carousel">
                  I was so close...I replaced it instead of adding it. I need to go back to Reading Comprehension 101. Thanks, Matt!
                  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