如何在Slick Carousel上更改幻灯片的宽度和高度？

Question

一位朋友建议我使用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, 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/This-Is-a-Test-Article/1">Read More</a></h2>       
                </div>

            </div>

Run Code Online (Sandbox Code Playgroud)

幻灯片1 幻灯片2