WordPressLeaf主题如何利用jQuery插件slick增加幻灯片滚动功能

WordPressLeaf主题如何利用jQuery插件slick增加幻灯片滚动功能

WordPressLeaf主题如何利用jQuery插件slick增加幻灯片滚动功能

导语:本来WordPressLeaf主题的首页幻灯片是没有滚动功能的,主要是我们以为这个滚来滚去晃人眼睛,就没有增加。但在最近发现,网友们看文章只看眼皮底下的,明明第二张幻灯片文章就是主题的安装设置步骤,可就是看不到。

如何增加幻灯片滚动功能

其实增加起来也很方便,WordPressLeaf主题使用了jQuery响应式幻灯片图片切换特效,所以在增加的时候只要增加相应的参数就可以了。

正常需要加载的文件

<script src="http://static.estory365.com/wp-includes/js/jquery/jquery.js?ver=1.12.4" type="text/javascript"></script>
<script src="http://static.estory365.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1" type="text/javascript"></script>
<script src="http://static.estory365.com/wp-includes/js/jquery/slick.js?ver=1.4.1" type="text/javascript"></script>

使用时HTML内容

你可以查看本站幻灯片的HTML代码,我在这里就不贴出来了。

javascript函数调用

<script type="text/javascript">
  jQuery(document).ready(function(){
    "use strict";
    jQuery(".<?php echo $slider_class; ?>").slick({
      rtl: <?php echo $slick_rtl; ?>,
      slidesToShow: 1,
      slidesToScroll: 1,
      draggable: true,
      dots : true,
      arrows : false,
      autoplay: true,
      autoplaySpeed: 2000
    });
  });
</script>

至于那些参数是什么意思?有没有更多的参数?你可以去在网络上搜索一下。

加完代码之后,WordPressLeaf主题首页幻灯片滚动就可以滚动起来了。

你可以点击 演示获得更多的代码演示。

结束

我们已经在github上更新了WordPressLeaf主题的最新版本,版本号为1.0.5。你可以访问这里来获得最新的版本和更新信息。

编辑 杨

我们是一群WordPress的爱好者,爱它的简单快捷,爱它的变化多样。

或许您还喜欢下面的文章

2 条评论

  1. lee
    2016-09-02 在 15:51
    回复

    具体怎么加 不是太明白

    • 编辑 杨
      2016-09-04 在 09:35
      回复

      这个不用你加,这是给开发者的,你如果是使用者直接下载新版本使用就可以了。

留下一条回复

关闭