Turning Hero Image into a slider

[Rodney]

Ok that makes sense and what I thought so just adding <mvt:item name="readytheme" param="contentsection( 'hero_slider' )" /> to the first line of the content section on the storefront page should make it work correct? But when I add it wipes out the content on the page.

[Rodney]

This is the code I have in the ReadyTheme Content section for the hero_slider
<<div id="js-hero-slider" class="hero-slider">
<mvt:item name="readytheme" param="contentsection( '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>
and this is the Item Tag: <mvt:item name="readytheme" param="contentsection( 'hero_slider' )" />
So if I put that on the first line in the content section of the Sf page and update it should work right? Gosh it just seems so simple.

[Matt Zimmermann]

The code for the ReadyTheme Content section should look like this:

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

[Rodney]

HI
Ok it looks like its working!!! Well 3 of the 4 images are showing up on the SF page as a slider. Opps I see I have <<. So now I just need to figure out why img_slider01 is not appearing.

[Rodney]

HI Matt
Looks like you might be working on something. I Have to leave shortly for a meeting. I will touch base when I get back. I am grateful and appreciate all your efforts helping me. Thank you!

[Rodney]

HI Matt
I am back from my meeting. Just wondering what my next step would be to have this working. It looks like it was but that has disappeared.

[Rodney]

HI Matt
I am sorry. Yes it is working but the second image is doubled up with the first image in the slider. Would you know what I have to do to correct that? It should be just the top half of what is appearing. Looks like it is throwing the size on the page off. Thanks

[Rodney]

Matt Its Working!! Its Awesome!! Thank You very Much!!! So appreciate the help!!!

[Rodney]

Can you tell me how to remove the buttons on the bottom center of the images in the slider? I have the forward and backward arrows on the left and right side of the images so I would like to remove the buttons, I have attached a screenshot. Thank you

[Matt Zimmermann]

I'm not seeing what you are referring to, but I am going to guess you are talking about the navigation dots. If that's the case, you can change their display in your JavaScript by changing dots: true to dots: false

[Rodney]

I have attached a picture with them circled in red. I am not sure where to go to get rid of them. I thought I could put false for the dots like I put true for the arrows but it is now working so assuming I need to go somewhere else. Where would I change the display for them?

[Matt Zimmermann]

Can you post a larger screen shot with the denotation, I cannot see anything in this one?

[Rodney]

Here does this help?

[Matt Zimmermann]

I am not seeing that section on your site. Try clearing your cache and reloading the page, it may be stuck in your browser.

[Rodney]

You are right! Its gone. Crazy I cleared the cache this morning and that is when I showed up. I went in and put false for the dots but never thought to clear the cache. Thank You!