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">
      [[getResources?
         &parents=`[[*id]]`
         &tpl=`bannerTpl`
         &sortby=`menuindex`
         &sortdir=`ASC`
         &limit=`10`
         &showHidden=`1`
         &includeContent=`1`
         &includeTVs=`1`
         &processTVs=`1`
      ]]
   </div>
</div>

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">
              <h1>[[+longtitle]]</h1>
              [[+content]]
            </div>
          </div>
        </div>

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




<script>
 $(document).ready(function(){
    $('#banners').owlCarousel({
          items:1, //one image per slide
          loop:true,
          margin:0, 
          nav:false, 
          autoplay:true,
          autoplayTimeout:6000,
          autoplaySpeed:1000
        });
    });
</script>

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!

Login

Setup Owl Carousel Banners

Get In Touch