Owl carousel not working, maybe I linked something incorrectly?

Question

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 1

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
            }
        },
  });

Answer 2

in addition if you are planning to do restricting the items number as per responsive screen sizes you can use

        responsive : {
            480 : { items : 4  }, // from zero to 480 screen width 4 items
            768 : { items : 6  }, // from 480 screen widthto 768 6 items
            1024 : { items : 8   // from 768 screen width to 1024 8 items
            }
        },