This is the first time I have used ACF for a slider and I have built the slider on my index page using ACF and Slick Slider. I am using Bootstrap 3. Before I have used a plug-in for a Bootstrap slider. The plug-in hasn’t been updated for years so I thought this was a good time to do it right.
There are 3 images with text overlay. When you visit the page all the text shows up overtop each other then the first image shows up and the 2nd & 3rd text disappears. Below is the link to the page:
The site also seems really slow to load:
Here is the code I am using:
<!-- slider
================================================== -->
<div class="index-slider">
<?php if( have_rows('index-slider') ): ?>
<?php while( have_rows('index-slider') ): the_row();
$imageArray = get_sub_field('image');
$imageURL = $imageArray['url'];
?>
<div class="slide-item hero-slider" style="background-image: url('<?php echo $imageURL;?>');" >
<h1 class="herohead"><?php the_sub_field('herohead'); ?></h1>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div> <!-- .index-slider -->
below is the CSS:
.index-slider {
z-index: 99;
box-shadow: 0px 5px 5px $dark-grey;
margin-top: 0px;
}
.slick-next {
right: 50px;
z-index: 9999;
}
.slick-next {
right: 50px;
z-index: 9999;
}
.slick-prev {
left: 50px;
z-index: 9999;
}
.slick-dots {
bottom: 10px;
z-index: 9999;
}
.slick-dots li {
width: 30px;
height: 30px;
}
.slick-track {
margin: 0 auto;
}
.slick-dotted.slick-slider {
margin-bottom: 0px;
border-bottom: 10px solid $dark-grey;
}
.slick-slide {
background-position: 50% 100%;
background-size: cover;
}
.hero img {
background-position: 50% 100%;
background-size: cover;
left: 50%;
padding: 0;
position: relative;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
// width: 100vw;
border-bottom: 10px solid red;
padding: 0px;
margin-top: 0px;
max-height: 350px;
clear: both;
}