Stuck with Owl carousel - Can't make it work

Question

I started building my website (WordPress custom theme with Boostrap front-end framework). I put inside files in it but i still am not getting it to work. Everything is visible but I cant slide it. I Have checked that files are loaded properly.

These are the files i have loaded on the page - jquery-1.11.0.min.js (from bootstrap)

• jquery.min.js (came together with owl folder)

• owl.carousel.min.js

• owl.carousel.min.css

• owl.theme.default.min.css

I have tried turning of jquery-1.11.0.min.js but keeping jquery.min.js. I have also tried turning off jquery.min.js and keeping jquery-1.11.0.min.js but no results.

Has anyone had same problem?

---

I tried setting up an jsfiddle but somehow the carousel doesn't show up at all there. Here is the link anyways so you can see the code.

https://jsfiddle.net/ykhu3aa0/3/

HTML

<div class="loop owl-carousel owl-theme owl-loaded owl-drag">
        <div class="owl-stage-outer">
            <div class="owl-stage" style="transition: 0.25s; width: 5880px; transform: translate3d(-2572px, 0px, 0px);">
                <div class="owl-item cloned" style="width: 235px; margin-right: 10px;">
                    <div class="item">
                        <img src="http://via.placeholder.com/350x220">
                    </div>
                </div>

                <div class="owl-item cloned" style="width: 235px; margin-right: 10px;">
                    <div class="item">
                        <img src="http://via.placeholder.com/350x220">
                    </div>
                </div>

                <div class="owl-item cloned" style="width: 235px; margin-right: 10px;">
                    <div class="item">
                        <img src="http://via.placeholder.com/350x220">
                    </div>
                </div>

                <div class="owl-item cloned" style="width: 235px; margin-right: 10px;">
                    <div class="item">
                        <img src="http://via.placeholder.com/350x220">
                    </div>
                </div>

                <div class="owl-item cloned" style="width: 235px; margin-right: 10px;">
                    <div class="item">
                        <img src="http://via.placeholder.com/350x220">
                    </div>
                </div>

                <div class="owl-item cloned" style="width: 235px; margin-right: 10px;">
                    <div class="item">
                        <img src="http://via.placeholder.com/350x220">
                    </div>
                </div>

                <div class="owl-item" style="width: 235px; margin-right: 10px;">
                    <div class="item">
                        <img src="http://via.placeholder.com/350x220">
                    </div>
                </div>

                <div class="owl-item" style="width: 235px; margin-right: 10px;">
                    <div class="item">
                        <img src="http://via.placeholder.com/350x220">
                    </div>
                </div>

                <div class="owl-item" style="width: 235px; margin-right: 10px;">
                    <div class="item">
                        <img src="http://via.placeholder.com/350x220">
                    </div>
                </div>

                <div class="owl-item" style="width: 235px; margin-right: 10px;">
                    <div class="item">
                        <img src="http://via.placeholder.com/350x220">
                    </div>
                </div>

                <div class="owl-item" style="width: 235px; margin-right: 10px;">
                    <div class="item">
                        <img src="http://via.placeholder.com/350x220">
                    </div>
                </div>

                <div class="owl-item active" style="width: 235px; margin-right: 10px;">
                    <div class="item">
                        <img src="http://via.placeholder.com/350x220">
                    </div>
                </div>

                <div class="owl-item active center" style="width: 235px; margin-right: 10px;">
                    <div class="item">
                        <img src="http://via.placeholder.com/350x220">
                    </div>
                </div>

                <div class="owl-item active" style="width: 235px; margin-right: 10px;">
                    <div class="item">
                        <img src="http://via.placeholder.com/350x220">
                    </div>
                </div>

                <div class="owl-item active" style="width: 235px; margin-right: 10px;">
                    <div class="item">
                        <img src="http://via.placeholder.com/350x220">
                    </div>
                </div>

                <div class="owl-item" style="width: 235px; margin-right: 10px;">
                    <div class="item">
                        <img src="http://via.placeholder.com/350x220">
                    </div>
                </div>

                <div class="owl-item" style="width: 235px; margin-right: 10px;">
                    <div class="item">
                        <img src="http://via.placeholder.com/350x220">
                    </div>
                </div>

                <div class="owl-item" style="width: 235px; margin-right: 10px;">
                    <div class="item">
                        <img src="http://via.placeholder.com/350x220">
                    </div>
                </div>

                <div class="owl-item cloned" style="width: 235px; margin-right: 10px;">
                    <div class="item">
                        <img src="http://via.placeholder.com/350x220">
                    </div>
                </div>

                <div class="owl-item cloned" style="width: 235px; margin-right: 10px;">
                    <div class="item">
                        <img src="http://via.placeholder.com/350x220">
                    </div>
                </div>

                <div class="owl-item cloned" style="width: 235px; margin-right: 10px;">
                    <div class="item">
                        <img src="http://via.placeholder.com/350x220">
                    </div>
                </div>

                <div class="owl-item cloned" style="width: 235px; margin-right: 10px;">
                    <div class="item">
                        <img src="http://via.placeholder.com/350x220">
                    </div>
                </div>

                <div class="owl-item cloned" style="width: 235px; margin-right: 10px;">
                    <div class="item">
                        <img src="http://via.placeholder.com/350x220">
                    </div>
                </div>

                <div class="owl-item cloned" style="width: 235px; margin-right: 10px;">
                    <div class="item">
                        <img src="http://via.placeholder.com/350x220">
                    </div>
                </div>
            </div>

        </div>

        <div class="owl-nav disabled"><div class="owl-prev">prev</div><div class="owl-next">next</div></div>

        <div class="owl-dots">
            <div class="owl-dot"><span></span></div>
            <div class="owl-dot"><span></span></div>
            <div class="owl-dot"><span></span></div>
            <div class="owl-dot"><span></span></div>
            <div class="owl-dot"><span></span></div>
            <div class="owl-dot"><span></span></div>
            <div class="owl-dot active"><span></span></div>
            <div class="owl-dot"><span></span></div>
            <div class="owl-dot"><span></span></div>
            <div class="owl-dot"><span></span></div>
            <div class="owl-dot"><span></span></div>
            <div class="owl-dot"><span></span></div>
        </div>

Javascript

  $('.loop').owlCarousel({
    center: true,
    items:2,
    loop:true,
    margin:10,
    responsive:{
        600:{
            items:4
        }
    }
});

Answer 1

It's running now, I think?

$(function(){
  $('.loop').owlCarousel({
      center: true,
      items:2,
      loop:true,
      margin:10,
      responsive:{
          600:{
              items:4
          }
      }
  });
});

Demo: https://jsfiddle.net/ykhu3aa0/4/