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:
Then I added the html Code to the java script file
Then added this html code to the theme.css file
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
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 -->
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}}] }); });
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; }
Comment