Announcement

Collapse
No announcement yet.

SFNT: Hero Image slide show

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

    #16
    Shoot, looks like I must have been asleep when I made the first post. The HTML for the ReadyTheme Content Section should look more like this:
    Code:
    <div id="js-hero-slider" class="hero-slider">
        <mvt:item name="readytheme" param="image( 'img_slide01' )"/>
        <mvt:item name="readytheme" param="image( 'img_slide02' )"/>
        <mvt:item name="readytheme" param="image( 'img_slide03' )"/>
        <mvt:item name="readytheme" param="image( 'img_slide04' )"/>
    </div>
    <!-- end hero-slider -->
    and the JavaScript like this:
    Code:
    $.ajax({
        cache: true,
        crossDomain: true,
        dataType: 'script',
        url: theme_path + '/js/jquery.slick.min.js'
    }).done(function () {
        // ---- Hero Slide Show ---- //
        $('#js-hero-slider').slick({
            arrows: false,
            autoplay: true,
            autoplaySpeed: 10000,
            dots: true,
            slide: '',
            responsive: [
                {
                    breakpoint: 960,
                    settings: {
                        dots: false
                    }
                }
            ]
        });
    });
    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


      #17
      Awesome! Works perfectly now.

      Comment


        #18
        Revisiting this - I've got the slider part working but the dots are messed up. There are numbers displaying to the bottom right of each dot with a white bar before each dot.


        Am I missing some CSS?
        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


          #19
          Hi Leslie,

          Are you able to post a site link?
          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


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

            Are you able to post a site link?
            I can DM the directory access to you if you like.
            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


              #21
              Hi Leslie,

              That would be fine.
              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


                #22
                Hi Leslie,

                It looks like your CSS might need some updating. On page 1 of this thread is some CSS for your theme.css file which should update the dots for you.
                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


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

                  It looks like your CSS might need some updating. On page 1 of this thread is some CSS for your theme.css file which should update the dots for you.
                  Does the CSS have to go into the theme.css file? I had already added it to the custom.css file. Is that why it's not working?

                  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


                    #24
                    Hi Leslie,

                    As long as that file is being called after all the core files, then it should be fine.
                    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


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

                      As long as that file is being called after all the core files, then it should be fine.
                      Therein lies the rub - the CSS is there. I can even inspect it and see that is there, but it's not working.
                      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


                        #26
                        Hi Leslie,

                        Try updating your custom css with this:
                        Code:
                        .hero-slider .slick-dots li button {
                            display: block;
                            width: 1rem;
                            height: 1rem;
                            padding: 0;
                            font-size: 0;
                            background-color: transparent;
                            border: 0 none;
                        }
                        
                        .hero-slider .slick-dots li button::before {
                            display: block;
                            width: 1rem;
                            height: 1rem;
                            line-height: 1;
                            background: transparent;
                            border: 1px solid #fff;
                            border-radius: 1rem;
                            opacity: 1;
                            content: '';
                        }
                        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


                          #27
                          Which lines does this replace or is it in addition to what is already there?

                          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


                            #28
                            Hi Leslie,

                            I believe those classes already exist in your file, so you should just be replacing them.
                            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


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

                              I believe those classes already exist in your file, so you should just be replacing them.
                              It's a little closer. I "think" it's to a point now that I "might" be able to fix it - thanks!
                              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