Support

Account

Home Forums Add-ons Repeater Field Slick using repeater field

Solving

Slick using repeater field

  • I am using Slick Slider and ACF using Repeater. In the code I am using the Slider image is loaded with a inline CSS. I am wondering if there is a better way to do this or if I am doing it completely wrong.

    The code is below:

      <div class="index-slider">
          <?php if( have_rows('index-slider') ): ?>
              <?php while( have_rows('index-slider') ): the_row(); ?>
              <?php
                      $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 --> 

    CSS

    .index-slider {
      z-index: 99;
      box-shadow: 0px 5px 5px #58595b;
      margin-top: 0px; }
    
    .index-slider {
      opacity: 0;
      visibility: hidden;
      transition: opacity 1s ease;
      -webkit-transition: opacity 1s ease; }
    
    .hero-slider {
      background-size: 100% 100%;
      background-repeat: no-repeat; }
    
    .hero-slider > h1 {
      font-size: 3.875em;
      font-family: "Open Sans", Helvetica, Arial, sans-serif;
      font-weight: 300;
      color: #86b043;
      text-shadow: 2px 2px #58595b;
      position: absolute;
      top: 23%;
      left: 50%;
      text-align: left;
      z-index: 999; }

    JS slick-init.js

    jQuery(document).ready(function($){
      $('.index-slider').slick({
        autoplay: true,
        fade: true,
        speed: 2000,
      	arrows: true,
      	dots: true,
      	autoplaySpeed: 6000,
        lazyLoad: 'ondemand',
      });
    });
    
  • I have not examined your code for errors, but overall it looks like the way I’d do it.

  • This reply has been marked as private.
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.