owl carousel test

by ian_smithz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css">
<div id="widget-e9fa0006ca797d1946aba9e27994a133" class="owl-carousel owl-banner owl-theme">


  <div class="item">

    <div class="row hp_banner chevron hp_banner-lapdownlight">
      <a href="http://www.ie.screwfix.com/electrical-lighting/lighting/downlights/contractor-packs?manufacturer=LAP" title="Save on LAP downlight Contractor Packs" onclick="ga('send', 'event', 'Homepage', 'Banner', '130LAPDownlights');">
        <div class="hp_banner-outer hp_banner-cwhite small-12 columns">
          <!-- Add hp_banner-cwhite or hp_banner-nochev if you want their to be a blue border -->

          <div class="banner_inner small-12 columns">

            <div class="text_cont columns">
              <div class="text_wrap saveut_promo-msg">
                <div class="text_promo-msg">
                  <span class="hp_banner-sut">UP TO </span>
                </div>
                <div class="text_promo-value">
                  14<sup>%</sup>
                </div>
                <div class="text_small">
                  On LAP Downlight
                </div>
                <div class="text_small">
                  Contractor Packs
                </div>
                <div class="text_small">
                </div>
              </div>
            </div>

            <div class="banner_chevron columns">
            </div>

            <div class="main_image columns">
              <picture class="hide-above-bpsml">
                <img srcset="http://screwfix.aws.ie.jt.redboxcloud.com/media/wysiwyg/banners/home/mobile/cat130/hp-cat130-hero-lapcontractorpacks_sm.png" alt="Save on LAP downlight Contractor Packs">
              </picture>
              <picture class="show-above-bpsml">
                <img...

CSS

.owl-theme .owl-controls {
  margin-top: 0
}

.owl-banner .owl-controls {
  position: relative;
  background-color: #f5f5f5;
  padding-top: 15px
}

.owl-carousel.owl-theme .owl-controls .owl-page span {
  background-color: #e7e7e7;
  width: 45px;
  box-shadow: inset 0 4px 5px 0 rgba(0, 0, 0, .29)
}

.brandwrap h2,
h2 {
  width: auto!important
}

.owl-theme .owl-controls .owl-page.active span {
  background-color: #0053a0
}

.catalog-category-view .owl-banner,
.catalog-category-view .widget-banner-inline {
  display: block!important
}

.roundel_cont.off,
.text_promo-msg span.hp_banner-sut {
  display: none
}

h2 {
  max-width: 1248px
}

.brandwrap h2 {
  max-width: 1197px
}

.widget-products.products-grid.owl-carousel.owl-theme.zonegrid-products .item {
  background-color: transparent
}

.hp_banner {
  padding: 0 24px;
  max-width: 1248px!important
}

.hp_banner.half--var {
  margin: 0 -24px;
}

.hp_banner--mod {
  margin: 0 -6px;
}

.owl-carousel .owl-wrapper .owl-item .item {
  background-color: #f5f5f5
}

.hp_banner-outer {
  height: 376px;
  padding: 12px;
  border: none;
  background-color: #0053a0;
  box-shadow: 0 4px 6px -2px rgba(0, 0, 0, .2);
  margin: 10px 0
}

.banner_inner {
  background-color: #fff;
  overflow: hidden;
}

.chevron .banner_inner {
  padding: 2px;
}

.roundel_main,
.text_cont {
  background-color: #ed1c24;
  color: #fff;
  height: 348px;
}

.text_cont {
  font-family: heavy_kerning;
  text-align: left;
}

.main_image {
  position: absolute;
  width: 100%;
  z-index: 2;
  overflow: hidden;
}

.main_image img {
  height: 348px;
  width: auto!important;
  max-width: none!important;
}

.roundel_main {
  height: 145px;
  width: 145px;
  border-radius: 130px;
  position: absolute;
  z-index: 3;
  bottom: 22px;
  right: 42px;
  font-family: bold_kerning;
  text-align: center
}

.half--var .roundel_main {
  bottom: 12px;
  right: 15px;
}

.text_small,
span.inc_vat-msg {
  font-family: regular_kerning
}

.roundel_cont {
  height:...

JavaScript

jQuery(document).ready(function() {

  var owl1 = jQuery('#widget-e9fa0006ca797d1946aba9e27994a133');

  owl1.owlCarousel({
    singleItem: true,
    navigation: true, // Show next and prev buttons
    slideSpeed: 300,
    autoPlay: 5000,
    stopOnHover: true
  })

});