Javascript 猫头鹰传送带不起作用，也许我链接错误？

Question

提问by Tyrii

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 和 CSS 可以工作。我不知何故对脚本做错了。有人可能会帮我看看并指出我正在搞砸的正确方向吗？

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

这是网站的链接。Owl Carousel 靠近网站底部。您将看到两个“合作伙伴”部分。顶部只是演示 HTML，底部是我试图用来创建 carouse 的内容。我暂时只是使用虚拟图像。CloudPoint DIV 站点

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

回答by DanielST

Okay, I've fixed the snippet.

好的，我已经修复了片段。

Things I fixed:

我修复的东西：

Added jquery script
Added owlcarousel script and css afterjquery
Closed JS brackets properly.

添加了 jquery 脚本
在jquery之后添加 owlcarousel 脚本和 css
正确关闭 JS 括号。

Suggestion:

建议：

Use the browser's console. f12 should open it and then it's easy to find the error.

使用浏览器的控制台。f12 应该打开它，然后很容易找到错误。

Your code will rarely "just work", you need to know how to debug it (which is really easy in web development)

您的代码很少会“正常工作”，您需要知道如何调试它（这在 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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.js"></script>

<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>
</script>

If you want to use a local copy of jquery, then replace

如果要使用jquery的本地副本，则替换

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

with

和

<script src="/pathtolocalcopy/jquery.min.js""></script>

Answer 2

回答by Arshad M

The problem is you need to specify "item" as 1 to work in response,

问题是您需要将“item”指定为 1 才能响应，

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 3

回答by Mr Megamind

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

Answer 4

回答by Chandrashekhar Singh

When You are using jquery 3 then change in your owl carousel js

当您使用 jquery 3 时，请更改您的 owl carousel js

Fixed by change "andSelf" to "addBack" inside Owlcarousel code.

通过在 Owlcarousel 代码中将“andSelf”更改为“addBack”来修复。

Javascript 猫头鹰传送带不起作用，也许我链接错误？

提问by Tyrii

回答by DanielST

回答by Arshad M

回答by Mr Megamind

回答by Chandrashekhar Singh

相关推荐

最近更新

标签

Javascript 猫头鹰传送带不起作用，也许我链接错误？

提问by Tyrii

回答by DanielST

回答by Arshad M

回答by Mr Megamind

回答by Chandrashekhar Singh

相关推荐

Javascript 玩笑窥探功能

Javascript 通过 css 移除所有悬停效果

Javascript 不同时区的Javascript DateFormat

Javascript 为什么我的模态不起作用？引导程序4

相关推荐

最近更新

标签