michael michael - 6 months ago 179
Javascript Question

OwlCarousel not displaying with Bootstrap 3

I'm trying to implement OwlCarousel in a WordPress theme where I use Bootstrap and imported the OwlCarousel assets.

Long story short: I tried OwlCarousel 2, it didn't work. I thought maybe there are conflicts with some things I use in this WordPress instance. So I tried OwlCarousel: Not working.

On every single.php page, for example http://www.einfall7.ch/beta/manufaktur/tischkorpus-m-goetti/ there should be an owl carousel just below the menu. My browser displays nothing. I'm not sure, where the issue is.

The goal is to display a full height carousel of images, defined in the article.

My used code:

$(document).ready(function() {
navigation: true, // Show next and prev buttons
slideSpeed: 300,
paginationSpeed: 400,
singleItem: true
// "singleItem:true" is a shortcut for:
// items : 1,
// itemsDesktop : false,
// itemsDesktopSmall : false,
// itemsTablet: false,
// itemsMobile : false

#owl-demo .item img {
display: block;
width: 100%;
height: auto;

<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="<?php echo esc_url( get_template_directory_uri() ); ?>/owl/owl.carousel.css">
<!-- Default Owl Theme -->
<link rel="stylesheet" href="<?php echo esc_url( get_template_directory_uri() ); ?>/owl/owl.theme.css">
<!-- Include Owl js plugin -->
<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/owl/owl.carousel.js"></script>
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item"><img src="http://www.einfall7.ch/beta/wp-content/themes/einfall7-2016/images/ref-einfall7-gr.jpg" alt="The Last of us"></div>
<div class="item"><img src="http://www.einfall7.ch/beta/wp-content/themes/einfall7-2016/images/ref-einfall7-gr.jpg" alt="GTA V"></div>
<div class="item"><img src="http://www.einfall7.ch/beta/wp-content/themes/einfall7-2016/images/ref-einfall7-gr.jpg" alt="Mirror Edge"></div>


Right after you include the owlCarousel script you include jQuery 2.2.4.

As Wordpress includes jQuery there is no need for this (Except if you want to include the newer version yourself, but than you should dequeue first).

Right now you have 2 versions of jQuery running on the site. I think that this is causing the problem with the owlCarousel. Remove the one you included and you should be allright.

It is best practice to include all the JS files you use by using the Wordpress enqueue function. You can read more about it here

This is a sample function to include the scripts:

 * Enqueue script
 * The callback is hooked to 'wp_enqueue_script' to ensure the script is only enqueued on the front-end.
function my_scripts_method() {
    wp_enqueue_script( 'owlCarousel' );
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );