Wordpress ACF carousel without additional plugins

Question

I'm trying to create a carousel with Advanced Custom Fields and without any additional slider plugins. The reason why I am doing this is that the slider plugins that I have come across do not allow much customisation to create the slider I need. But I'm stuck on how to create it so does anyone know of a good tutorials on this or have any tips for what i'm trying to achieve. Here's my code so far.

<?php if(have_rows('slider')): ?>
    <ul id="slider_container">
        <?php while(have_rows('slider')): the_row();
            $image = get_sub_field('image');
            $content = get_sub_field('content');
            $link = get_sub_field('link');
            ?>

            <li class="image_container" id="index-<?php echo get_row_index() ?>">         
                <?php if( $link ): ?>
                    <a href="<?php echo $link; ?>">
                <?php endif; ?>

                    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>" />

                <?php if( $link ): ?>
                    </a>
                <?php endif; ?>

                <?php echo $content; ?>
            </li>
        <?php endwhile; ?>
    </ul>
<?php endif; ?>

#slider_container{
    width: 100%;
    height: auto;
    display: block;
    text-align: center;
    font-size: 0; /*removing white space between li elements*/
}
.image_container{
    display: inline-block;
    width: 30%;

}
.image_container img{
    width: 100%;
}

There will be three images. the basics of what I want is the centre image to be bigger and have one of the none active ones displayed on each side. You should be able to loop through these when a button is clicked. So any tips on how to achieve this would be great thanks.

Kinda like this: https://codepen.io/dobladov/pen/kXAXJx

Answer 1 · 2017-07-05T21:13:10Z

July 5, 2017 9:13pm

There are several ways to go about this. How comfortable are you with jQuery and CSS? One way of going about it is using flexbox, and jQuery. Another way is to use a jQuery plugin such as slick then add custom css to the slider.

Welcome to the Treehouse Community

Looking to learn something new?

Reece Barrett

Reece Barrett

Wordpress ACF carousel without additional plugins

1 Answer

Jacob Mishkin

Jacob Mishkin