http://kenwheeler.github.io/slick/
一位朋友建议我使用肯·惠勒的圆滑旋转木马,我决定试一试。我有几个问题。首先,幻灯片不会像它们应该的那样“相互重叠”。它们是垂直堆放的。当第一张幻灯片淡入时,它位于正确的位置,但是,当第二张幻灯片淡入时,它位于第一张幻灯片所在位置的下方。还要注意,在第一张幻灯片上,右边框被切断,在第二张幻灯片上,除左边框外的所有内容都被切断
第二个问题是,我似乎无法改变幻灯片的宽度或高度。它们都是相同的维度。(它们在我的css文件中的“特色”类中设置。)
我做错了什么
<;?xml version=“1.0”encoding=“UTF-8”?>;
<;!DOCTYPE html PUBLIC“-//W3C//DTD XHTML 1.0 Strict//EN”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>;
<;html xmlns=”http://www.w3.org/1999/xhtml“xml:lang=“en”lang=“en”>;
<;头>;
<;标题>;BaseCMD::Home</标题>;
<;meta name=“description”content=“如果它与视频游戏相关,您可以在此处找到它。”/>;
<;meta name=“keywords”content=“视频游戏、微软、xbox、xbox 360、xbox one、索尼、playstation、任天堂、wii、wii u、ds、联盟、控制台、平台、评论、资源、玩家、团队、论坛、服务器、博客、基本命令、basecmd”/>;
<;链接href=”http://localhost/basecommand/css/960.css“rel=“stylesheet”type=“text/css”/>;
<;链接href=”http://localhost/basecommand/css/style.css“rel=“stylesheet”type=“text/css”/>;
<;链接href=”http://localhost/basecommand/css/foundation-icons.css“rel=“stylesheet”type=“text/css”/>;
<;链接href=”http://localhost/basecommand/css/slick.css“rel=“stylesheet”type=“text/css”/>;
<;script type=“text/javascript”src=”https://code.jquery.com/jquery-1.11.0.min.js“></脚本>;
<;script type=“text/javascript”src=”https://code.jquery.com/jquery-migrate-1.2.1.min.js“></脚本>;
<;脚本src=”http://localhost/basecommand/js/global.js“></脚本>;
<;脚本src=”http://localhost/basecommand/js/slick.min.js“></脚本>;
</头>;
<;车身>;
<;h1>;顶级故事</h1>;
<;脚本>;
$(文档).ready(函数(){
$(“#特色文章”).slick({
箭头:是的,
自动播放:对,
自动播放速度:3000,
点:是的,
可拖动:错误,
是的,
无限:错,
响应:[
{
断点:620,
设置:{
箭头:对
}
},
{
断点:345,
设置:{
箭头:对
}
}
]
});
});
</脚本>;
<;div id=“特色文章”>;
<;div class=“featured”style=“背景:url(附件/56da367f9e7a66952fd1ed2e79b4b317.jpg);”>;
<;h1>;另一篇测试文章</h1>;
<;p class=“info”>;https://www.bungie.net/pubassets/1319/Destiny_31.png
我的同僚们,我的同僚们,我的同僚们,我的同僚们,我的同僚们,我的同僚们,我的同僚们,我的同僚们,我的同僚们,我的同僚们。海剧本的鼻祖前,自由fastidii ea duo。Id vim nobis选项内容,表示遗嘱。海上自由贸易…</p>;
<;h2>&书信电报;a href=”http://localhost/basecommand/index.php/articles/Another-Test-Article/5“>;阅读更多</a></h2>;
</部门>;
<;div class=“featured”style=“背景:url(附件/4e683defc6aba497f347b08ac05edb14.jpg);”>;
<;h1>;这是一篇测试文章</h1>;
<;p class=“info”>;https://www.bungie.net/pubassets/1319/Destiny_31.png
我的同僚们,我的同僚们,我的同僚们,我的同僚们,我的同僚们,我的同僚们,我的同僚们,我的同僚们,我的同僚们,我的同僚们。海剧本的鼻祖前,自由fastidii ea duo。Id vim nobis选项内容,表示遗嘱。海上自由贸易…</p>;
<;h2>&书信电报;a href=”http://localhost/basecommand/index.php/articles/This-Is-a-Test-Article/1“>;阅读更多</a></h2>;
</部门>;
</部门>;
我使用以下属性之一初始化滑块:
可变宽度:真
然后,我可以使用以下工具将幻灯片的宽度设置为CSS中我想要的任何宽度:
。光滑的幻灯片{
宽度:200px;
}