{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 forever°为你锁心 的问题《Owl carousel not working, maybe I linked something》','https://www.manongdao.com/q-535895.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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.' ></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
in addition if you are planning to do restricting the items number as per responsive screen sizes you can use
Okay, I've fixed the snippet.
Things I fixed:
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)
If you want to use a local copy of jquery, then replace
with