http://kenwheeler.github.io/slick/
一位朋友建议我使用Ken Wheeler的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">
<head>
<title>BaseCMD :: Home</title>
<Meta name="description" content="If it\s related to video games,you can find it here." />
<Meta name="keywords" content="video games,microsoft,xBox,xBox 360,xBox one,sony,playstation,nintendo,wii,wii u,ds,league,console,platform,reviews,resources,players,teams,forums,servers,blog,base command,basecmd" />
<link href="http://localhost/basecommand/css/960.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/basecommand/css/style.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/basecommand/css/foundation-icons.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/basecommand/css/slick.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://localhost/basecommand/js/global.js"></script>
<script src="http://localhost/basecommand/js/slick.min.js"></script>
</head>
<body>
<h1>Top Stories</h1>
<script>
$(document).ready(function(){
$('#featured-articles').slick({
arrows: true,autoplay: true,autoplaySpeed: 3000,dots: true,draggable: false,fade: true,infinite: false,responsive: [
{
breakpoint: 620,settings: {
arrows: true
}
},{
breakpoint: 345,settings: {
arrows: true
}
}
]
});
});
</script>
<div id="featured-articles">
<div class="featured" style="background: url(attachments/56da367f9e7a66952fd1ed2e79b4b317.jpg);">
<h1>Another Test Article</h1>
<p class="info">https://www.bungie.net/pubassets/1319/Destiny_31.png
Lorem ipsum dolor sit amet,inani accusata et duo,ad sit veniam interpretaris. Sea scripta nostrum ex,liber fastidii ea duo. Id vim nobis option contentiones,mea probatus praesent ut. Sea ex libri...</p>
<h2><a href="http://localhost/basecommand/index.PHP/articles/Another-Test-Article/5">Read More</a></h2>
</div>
<div class="featured" style="background: url(attachments/4e683defc6aba497f347b08ac05edb14.jpg);">
<h1>This Is a Test Article</h1>
<p class="info">https://www.bungie.net/pubassets/1319/Destiny_31.png
Lorem ipsum dolor sit amet,mea probatus praesent ut. Sea ex libri...</p>
<h2><a href="http://localhost/basecommand/index.PHP/articles/This-Is-a-Test-Article/1">Read More</a></h2>
</div>
</div>
解决方法
我做了这个插件.发生了一些css干扰.
它是滑块本身的边框.要么使用
Box-sizing: border-Box
吸收边框宽度,或将边框放在幻灯片内的内容上.