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.
