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

  • Hey

    I am having a hard time getting my repeater to display as a slider and not images listed under each other. I have no trouble doing a slider gallery, but for some reason I can’t get the repeater to display as a slider. I can post my php if needed, I’m on my phone atm and thought that maybe someone could help from my description.

  • First of all, don’t hijack other people’s threads. Your question might seem similar to another person’s issue but it’s likely a whole different problem and approach to the solution. Always create a new, separate thread for your question.

    Secondly, a vague description of your problem isn’t any useful; you need to provide more than that – a description of what you have tried so far is a start, but your actual code would be best. That way we can see what’s wrong and don’t have to play an endless guessing game.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.