Easy, Swipe-enabled SEBLOD Carousels with Owl Carousel

Easy, Swipe-enabled SEBLOD Carousels with Owl Carousel

February 09, 2015

Create a quick and easy SEBLOD carousel which is swipe-enabled on touch screen devices using just a few lines of code and the Owl Carousel jQuery plugin.

The combination of the SEBLOD List template and the Owl Carousel jQuery plugin make it really easy to render your SEBLOD list items in a nice carousel, like below! The big advantage of using Owl Carousel is that it's swipe-enabled on touch screen devices.

First, dowload the SEBLOD List template and the Owl Carousel jQuery plugin and install the SEBLOD List template on your website.

Step 1: Create your SEBLOD List

In SEBLOD, set up a new list and search type to list the items you want to display in the carousel. In the list view, specify the seb_list template (that you just installed) as your list template. In the Template > Style options at the bottom (seen below) set the "Display" to Advanced (Item View) and add the classes "blog-carousel list-unstyled". You can replace blog-carousel with anything you want, just remember it for the step below when we initialise the Owl Carousel in our template.

list setup carousel

Since we've selected the "Display" as "Advanced (Item View)", we can add our fields to the Item view. This allows us to add some position variation settings if you want to add some padding to your carousel items.

Step 2: Create a SEBLOD List Module and load it somewhere

This step is easy, just create a SEBLOD list module, making sure to select the List you just created, and load it somewhere on your page. If you need guidance on this, check out this SEBLOD manual.

Step 3: Load Owl Carousel in your Joomla template

Then, in your default Joomla template's folder (/templates/template_name) add a folder called "js" (it might already have one) and upload this file in to it:

  • owl.carousel.min.js

Then, in your default Joomla template's folder, locate the "css" folder and upload these files in to it:

  • owl.theme.css
  • owl.carousel.css

Now your Owl Carousel files are uploaded on to your server, you need to load them in your template. To do this, add this code just before the </head> in your Joomla's default template index.php file:

<script src="/<?php echo $this->baseurl ?>/templates/template_name/js/owl.carousel.min.js"></script>

<link rel="stylesheet" type="text/css" href="/<?php echo $this->baseurl ?>/templates/template_name/css/owl.carousel.css">

<link rel="stylesheet" type="text/css" href="/<?php echo $this->baseurl ?>/templates/template_name/css/owl.theme.css">

Remember to replace 'template_name' with the actual name of your default Joomla template.

Step 4: Initialise Owl Carousel in your Joomla template

Now the files are loaded in your template, you need to initiate the Owl Carousel. To do that, add this code just before the </body> in your default Joomla template's index.php file:

<script type="text/javascript">
jQuery(document).ready(function($) {
    'use strict';
     $(".blog-carousel").owlCarousel({
        scrollPerPage : false,
        navigation : false,
        items : 2
      });
});
</script>

Remember if you used a different list class above instead of "blog-carousel" then use that in the code above instead.

And you're done! You now have a great and simple carousel for your SEBLOD items!