Setup Owl Carousel Banners

Use Owl Carousel together with getResources to create an effective and easy to manage slider gallery.

1) Download or load the necessary files; jquery.js, owl.carousel.min.js, bootstrap. Make sure the getResources extra is also installed

2) Setup a template variable named 'banner'

3) Paste the below in a template (eg: home)

<div class="container-fluid no-pad">
   <div id="banners" class="owl-carousel">

4) Create the 'bannerTpl' chunk

        <div class="item" style="background-image:url([[+tv.banner]]);">
        <!--if u want text etc on top of the image-->
          <div class="cover">
            <div class="container text-center txtwh">

5) CSS - adjust padding accordingly for smaller screen sizes

.item  {background-size:cover;background-position: center center;background-repeat:no-repeat;position:relative;padding:12em;}

6) Insert Jquery

          items:1, //one image per slide

Get In Touch

Have a question? or perhaps spotted a problem?
Maybe you have something you would like to add. Drop us a line anytime!