web-dev-qa-db-ja.com

フクロウカルーセルが機能していません。何かを正しくリンクしていませんか？

私は新しいプロジェクトでフクロウカルーセルを使用しようとしています。問題が発生しているようです。これまでのところ、HTMLとCSSのみが機能しています。どういうわけか、スクリプトで問題が発生しています。誰かが私に手を貸して見て、私がめちゃくちゃになっている正しい方向に私を向けることができますか？

ここにウェブサイトへのリンクがあります。フクロウカルーセルはウェブサイトの下部にあります。 2つの「パートナー」セクションが表示されます。上部は単なるデモHTMLで、下部はカルースを作成するために使用しようとしているものです。とりあえずダミー画像を使っています。 CloudPoint DIVサイト

これは私がコードを入手したウェブサイトです。 フクロウカルーセルデモ

これがコードの一部です。さらに詳しい情報が必要な場合は、最善を尽くして提供します。

<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');
?>
javascriptjqueryhtmlowl-carousel
5
Tyrii

問題は、「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
            }
        },
  });
7
Arshad M

はい、スニペットを修正しました。

私が修正したもの：

  • Jqueryスクリプトを追加
  • Owlcarouselスクリプトとcss after jqueryを追加しました
  • JSブラケットを適切に閉じました。

提案：

ブラウザのコンソールを使用します。 f12がそれを開くはずなので、エラーを見つけるのは簡単です。

あなたのコードはめったに「機能しない」でしょう、あなたはそれをデバッグする方法を知る必要があります（これはウェブ開発では本当に簡単です）

$(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>

Jqueryのローカルコピーを使用する場合は、

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

と

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

さらに、使用できるレスポンシブ画面サイズごとにアイテム数を制限することを計画している場合

        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
            }
        },
2
Mr Megamind

Jquery 3を使用している場合は、フクロウカルーセルjsを変更します

Owlcarouselコード内の「andSelf」を「addBack」に変更することで修正されました。

1
Chandrashekhar Singh