2017-04-03 96 views
0

我正在建立一个Wordpress网站,并且第一次使用自定义轮播。我从这个codepen中找到了这个想法。Wordpress自定义插件

http://codepen.io/supah/pen/zZaPeE

我是导致这一回购

https://github.com/kenwheeler/slick

我遵循的指示,并把这个样式表在 在header.php中。

和这个脚本标记在关闭主体之前。

和NPM上安装终端光滑的轮播,并呼吁元素main.js,但它仍然无法正常工作,甚至当我跟着HTML结构放在幻灯片。我错过了什么?我希望我的结果看起来完全像codepen。

<div data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'> 
    <div><h3>1</h3></div> 
    <div><h3>2</h3></div> 
    <div><h3>3</h3></div> 
    <div><h3>4</h3></div> 
    <div><h3>5</h3></div> 
    <div><h3>6</h3></div> 
</div> 

谢谢你的帮忙!

回答

0

首先,Slick requires JQuery,所以确保你也有它。

如果这不是问题,我使用Slick的方式是通过在元素中使用类或id来制作caroussel,然后在页面末尾的脚本标记中使用slick功能。

所以,如果你的那个格结构有类油滑DIV,

$(document).ready(function(){ 
    $('.slick-div').slick({ 
     slidesToShow: 4, 
     slidesToScroll: 4 
    }); 
});