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!