Tyrii Tyrii - 6 months ago 17
Javascript Question

Owl carousel not working, maybe I linked something incorrectly?

I an trying to use the owl carousel in my new project. I seem to be having an issue with it. So far only the HTML and CSS is working. I am somehow doing something wrong with the Script. Could someone possibly lend me a hand and take a look and point me in the right direction where I am messing up?

Here is a link to the website. The Owl Carousel is close to the bottom of the website. You will see two "partners" sections. The top is just the demo HTML, and the bottom is what I am trying to use to create the carouse. I am just using dummy images for the time being. CloudPoint DIV Site

Here is the website where I got the code from. Owl Carousel Demo

Here are some snippets of the code. If you need any further details I will do my best to provide them.



<script>
$(document).ready(function() {

$("#owl-demo").owlCarousel({

autoPlay: 3000, //Set AutoPlay to 3 seconds

items : 4,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]

});
</script>

.grayscale {
border: 0px solid black;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
/* For Webkit browsers */
filter: gray;
/* For IE 6 - 9 */
-webkit-transition: all .6s ease;
/* Transition for Webkit browsers */
}

.grayscale:hover {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: none;
}


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

<div id="owl-demo">


<div class="owl-item grayscale" style="width: 293px;"><img src="http://lorempixel.com/200/200/technics/" alt="Owl Image"></div>
<div class="owl-item grayscale" style="width: 293px;"><img src="http://lorempixel.com/200/200/technics/" alt="Owl Image"></div>
<div class="owl-item grayscale" style="width: 293px;"><img src="http://lorempixel.com/200/200/technics/" alt="Owl Image"></div>
<div class="owl-item grayscale" style="width: 293px;"><img src="http://lorempixel.com/200/200/technics/" alt="Owl Image"></div>
<div class="owl-item grayscale" style="width: 293px;"><img src="http://lorempixel.com/200/200/technics/" alt="Owl Image"></div>
<div class="owl-item grayscale" style="width: 293px;"><img src="http://lorempixel.com/200/200/technics/" alt="Owl Image"></div>
<div class="owl-item grayscale" style="width: 293px;"><img src="http://lorempixel.com/200/200/technics/" alt="Owl Image"></div>
<div class="owl-item grayscale" style="width: 293px;"><img src="http://lorempixel.com/200/200/technics/" alt="Owl Image"></div>

</div>

<script>
$(document).ready(function() {

$("#owl-demo").owlCarousel({

autoPlay: 3000, //Set AutoPlay to 3 seconds

items : 4,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3]

});
</script>







<?php

// ******************* Sidebars ****************** //

if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'name' =>_('CloudPoint Right Sidebar'),
'id' => 'right-sidebar',
'description' =>_('widgets in this area will be shown on the right-hand side.'),
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div><!--END WIDGET-->',
'before_title' => '<h2 class="sidebar_title">',
'after_title' => '</h2>',
));
}


// ******************* Add Custom search ****************** //
add_theme_support('html5', array('search-form'));


// ******************* Add Custom Menus ****************** //

add_theme_support( 'menus' );

// ******************* Add Custom Excerpt Lengths ****************** //

function wpe_excerptlength_index($length) {
return 160;
}
function wpe_excerptmore($more) {
return '...<a href="'. get_permalink().'">Read More ></a>';
}

function wpe_excerpt($length_callback='', $more_callback='') {
global $post;
if(function_exists($length_callback)){
add_filter('excerpt_length', $length_callback);
}
if(function_exists($more_callback)){
add_filter('excerpt_more', $more_callback);
}
$output = get_the_excerpt();
$output = apply_filters('wptexturize', $output);
$output = apply_filters('convert_chars', $output);
$output = '<p>'.$output.'</p>';
echo $output;
}

// ******************* Add Post Thumbnails ****************** //

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 50, 50, true );
add_image_size( 'full-width-ratio', 100, 9999 );

// ******************* Add Custom Post Types & Taxonomies ****************** //

register_post_type('custom', array(
'label' => __('Custom Post Type'),
'singular_label' => __('Custom Post Type'),
'public' => true,
'show_ui' => true,
'capability_type' => 'post',
'hierarchical' => false,
'rewrite' => true,
'query_var' => false,
'has_archive' => true,
'supports' => array('title', 'editor', 'author')
));

add_action( 'init', 'build_taxonomies', 0 );

function build_taxonomies() {
register_taxonomy( 'taxo', 'custom', array( 'hierarchical' => true, 'label' => 'Custom Taxonomy', 'query_var' => true, 'rewrite' => true ) );
}


// ******************* Add Options to Theme Customizer ****************** //

function themename_customize_register($wp_customize){

$wp_customize->add_section('themename_color_scheme', array(
'title' => __('Color Scheme', 'themename'),
'priority' => 120,
));

// =============================
// = Text Input =
// =============================
$wp_customize->add_setting('themename_theme_options[text_test]', array(
'default' => 'Arse!',
'capability' => 'edit_theme_options',
'type' => 'option',

));

$wp_customize->add_control('themename_text_test', array(
'label' => __('Text Test', 'themename'),
'section' => 'themename_color_scheme',
'settings' => 'themename_theme_options[text_test]',
));

}

add_action('customize_register', 'themename_customize_register');


// ******************* Add Shortcode ****************** //

