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.
    • borzoid

    • September 20, 2019 at 8:51 am

    Hi, I’m usually able to muddle through this myself but I’ve seen few ways of doing this but they are all for image sliders.

    I am setting up reviews with a repeater fields and want to put individual reviews in a widget slider. How would I go about doing that with this method

    alternatively it was suggested that I create a short code for my repeater and use that in slide anything. What do you suggest

Viewing 4 posts - 1 through 4 (of 4 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.