猫头鹰旋转木马不工作，也许我连接错误的东西？
我试图在我的新项目中使用猫头鹰旋转木马。 我似乎遇到了问题。 到目前为止，只有HTML和CSS正在运行。 我在某种程度上做错了脚本。 有人可能借给我一只手，看看我指向正确的方向，我搞砸了吗？
这是该网站的链接。 Owl Carousel靠近网站的底部。 您将看到两个“合作伙伴”部分。 顶部只是演示HTML，底部是我尝试用来创建carouse。 我暂时只使用虚拟图像。 CloudPoint DIV站点
这是我从中获取代码的网站。 猫头鹰旋转木马演示
以下是代码的一些代码段。 如果您需要任何进一步的细节，我会尽力提供。
$(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; }
$(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' => '', 'before_title' => '', 'after_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'); ?>
问题是您需要将“item”指定为1才能响应，
这是工作代码
$(".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 } }, });
好的，我已经修好了片段。
我修的东西：
- 添加了jquery脚本
- 在 jquery 之后添加了owlcarousel脚本和css
- 正确关闭JS括号。
建议：
使用浏览器的控制台。 f12应该打开它然后很容易找到错误。
您的代码很少“只是工作”，您需要知道如何调试它（这在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; }
此外，如果您计划根据响应屏幕尺寸限制项目编号，则可以使用
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 } },