Announcement

Collapse
No announcement yet.

Turning Hero Image into a slider

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

  • Turning Hero Image into a slider

    HI
    Looking for some guidance on turning the Hero Image within the Levels Ready Theme into a Slider. I have followed the instructions posted by Matt Zimmerman but I must be missing something.
    I have added the HTML Code to a ReadyTheme content:
    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 -->
    Then I added the html Code to the java script file
    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}}]
            });
        });
    Then added this html code to the theme.css file
    Code:
        .hero-slider {
            margin-bottom: 3rem;
            visibility: hidden;
        }
    
        .hero-slider.slick-initialized {
            visibility: visible;
        }
    
        .hero-slider img {
            width: 100vw;
        }
    
        .hero-slider .slick-dots {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 1rem;
            bottom: 2rem;
            left: 50%;
            line-height: 2;
            margin: 0;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
            width: 7rem;
        }
    
        .hero-slider .slick-dots li {
            margin: 0 0.25rem;
            vertical-align: middle;
            width: 1rem;
            height: 1rem;
        }
    
        .hero-slider .slick-dots li button {
            width: 1rem;
            height: 1rem;
            padding: 0;
        }
    
        .hero-slider .slick-dots li button::before {
            line-height: 1;
            width: 1rem;
            height: 1rem;
            content: '';
            opacity: 1;
            background: transparent;
            border: 1px solid #fff;
            border-radius: 1rem;
        }
    
        .slick-dots li.slick-active button:before {
            background: #fff;
            color: transparent;
            opacity: 1;
        }
    Also created 4 images as img_slide01, 02,03 and 04 in the image tabs within the Ready Theme Image Tab. Any ideas as to what I am missing? Seems like it should be working but it is not. Any help would be so appreciated. Thank you Tammy
    Last edited by Matt Zimmermann; 03-19-19, 07:34 AM. Reason: formatting

  • Are you seeing any JavaScript errors and can you post a link to the site?
    Matt Zimmermann
    Director of UI/UX Standards and Theme Development
    / Miva, Inc.

    Comment


    • HI Matt
      Yes I do get an error when I try and access the js.script file via filezilla but I can access it through Javasript Resources with on problems. Just not sure if they are the same. I have attached a link to the dev site. It just seems I have everything in place with what you have posted, I have to be so close to having in ready. Any help would be so appreciated, Thank you!
      Horsenriders has been around since 1998 and is an online horse tack store specializing in both English and Western horse equipment, including Western and English saddles, bridles, bits, saddle pads, horse blankets, harnesses and even Rustic Home Decor. We carry thousands of items for your horse from many of the Top Brands including Tough 1, Billy Royal, Silver Royal, Royal King, Showman, Weatherbeeta, Wintec, Abetta, Classic Equine, Professional Choice, Dura Tech, Dublin, Big Horn, Back on Track, Mayatex and more. Be sure to check out our weekly specials, featuring high quality horse supplies and discounted pricing.

      Comment


      • Matt I would be able to provide screenshots and more details if that would help.

        Comment


        • It looks like you are missing a closing tag for the jsSFNT function in your scripts.js file. Once you add that, the JavaScript error should go away.
          Matt Zimmermann
          Director of UI/UX Standards and Theme Development
          / Miva, Inc.

          Comment


          • HI Matt
            Here are 2 screenshots. One if the error I am getting when I try and access this script.js file via the httpdocs > Merchant5 > themes/levels > js > scripts.js. using filezilla. The second in the code that I droppsed in via JavaScript in the User Interface.
            Thank You!

            Attached Files

            Comment


            • Try using this to update jsSFNT however you have access to it
              Code:
              jsSFNT: function () {
                  // ---- Product Carousel ---- //
                  cornerstoneUX.sharedFunctions.productsCarousels('#js-whats-popular-carousel');
              
                  // ---- Open Quick View ---- //
                  cornerstoneUX.sharedFunctions.openQuickView();
              
                  function minFeaturedProductsHeight() {
                      var minHeight = $('#js-featured-products-height').outerHeight();
                      $('.js-featured-products-height-min').css('min-height', minHeight);
                  }
              
                  minFeaturedProductsHeight();
                  $(window).on('resize', minFeaturedProductsHeight);
              
                  $.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: true,
                          autoplay: true,
                          autoplaySpeed: 10000,
                          dots: true,
                          slide: '',
                          responsive: [
                              {
                                  breakpoint: 960,
                                  settings: {
                                      dots: false
                                  }
                              }
                          ]
                      });
                  });
              },
              Matt Zimmermann
              Director of UI/UX Standards and Theme Development
              / Miva, Inc.

              Comment


              • HI Matt
                Ok I have updated the code. The slider does not appear. Would it help if I provided screenshots of my Content Section?

                Comment


                • Have you added the content token to the SFNT page?
                  Matt Zimmermann
                  Director of UI/UX Standards and Theme Development
                  / Miva, Inc.

                  Comment


                  • HI Matt
                    Here are screenshots of the Content Section for the Hero Slider and Also the Images that are to be used in the slider. Do you see anything there that I might have done incorrectly?
                    Attached Files

                    Comment


                    • Please see attachment, very bottom one. Is that what you are referring to? Also sent an attachment with that Content Section opened in previous message.
                      Attached Files

                      Comment


                      • When you edit the content section, below the code, you will see the item tag you will need to insert into the SFNT page where you would like the content to show.
                        Matt Zimmermann
                        Director of UI/UX Standards and Theme Development
                        / Miva, Inc.

                        Comment


                        • HI Matt
                          Ok so this item tag Item Tag: <mvt:item name="readytheme" param="contentsection( 'hero_slider' )" /> I have attached a screenshot. Is that correct?
                          Attached Files

                          Comment


                          • Whoa. That wiped out my front page.

                            Comment


                            • That is the correct tag. It should be inserted where you want to display the slider, among all the other code on the page.
                              Matt Zimmermann
                              Director of UI/UX Standards and Theme Development
                              / Miva, Inc.

                              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