ACF & Slick Slider

• Vince_M

• April 20, 2019 at 3:47 am

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;
}