如何更改滑动转盘上幻灯片的宽度和高度?

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&lt/标题>
<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“&gt&lt/脚本>
<script type=“text/javascript”src=”https://code.jquery.com/jquery-migrate-1.2.1.min.js“&gt&lt/脚本>
<脚本src=”http://localhost/basecommand/js/global.js“&gt&lt/脚本>
<脚本src=”http://localhost/basecommand/js/slick.min.js“&gt&lt/脚本>
&lt/头>
<车身>
<h1>顶级故事&lt/h1>
<脚本>
$(文档).ready(函数(){
$(“#特色文章”).slick({
箭头:是的,
自动播放:对,
自动播放速度:3000,
点:是的,
可拖动:错误,
是的,
无限:错,
响应:[
{
断点:620,
设置:{
箭头:对
}
},
{
断点:345,
设置:{
箭头:对
}
}
]
});
});
&lt/脚本>
<div id=“特色文章”>
<div class=“featured”style=“背景:url(附件/56da367f9e7a66952fd1ed2e79b4b317.jpg);”>
<h1>另一篇测试文章&lt/h1>
<p class=“info”>https://www.bungie.net/pubassets/1319/Destiny_31.png
我的同僚们,我的同僚们,我的同僚们,我的同僚们,我的同僚们,我的同僚们,我的同僚们,我的同僚们,我的同僚们,我的同僚们。海剧本的鼻祖前,自由fastidii ea duo。Id vim nobis选项内容,表示遗嘱。海上自由贸易…&lt/p>
<h2&gt&书信电报;a href=”http://localhost/basecommand/index.php/articles/Another-Test-Article/5“>阅读更多&lt/a&gt&lt/h2>
&lt/部门>
<div class=“featured”style=“背景:url(附件/4e683defc6aba497f347b08ac05edb14.jpg);”>
<h1>这是一篇测试文章&lt/h1>
<p class=“info”>https://www.bungie.net/pubassets/1319/Destiny_31.png
我的同僚们,我的同僚们,我的同僚们,我的同僚们,我的同僚们,我的同僚们,我的同僚们,我的同僚们,我的同僚们,我的同僚们。海剧本的鼻祖前,自由fastidii ea duo。Id vim nobis选项内容,表示遗嘱。海上自由贸易…&lt/p>
<h2&gt&书信电报;a href=”http://localhost/basecommand/index.php/articles/This-Is-a-Test-Article/1“>阅读更多&lt/a&gt&lt/h2>
&lt/部门>
&lt/部门>

我使用以下属性之一初始化滑块:

可变宽度:真

然后,我可以使用以下工具将幻灯片的宽度设置为CSS中我想要的任何宽度:

。光滑的幻灯片{
宽度:200px;
}

发表评论