Created by
Rik Kendell
| <div class="image-list row no-gutters">
<?php $i = 0;
while ( have_posts() ) : the_post(); ?>
<div class="col-12 col-lg-6 row no-gutters">
<div class="col-10 offset-1">
<a href="javascript:void(0)" class="overlay-toggle" data-target="#carousel-overlay" data-slide="<?php echo $i; ?>">
<?php
$image = get_field('image');
$size = 'square-sm'; ?>
<?php // Image
echo wp_get_attachment_image( $image, $size ); ?>
</a>
</div>
</div>
<?php $i++;
endwhile; ?>
</div><!-- .image-list -->
<div class="carousel">
<?php $i = 0;
while ( have_posts() ) : the_post(); ?>
<div>
<?php
$image = get_field('image');
$size = 'square'; ?>
<?php echo wp_get_attachment_image( $image, $size ); ?>
</div>
<?php $i++;
endwhile; ?>
</div><!-- .fullpage-carousel -->
|
| // Carousel
$('.fullpage-carousel').slick({
arrows: true,
dots: false,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
lazyLoad: 'ondemand',
});
// Jump To Slide
$('.image-list a').click(function(e) {
e.preventDefault();
var slideno = $(this).data('slide');
$('.carousel').slick('slickGoTo', slideno)
});
|