Turning Hero Image into a slider

[Rodney]

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:

<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

    $.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

    .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

[Matt Zimmermann]

Are you seeing any JavaScript errors and can you post a link to the site?

[Rodney]

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!

[Rodney]

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

[Matt Zimmermann]

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.

[Rodney]

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!

[Matt Zimmermann]

Try using this to update jsSFNT however you have access to it

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
                    }
                }
            ]
        });
    });
},

[Rodney]

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

[Matt Zimmermann]

Have you added the content token to the SFNT page?

[Rodney]

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?

[Rodney]

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.

[Matt Zimmermann]

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.

[Rodney]

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?

[Rodney]

Whoa. That wiped out my front page.

[Matt Zimmermann]

That is the correct tag. It should be inserted where you want to display the slider, among all the other code on the page.