SFNT: Hero Image slide show

[lesliekirk]

I seem to be having some issues getting the slideshow to function in the Levels ReadyTheme Version 1.0.1 (Includes 9.0005 Template Changes). I was thinking it was just supposed to start up on it's own but it's not. It's display 2 of the 4 images that are supposed to be rotating. What should I look for?

[William Davis]

Leslie, there was an update to Levels framework:

Latest Version: 1.0.2

1.0.2 (released 2/23/2016) Bugs Fixed:

• PATR Page missing attributes Bug Fix
• Base price always showed as crossed out Bug Fix
• Additional Images May not all be visible when going from mobile to tablet Bug Fix
• State field Missing is Default country is not US: Bug Fix
• Discover Cards Not Working During Checkout: Bug Fix
• Hard Coded Value of /mm5/ in scripts.js to create customer account on OCST: Bug Fix

[William Davis]

Where did you get the slider from, another framework?

[lesliekirk]

I don't think I did, but then I could have since I had been trying to make the slider from the Booc ReadyTheme work in another site that used the Levels ReadyTheme. I'll have to try searching the forum again to find the info.

[eldon99]

I cannot get a SFNT slider to work either. I see #js-hero-slider in the scripts.js, but was unable to get it to work properly. Any code samples I can use?

[lesliekirk]

I'm still not getting this to fire. Again, has any one gotten this to go?

[lesliekirk]

I'm still not getting this to fire. Again, has any one gotten this to go?

<doh> The site I just added this to is not Levels. Guess it's not meant to work in Suivant </doh>

[kampourisl]

Leslie did you ever get a slideshow to work with levels readytheme? I want one for the Hero Image position and looking for anyone with success?

[Matt Zimmermann]

The Levels ReadyTheme does not come stock with a hero slider. However, this should give you a good starting point to add one to it.

1. Create a new ReadyTheme content section with the code 'hero_slider' and place this code in there:
   

   	<div class="row hero-slider">
   	    <div data-hook="hero-slider" class="column whole nm np">
   	        <div><mvt:item name="readytheme" param="image( 'img_slide01' )" /></div>
   	        <div><mvt:item name="readytheme" param="image( 'img_slide02' )" /></div>
   	        <div><mvt:item name="readytheme" param="image( 'img_slide03' )" /></div>
   	        <div><mvt:item name="readytheme" param="image( 'img_slide04' )" /></div>
   	    </div>
   	</div>
   	<!-- end hero-slider -->

2. Create new ReadyTheme images with the codes of img_slide01...etc and upload your images. They should be fairly large in dimension.
3. Add this code to your 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;
   	}

4. Add the following code to your scripts.js file within the jsSFNT function to initialize the slide show:
   

   	$.ajax({
   	    cache: true,
   	    crossDomain: true,
   	    dataType: 'script',
   	    url: theme_path + '/js/jquery.slick.min.js'
   	}).done(function () {
   	    $.hook('hero-slider').slick({
   	        arrows: false,
   	        autoplay: true,
   	        autoplaySpeed: 5000,
   	        dots: true,
   	        slide: 'img',
   	        variableWidth: true,
   	        responsive: [
   	            {
   	                breakpoint: 960,
   	                settings: {
   	                    dots: false
   	                }
   	            }
   	        ]
   	    });
   	});

[kampourisl]

Hi Matt,
I know enough to get in trouble so I ask questions and thank you all for your help!
I don't know about the Hero Slider, does it allow you to add captions? Or where do you find it?
What I did find is bxslider at bxslider.com and when I looked at their examples (check examples it's on the bottom of their page) the 1st example looked like what I want.
Thing is other than create pages, I've really added js to Miva so a little intimidated, then I get mad at myself and want to try so, I come to ask for help..
I am willing to pay for the help, but I also get great pleasure in going beyond and learning something new!
So I see in the file there are js items, I assume (yeah went there) they all go in the js folder in mm5.
But then the script for the slides and the captions where do they go?
Matt I'll guess the code you have given here will pretty much do it but how do I adapt it for bxslider?

Thank you for taking time to help us.

[Matt Zimmermann]

Unfortunately, I am not familiar with bxslider, the ReadyThemes currently ship with Slick. By default, there are no caption areas for the slider. I would recommend contacting Professional Services [ [email protected] ] to have a developer assist with or code the slider for you.

[Bruce - PhosphorMedia]

The sliders do show "product name", so can't that area be used for "captions"?

[habreu]

Hi Matt,

I tired adding that here http://www.allfrom1supply.com/ and I can see in the page code that the image code seems to be added but I'm not getting the display.

I added the code as stated. This is the jsSFNT function with the required code added - not sure if I mucked it up.

[Note: temporarily commented out 3 of the four images because it was forcing my SFNT way past the fold but even single image doesn't show.]

    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 () {
        $.hook('hero-slider').slick({
            arrows: false,
            autoplay: true,
            autoplaySpeed: 5000,
            dots: true,
            slide: 'img',
            variableWidth: true,
            responsive: [
                {
                    breakpoint: 960,
                    settings: {
                        dots: false
                    }
                }
            ]
        });
    });
    },

[Matt Zimmermann]

In the HTML for the slider, change `data-hook="hero-slider"` to `id="js-hero-slider"` and update your JavaScript to change `$.hook('hero-slider')` to `$('#js-hero-slider')`.

[habreu]

Is there perhaps any changes needed to the CSS? I still see nothing. Thanks.