Announcement
Collapse
No announcement yet.
Turning Hero Image into a slider
Collapse
X
-
That is the correct tag. It should be inserted where you want to display the slider, among all the other code on the page.
-
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
Leave a 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.
Leave a 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
Leave a 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?
Leave a 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?
Leave a 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 } } ] }); }); },
Leave a 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!
Leave a 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.
Leave a comment:
-
Matt I would be able to provide screenshots and more details if that would help.
Leave a 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.
Leave a comment:
-
Are you seeing any JavaScript errors and can you post a link to the site?
Leave a comment:
-
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 -->
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; }
Tags: None
Leave a comment: