Hero Image Carousel / Slider

[lesliekirk]

Although DiVino is a variation of Levels, it would be good to post tips/how-to's on creating a Hero Image slider/carousel for those searching for this type of info.

[jsdva]

Tips/how-to's. Excellent suggestion Leslie! I'd like to see more tips and tricks/how-to's for all the themes and for other topics/pieces/portions. BTW: The knowledgebase, which used to stay pretty relevant, needs a major update. Many of the articles are from the dinosaur era: https://support.miva.com/supportsuit...ips-and-tricks

[lesliekirk]

After a few misfires (not going to the second page of posts) I have used this code from Matt in DiVino:

The HTML for the ReadyTheme Content Section should look more 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 -->

and the JavaScript like this:

$.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
}
}
]
});
});

I need to go grab the CSS tweaks for the "dots" and post it here. (You can also just turn them off by setting dots: false).

[lesliekirk]

Here's the CSS that Matt provided:

.hero-slider .slick-dots li button {
display: block;
width: 1rem;
height: 1rem;
padding: 0;
font-size: 0;
background-color: transparent;
border: 0 none;
}

.hero-slider .slick-dots li button::before {
display: block;
width: 1rem;
height: 1rem;
line-height: 1;
background: transparent;
border: 1px solid #fff;
border-radius: 1rem;
opacity: 1;
content: '';
}

[jsdva]

Thank you Leslie! This helps a lot!!