Owl carousel slider customisation

Question

    <div class="owl-carousel">
            <div class="item">
              <img alt="" src="images/g1.jpg">
            </div>
            <div class="item">
             <img alt="" src="images/g2.jpg">
            </div>
            <div class="item">
                    <img alt="" src="images/g1.jpg">
            </div>
            <div class="item">
                    <img alt="" src="images/g2.jpg">
            </div>
            <div class="item">
                    <img alt="" src="images/g1.jpg">
            </div>
            <div class="item">
                    <img alt="" src="images/g2.jpg">
            </div>
            <div class="item">
                    <img alt="" src="images/g1.jpg">
            </div>
            <div class="item">
                    <img alt="" src="images/g2.jpg">
            </div>
            <div class="item">
                    <img alt="" src="images/g1.jpg">
            </div>
            <div class="item">
                    <img alt="" src="images/g2.jpg">
            </div>

          </div>

  var owl = $('.owl-carousel');
  owl.owlCarousel({
    loop: true,
    items: true,
    nav: false,
    navText: false,
    autoplay:true,
    smartSpeed:4000,
    autoplayTimeout:100,
    dots: true,
    autoWidth: false,
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 2
      },
      1000: {
        items: 3
      }
    }
  })

Hey guys I'm creating a slider using owl carousel. But I need to customize them like the section in the link that I attached below (section just above the "Apply Now for your Kids" ) . http://preview.themeforest.net/item/kidstar-kindergarten-school-html-template/full_screen_preview/19514751 I can show you my code that I used. Please go through that and please help me. Thanks guys.

Answer 1

They use a different owl.carousel.js version, it is not the last one. This is the problem. I don't know which number is. You have to contact Template Path https://themeforest.net/user/template_path & ask them for more informations.

For me it could be the 2.3.2. 'cause with that, the carousel works well.

$(function() {
    var owl = $('.owl-carousel');

    owl.owlCarousel({
        loop: true,
        nav: false,
        items: true,
        navText: false,
        autoplay:true,
        smartSpeed:4000,
        autoplayTimeout:100,
        dots: true,
        autoWidth: false,
        responsive: {
            0:{
                items:1,
                loop:true
            },
            480:{
                items:2,
                loop:true
            },
            768:{
                items:3,
                loop:true
            },
            1000:{
                items:4,
                loop:true
            }
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.2/owl.carousel.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.2/assets/owl.carousel.min.css" rel="stylesheet" >
<div class="owl-carousel">
  <div class="item">
    <h2>Swipe</h2>
  </div>
  <div class="item">
    <h2>Drag</h2>
  </div>
  <div class="item">
    <h2>Responsive</h2>
  </div>
  <div class="item">
    <h2>CSS3</h2>
  </div>
  <div class="item">
    <h2>Fast</h2>
  </div>
  <div class="item">
    <h2>Easy</h2>
  </div>
  <div class="item">
    <h2>Free</h2>
  </div>
  <div class="item">
    <h2>Upgradable</h2>
  </div>
  <div class="item">
    <h2>Tons of options</h2>
  </div>
  <div class="item">
    <h2>Infinity</h2>
  </div>
  <div class="item">
    <h2>Auto Width</h2>
  </div>
   <div class="item">
    <h2>Swipe</h2>
  </div>
  <div class="item">
    <h2>Drag</h2>
  </div>
  <div class="item">
    <h2>Responsive</h2>
  </div>
  <div class="item">
    <h2>CSS3</h2>
  </div>
  <div class="item">
    <h2>Fast</h2>
  </div>
</div>