Miva9 - Banners carousel in ReadyTheme

[howsimple]

Hi,
Can any help?

I wish to have a 3 banners carousel on the front page of my site. Images I can select from Ready theme Images. Can anyone tell me what is the code I can insert in ReadyTheme to make this work?

Similar to what Amazon have on their front page https://www.amazon.com/

Thanks,
Keith

[Matt Zimmermann]

Hi Keith,

Which ReadyTheme are you using?

[howsimple]

Hi Matt,

Thanks for getting back with me. I am currently using Suivant Ready Theme.

Thank you!
Keith

[Matt Zimmermann]

Hi Keith,

This should get you going in the right direction for adding an image carousel to your storefront. You may need to modify the CSS to match your site styling.

Create a ReadyTheme content section with the following code:

<div class="row hero-slider">
    <div id="hero-slider" class="column whole nm np">
        <div><mvt:item name="readytheme" param="image( 'IMAGE_CODE' )" /></div>
        <div><mvt:item name="readytheme" param="image( 'IMAGE_CODE' )" /></div>
        <div><mvt:item name="readytheme" param="image( 'IMAGE_CODE' )" /></div>
        <div><mvt:item name="readytheme" param="image( 'IMAGE_CODE' )" /></div>
    </div>
</div>
<!-- end hero-slider -->

Add this JavaScript to your scripts.js file within the jsSFNT function:

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

Add this CSS to your pages.css file within the SFNT section:

/* ------------------------ hero-slider ------------------------ */
.hero-slider {
    margin-bottom: 3rem;
}
    .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;
                }

[howsimple]

Thank you very much Matt! I will give it a try. Right now I am trying to get all the images to line up in the Product Listing slider. Some images are too high. Can you help me edit the code below so I can have them aligned horizontally on the base line. Please see code and attached image. Thank you!


<div class="row bottom-shadow product-carousel">
<div class="column whole h3"><font face="Arial" size="4">Mugs + Water Bottles + Tumblers</font><a href="/personalized-drinkware-coasters.html" class="float-right">See more<span data-icon="&#xe046;"></span></a></div>
<div id="js-whats-popular-carousel4" class="column whole float-none whats-popular-carousel4">
<mvt:foreach iterator="product" array="readytheme:products">
<mvt:if expr="l.settings:product:customfield_values:custom fields:product_flag NE 'none'">
<mvt:assign name="l.settings:product:flag" value="'flag--' $ tolower(l.settings:product:customfield_values:cust omfields:product_flag)" />
</mvt:if>
<div class="category-product">
<a href="&mvte:product:link;" title="&mvt:product:name;">
<span class="flag &mvt:product:flag;">
<mvt:if expr="NOT ISNULL l.settings:product:imagetypes:main">
<img src="&mvte:product:imagetypes:main;" alt="&mvte:product:name;" title="&mvte:product:name;" />
<mvt:else>
<img src="../images/img_no_thumb.jpg" alt="&mvte:product:name;" title="&mvte:product:name;" />
</mvt:if>
</span>
<span class="breaker"></span>

<p>&mvt:product:formatted_price;</p>
<strike>&mvt:product:formatted_cost;</strike>

<p>
<mvt:item name="productreviews" PARAM="stars" />
</font>
<mvt:if expr="g.ReviewStars">
</mvt:if>
<mvt:if expr="g.ReviewStars">
&mvt:global:ReviewStars;
</mvt:if>

</p>

</a>
</div>
</mvt:foreach>
</div>
</div>
<br>
<br>

[Matt Zimmermann]

Hi Keith,

Based on the image, it would appear that your product images are not the same proportional height. If resizing the images is not an option, you can add a custom class to the SPAN surrounding the image, set it to display: inline-block, and set a fixed height.

[howsimple]

I went into my pages.css file and not sure how to display: inline-block

Here is what I did to the code in Ready Theme Product Listing surrounding the image