function secondaryCallout($atts, $content = null) {
extract(shortcode_atts(array(
'link' => '#',
'link_title' => '',
'content' => '',
), $atts));

$out = '
<div class="secondaryCallout tertiaryColorBkg">
'.$content.' <a class="secondaryColorText" title="'.$link_title.'" href="'.$link.'">'.$link_title.' &gt;</a>
</div>
';

return $out;
}

add_shortcode('secondary_callout', 'secondaryCallout');

add_filter('widget_text', 'do_shortcode');


// ******************* Include styles Properly ****************** //

add_action('init','theme_enqueue_styles');

function theme_enqueue_styles() {
wp_enqueue_style( 'them_main', get_stylesheet_directory_uri().'/css/boilerplate.css' );
wp_enqueue_style( 'them_extra1', get_stylesheet_directory_uri().'/css/normalize.css' );
wp_enqueue_style( 'them_extra2', get_stylesheet_directory_uri().'/css/animate.css' );
wp_enqueue_style( 'them_extra3', get_stylesheet_directory_uri().'/css/component.css' );
wp_enqueue_style( 'them_extra4', get_stylesheet_directory_uri().'/css/home.css' );
wp_enqueue_style( 'them_extra5', get_stylesheet_directory_uri().'/css/landing_page.css' );
wp_enqueue_style( 'them_extra5', get_stylesheet_directory_uri().'/css/owl.carousel.css' );
wp_enqueue_style( 'them_extra5', get_stylesheet_directory_uri().'/css/owl.transitions.css' );
wp_enqueue_style( 'them_extra5', get_stylesheet_directory_uri().'/css/bootstrapTheme.css' );
}

// ******************* Include jQuery Properly ****************** //
function my_init() {


if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
wp_deregister_script('jquery');
wp_register_script('jquery', "http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js", false, '2.0.3', true);
wp_enqueue_script('jquery');

//load a JS file from by theme: js/theme.js
wp_enqueue_script('my_script2', get_bloginfo('template_url') . '/js/modernizr.custom.js', array('jquery'), '1.0',true);
wp_enqueue_script('my_script2', get_bloginfo('template_url') . '/js/script.js', array('jquery'), '1.0',true);
wp_enqueue_script('my_script2', get_bloginfo('template_url') . '/js/imagesloaded.js', array('jquery'), '1.0',true);
wp_enqueue_script('my_script2', get_bloginfo('template_url') . '/js/skrollr.js', array('jquery'), '1.0',true);
wp_enqueue_script('my_script2', get_bloginfo('template_url') . '/js/owl.carousel.js', array('jquery'), '1.0',true);
wp_enqueue_script('my_script2', get_bloginfo('template_url') . '/js/owl.carousel.min.js', array('jquery'), '1.0',true);
}

}
add_action('init','my_init');
?>




Answer

Okay, I've fixed the snippet.

Things I fixed:

  • Added jquery script
  • Added owlcarousel script and css after jquery
  • Closed JS brackets properly.

Suggestion:

Use the browser's console. f12 should open it and then it's easy to find the error.

Your code will rarely "just work", you need to know how to debug it (which is really easy in web development)

$(document).ready(function() {

  $("#owl-demo").owlCarousel({

    autoPlay: 3000, //Set AutoPlay to 3 seconds

    items: 4,
    itemsDesktop: [1199, 3],
    itemsDesktopSmall: [979, 3]

  });
}); // Notice there need to be two sets of closing brackets! One for the .ready and one for the carousel.
.grayscale {
  border: 0px solid black;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  /* For Webkit browsers */
  filter: gray;
  /* For IE 6 - 9 */
  -webkit-transition: all .6s ease;
  /* Transition for Webkit browsers */
}
.grayscale:hover {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  filter: none;
}
#owl-demo .owl-item {
  margin: 3px;
}
#owl-demo .owl-item img {
  display: block;
  width: 100%;
  height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.js"></script>

<div id="owl-demo">


  <div class="owl-item grayscale" style="width: 293px;">
    <img src="http://lorempixel.com/200/200/technics/" alt="Owl Image">
  </div>
  <div class="owl-item grayscale" style="width: 293px;">
    <img src="http://lorempixel.com/200/200/technics/" alt="Owl Image">
  </div>
  <div class="owl-item grayscale" style="width: 293px;">
    <img src="http://lorempixel.com/200/200/technics/" alt="Owl Image">
  </div>
  <div class="owl-item grayscale" style="width: 293px;">
    <img src="http://lorempixel.com/200/200/technics/" alt="Owl Image">
  </div>
  <div class="owl-item grayscale" style="width: 293px;">
    <img src="http://lorempixel.com/200/200/technics/" alt="Owl Image">
  </div>
  <div class="owl-item grayscale" style="width: 293px;">
    <img src="http://lorempixel.com/200/200/technics/" alt="Owl Image">
  </div>
  <div class="owl-item grayscale" style="width: 293px;">
    <img src="http://lorempixel.com/200/200/technics/" alt="Owl Image">
  </div>
  <div class="owl-item grayscale" style="width: 293px;">
    <img src="http://lorempixel.com/200/200/technics/" alt="Owl Image">
  </div>

</div>

<script>
</script>

If you want to use a local copy of jquery, then replace

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

with

<script src="/pathtolocalcopy/jquery.min.js""></script>
Comments