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

    #2
    Are you seeing any JavaScript errors and can you post a link to the site?
    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
      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


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

        Comment


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

          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


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


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

              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


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


                  #9
                  Have you added the content token to the SFNT page?
                  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


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


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


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

                        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


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


                            #14
                            Whoa. That wiped out my front page.

                            Comment


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

                              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

                              Working...
                              X