SFNT: Hero Image slide show

[Matt Zimmermann]

Shoot, looks like I must have been asleep when I made the first post. 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
                }
            }
        ]
    });
});

[habreu]

Awesome! Works perfectly now.

[lesliekirk]

Revisiting this - I've got the slider part working but the dots are messed up. There are numbers displaying to the bottom right of each dot with a white bar before each dot.


Am I missing some CSS?

[Matt Zimmermann]

Hi Leslie,

Are you able to post a site link?

[lesliekirk]

Hi Leslie,

Are you able to post a site link?

I can DM the directory access to you if you like.

[Matt Zimmermann]

Hi Leslie,

That would be fine.

[Matt Zimmermann]

Hi Leslie,

It looks like your CSS might need some updating. On page 1 of this thread is some CSS for your theme.css file which should update the dots for you.

[lesliekirk]

Hi Leslie,

It looks like your CSS might need some updating. On page 1 of this thread is some CSS for your theme.css file which should update the dots for you.

Does the CSS have to go into the theme.css file? I had already added it to the custom.css file. Is that why it's not working?

[Matt Zimmermann]

Hi Leslie,

As long as that file is being called after all the core files, then it should be fine.

[lesliekirk]

Hi Leslie,

As long as that file is being called after all the core files, then it should be fine.

Therein lies the rub - the CSS is there. I can even inspect it and see that is there, but it's not working.

[Matt Zimmermann]

Hi Leslie,

Try updating your custom css with this:

.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: '';
}

[lesliekirk]

Which lines does this replace or is it in addition to what is already there?

[Matt Zimmermann]

Hi Leslie,

I believe those classes already exist in your file, so you should just be replacing them.

[lesliekirk]

Hi Leslie,

I believe those classes already exist in your file, so you should just be replacing them.

It's a little closer. I "think" it's to a point now that I "might" be able to fix it - thanks!