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.
<?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.' ></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');
?>
The problem is you need to specify "item" as 1 to work in response,
Here is the working code
$(".owl-carousel").owlCarousel({
autoPlay: 3000,
items : 1, // THIS IS IMPORTANT
responsive : {
480 : { items : 1 }, // from zero to 480 screen width 4 items
768 : { items : 2 }, // from 480 screen widthto 768 6 items
1024 : { items : 3 // from 768 screen width to 1024 8 items
}
},
});