Simple Slider with Advanced Custom Fields and OWL Carousel

Home » Blog » Development » Simple Slider with Advanced Custom Fields and OWL Carousel

A lot of websites have a image slider. Most of the time there is just a simple slide effect required and it is not necessary to use a huge JavaScript library like the Revolution Slider or the WooSlider.

We have been using the OWL Carousel for several different web-projects and we are very happy with the simple integration and the features it provides. Together with Advanced Custom Fields and the Gallery Add-on it does not take a lot of time to create a slider and the styling is pretty simple as well.

You can use this tutorial without WordPress and ACF as well, but then you have to set up the list-structure of the slider manually.

HTML

In the standard version we are just getting the images to display:

<ul id="owl-demo" class="owl-carousel owl-theme">
	<?php
	$images = get_field('slider');
	foreach ($images as $image):?>	
		<li>
			<img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
	    </li>	    
    <?php endforeach;?>
</ul>

If you would like to show some text like the image title you have to render it inside the list-element (see line 8-10).

<ul id="owl-demo" class="owl-carousel owl-theme">
	<?php $images = get_field('slider');
	foreach ($images as $image):?> 		
		<li>
			<img class="slide" src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
			<div class="slide-content">
				<?php echo $image['title'];?>
			</div>
		</li> 		    
	<?php endforeach;?>
</ul>

JavaScript for OWL Carousel

We have been using some settings like the interval and the slide speed to control the behaviour of the slider. You can find all available settings here.

<script>
	jQuery(function($){
	    $(document).ready(function(){
	        var owl = $(".owl-carousel").owlCarousel({
	            items: 1,
	            slideSpeed: 900,
	            pagination: true,
	            autoplay: true,
	            autoplayTimeout: 3500,
	            autoplayHoverPause: true,
	            addClassActive: true,
	            singleItem: true,
	        }).data('owlCarousel');
	
	        $('.owl-item').click(function(){
	            owl.next();
	        })
	
	        setInterval(function(){
	            owl.next();
	        }, 6000);
	    });
	})
</script>

CSS

Basically there is just a styling of the slide appearance required. If you are showing additional content like the title you have to adjust this container with the following code:

.slide{
     position: relative;
     z-index: 1;
}
.slider-content{
     position: absolute;
     top: 20px;
     left: 20px;
     z-index: 100;
}

Examples

You find examples of the slider here:
http://www.gegenfestplattenabgabe.at
http://www.austrianstartups.com