Il carosello del gufo non funziona, forse ho collegato qualcosa in modo errato?

Sto cercando di usare il carosello del gufo nel mio nuovo progetto. Mi sembra di avere un problema con esso. Finora solo l’HTML e il CSS stanno funzionando. In qualche modo sto facendo qualcosa di sbagliato con lo script. Qualcuno potrebbe prestarmi una mano e dare un’occhiata e indicarmi la direzione giusta in cui sto rovinando?

Ecco un link al sito. The Owl Carousel è vicino alla parte inferiore del sito web. Vedrai due sezioni “partner”. La parte superiore è solo la demo HTML, e la parte inferiore è ciò che sto cercando di usare per creare il carouse. Sto solo usando immagini fittizie per il momento. Sito DIV CloudPoint

Ecco il sito da cui ho preso il codice. Demo Carousel Demo

Ecco alcuni frammenti del codice. Se hai bisogno di ulteriori dettagli, farò del mio meglio per fornirli.

 $(document).ready(function() { $("#owl-demo").owlCarousel({ autoPlay: 3000, //Set AutoPlay to 3 seconds items : 4, itemsDesktop : [1199,3], itemsDesktopSmall : [979,3] });  
 .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; } 
 
Owl Image
Owl Image
Owl Image
Owl Image
Owl Image
Owl Image
Owl Image
Owl Image
$(document).ready(function() { $("#owl-demo").owlCarousel({ autoPlay: 3000, //Set AutoPlay to 3 seconds items : 4, itemsDesktop : [1199,3], itemsDesktopSmall : [979,3] });

 _('CloudPoint Right Sidebar'), 'id' => 'right-sidebar', 'description' =>_('widgets in this area will be shown on the right-hand side.'), 'before_widget' => '
', 'after_widget' => '
', 'before_title' => '', )); } // ******************* 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 '...Read More >'; } 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 = '

'.$output.'

'; 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 = '
'.$content.' '.$link_title.' >
'; 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'); ?>

Il problema è che devi specificare “elemento” come 1 per lavorare in risposta,

Ecco il codice funzionante

 $(".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 } }, }); 

Ok, ho corretto lo snippet.

Cose che ho risolto:

  • Aggiunto script jquery
  • Aggiunto script owlcarousel e css dopo jquery
  • Squadre JS chiuse correttamente.

Suggerimento:

Usa la console del browser. f12 dovrebbe aprirlo e quindi è facile trovare l’errore.

Il tuo codice raramente “funziona”, devi sapere come eseguirne il debug (che è davvero facile nello sviluppo web)

 $(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; } 
    
Owl Image
Owl Image
Owl Image
Owl Image
Owl Image
Owl Image
Owl Image
Owl Image

Inoltre, se si prevede di limitare il numero degli articoli in base alle dimensioni dello schermo reattivo, è ansible utilizzarlo

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