猫头鹰旋转木马不工作，也许我连接错误的东西？ [英] Owl carousel not working, maybe I linked something incorrectly?
本文介绍了猫头鹰旋转木马不工作，也许我连接错误的东西？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图在我的新项目中使用猫头鹰旋转木马。我似乎遇到了问题。到目前为止，只有HTML和CSS正在运行。我在某种程度上做错了脚本。有人可以借给我一个看看并指出我在正确的方向上我搞砸了吗？
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?
这是该网站的链接。 Owl Carousel靠近网站的底部。您将看到两个合作伙伴部分。顶部只是演示HTML，底部是我尝试用来创建carouse。我暂时只使用虚拟图像。 CloudPoint DIV网站
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');
?>
推荐答案
问题是您需要将item指定为1才能响应，
The problem is you need to specify "item" as 1 to work in response,
这是工作代码
$(".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
}
},
});
这篇关于猫头鹰旋转木马不工作，也许我连接错误的东西？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