<span class="display-evenly"> <img src="../images/img_no_thumb.jpg" alt="&mvte:product:name;" title="&mvte:product:name;" /> </span>

Is this correct? If so, how do I add it to my pages.css so the height is fixed? See below.

Thank you for your help.


/* ------------------------ product carousel ------------------------ */
.row.product-carousel {
background: #fff;
margin: 0;
padding: 1rem 0;


}
.product-carousel .h3 {
border: solid #f4f4f4;
border-width: 1px 0;
line-height: 2;
margin-bottom: 2rem;
padding: 0;
}
.product-carousel .h3 .uppercase {
background: #818181;
color: #fff;
display: inline-block;
margin-left: -0.50rem;
padding: 0 1rem 0 1.50rem;
}
.product-carousel .h3 .uppercase:before {
border-color: transparent;
border-right-color: #4d4d4d;
border-style: solid;
border-width: 0 0.50rem 0.50rem 0;
content: '';
position: absolute;
bottom: -0.50rem;
left: -0.50rem;
}
.product-carousel .h3 a {
font-size: 1rem;
font-weight: 400;
line-height: 3;
padding-right: 2rem;
}
.product-carousel .h3 a span {
color: #bbb;
font-size: 1.25rem;
line-height: 1;
padding-left: 0.50rem;
vertical-align: middle;
}
.product-carousel .slick-next,
.product-carousel .slick-prev {
background: #fff;
box-shadow: 0 1px 4px 0 rgba(0,0,0,.2);
margin-top: 0;
top: 32%;
width: 3rem;
height: 3rem;
}
.product-carousel .slick-next:before,
.product-carousel .slick-prev:before {
font-family: 'Suivant';
}
.product-carousel .slick-next:before {
content: "\64";
}
.product-carousel .slick-prev:before {
content: "\63";
}
.product-carousel .category-product {
margin: 0;
}

[howsimple]

Hi Matt, I was able to find out how to use the display: inline; however setting the height is the same as changing the height in the product listing features. The images are still not align. Any tips?
<style>
span.a {
display: inline; /* the default for span */

height: 275px;

}


<span class="a">
<img src="&mvte:product:imagetypes:main;" alt="&mvte:product:name;" title="&mvte:product:name;" />
</span>

Thank you!

[howsimple]

I got it working using the code below. Thank you very much for your help Matt.


<style>
.floating-box {
display: inline-block;

height: 200px;
margin: 1px;
border: 1px solid #ffffff;
}

.after-box {
border: 1px solid red;
}
</style>

[howsimple]

Matt,

I was able to line up the text but is there a way to move the image to the baseline or bottom. I tried both vertical-align: baseline; and vertical-align: bottom;

Neither of those works. Do you have one I can try? Please see image.

Thanks,
Keith

[Matt Zimmermann]

Hi Keith,

That part is not so easy if you have to support older browsers. If your customer base, from your analytics, is mostly on modern browsers back to IE11, you can change the display on your box to flex and add "align-items: flex-end;".

[howsimple]

HI Matt,
Most of the customers are using new browsers. I added the code you suggested, but nothing happened. I tested on several new browsers. Any suggestions? See below.

<style>
.center {
line-height: 275x;
height: 275px
align-items: flex-end;
}
</style>


<div class="center">
<img src="&mvte:product:imagetypes:main;" alt="&mvte:product:name;" title="&mvte:product:name;" />
</div>

Thank you,
Keith

[Matt Zimmermann]

Can you post a link to the site?

[howsimple]

Sure Matt, Please see the New Arrivals (mid way on page). https://www.hansonellis.com

Thanks,
Keith

[Matt Zimmermann]

Hi Keith,

Change:

<div 
class
="
center
">

to:

<span 
class
="
center
">

and modify your "center" class in your CSS to:

.center {
    display: flex;
    height: 275px;
    align-items: flex-end;   
}