jjzjj

javascript - Owl Carousel 不工作,也许我链接不正确?

coder 2023-08-10 原文

我想在我的新项目中使用 Owl Carousel 。我似乎对此有疑问。到目前为止,只有 HTML 和 CSS 可以正常工作。我不知何故在脚本上做错了什么。有人可以帮我看看,并指出我搞砸的正确方向吗?

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

这是我从中获取代码的网站。 Owl Carousel Demo

这里是一些代码片段。如果您需要任何进一步的详细信息,我会尽力提供。

<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');
?>

最佳答案

问题是您需要将“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
            }
        },
  });

关于javascript - Owl Carousel 不工作,也许我链接不正确?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28070885/

有关javascript - Owl Carousel 不工作,也许我链接不正确?的更多相关文章

  1. ruby-on-rails - 由于 "wkhtmltopdf",PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中,我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  2. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗?当我运行compasswatch时,它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行?文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们?我自己编译的.sass文件编译成compiled/t

  3. ruby-on-rails - 如何使用 instance_variable_set 正确设置实例变量? - 2

    我正在查看instance_variable_set的文档并看到给出的示例代码是这样做的:obj.instance_variable_set(:@instnc_var,"valuefortheinstancevariable")然后允许您在类的任何实例方法中以@instnc_var的形式访问该变量。我想知道为什么在@instnc_var之前需要一个冒号:。冒号有什么作用? 最佳答案 我的第一直觉是告诉你不要使用instance_variable_set除非你真的知道你用它做什么。它本质上是一种元编程工具或绕过实例变量可见性的黑客攻击

  4. ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2

    我花了三天的时间用头撞墙,试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上,从现在开始,您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

  5. ruby-on-rails - rspec should have_select ('cars' , :options => ['volvo' , 'saab' ] 不工作 - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗?通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request

  6. ruby-on-rails - s3_direct_upload 在生产服务器中不工作 - 2

    在Rails4.0.2中,我使用s3_direct_upload和aws-sdkgems直接为s3存储桶上传文件。在开发环境中它工作正常,但在生产环境中它会抛出如下错误,ActionView::Template::Error(noimplicitconversionofnilintoString)在View中,create_cv_url,:id=>"s3_uploader",:key=>"cv_uploads/{unique_id}/${filename}",:key_starts_with=>"cv_uploads/",:callback_param=>"cv[direct_uplo

  7. ruby-on-rails - 正确的 Rails 2.1 做事方式 - 2

    question的一些答案关于redirect_to让我想到了其他一些问题。基本上,我正在使用Rails2.1编写博客应用程序。我一直在尝试自己完成大部分工作(因为我对Rails有所了解),但在需要时会引用Internet上的教程和引用资料。我设法让一个简单的博客正常运行,然后我尝试添加评论。靠我自己,我设法让它进入了可以从script/console添加评论的阶段,但我无法让表单正常工作。我遵循的其中一个教程建议在帖子Controller中创建一个“评论”操作,以添加评论。我的问题是:这是“标准”方式吗?我的另一个问题的答案之一似乎暗示应该有一个CommentsController参

  8. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时,我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有,我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  9. ruby - 我可以将我的 README.textile 以正确的格式放入我的 RDoc 中吗? - 2

    我喜欢使用Textile或Markdown为我的项目编写自述文件,但是当我生成RDoc时,自述文件被解释为RDoc并且看起来非常糟糕。有没有办法让RDoc通过RedCloth或BlueCloth而不是它自己的格式化程序运行文件?它可以配置为自动检测文件后缀的格式吗?(例如README.textile通过RedCloth运行,但README.mdown通过BlueCloth运行) 最佳答案 使用YARD直接代替RDoc将允许您包含Textile或Markdown文件,只要它们的文件后缀是合理的。我经常使用类似于以下Rake任务的东西:

  10. ruby-on-rails - 使用 config.threadsafe 时从 lib/加载模块/类的正确方法是什么!选项? - 2

    我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常,直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co

随机推荐