Linking SFNT Carousel image resizes it

[lesliekirk]

When I try to link one of the images in the storefront carousel, it gets resized and is no longer full screen. I should note that I have tweaked the layout so the carousel images are displaying at 100% width. I'm trying to figure out what in the CSS (and hopefully not the javacript) is displaying the image at it "natural" size instead of at 100%.

I'm thinking someone else has come up against this.

[lesliekirk]

It would appear that the images that do not have a link are appended with

style="width: 100%; display: inline-block;"

but the image with the anchor tag does not have such. Unfortunately, that leads me to think it's the javascript

[Matt Zimmermann]

Hi Leslie,

Can you post a link to the site?

[lesliekirk]

Hi Leslie,

Can you post a link to the site?

It's a domain based dev site behind password protection. I wonder, could I create a framework of this site and set it up it Miva based dev site? Maybe that might help troubleshoot a number of issues with this particular site?

[Matt Zimmermann]

Hi Leslie,

You could try that or contact support and have them look into the code.

[lesliekirk]

Hi Leslie,

You could try that or contact support and have them look into the code.

I already have one ticket open with them for the Sticky Header. I was really hoping that someone else had issue.

I noticed there is another store doing what I'm trying to do, but it looks like they are using an older version of the jquery.slick.min.js file.

[lesliekirk]

FYI, the using the older slick file didn't make a difference.

What I'm trying to do. In the ReadyTheme Content section I have Code: hero_slider

<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' )"/>
    <mvt:item name="readytheme" param="image( 'img_slide05' )"/>
    <mvt:item name="readytheme" param="image( 'img_slide06' )"/>
</div>
<!-- end hero-slider -->

For an image that I want to link, I use the ReadyTheme > Image and assign the link to the image there.

Do I need to add a CSS Class to the image?

[Matt Zimmermann]

Hi Leslie,

In the JavaScript, for the initialization of the slider, add this to the options you are passing:

slide: '',

[lesliekirk]

Hi Leslie,
In the JavaScript, for the initialization of the slider, add this to the options you are passing:

slide: '',

That is already there in the default code.

It looks like the class="slick-slide" is being appended to the first thing it encounters. If it's just an image then it's

<img class="slick-slider" src="myimage.jpg" style="width:1417px;">

but if it's linked

<a class=class="slick-slider" href="mylink.html" style="width:1417px;">< img class="slick-slider" src="myimage.jpg"></a>

Trying to figure out why the difference when it's the anchor wrapped around the image that is displaying the image at its natural size instead of the size of the anchor.