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

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

吸收边框宽度,或将边框放在幻灯片内的内容上.

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

解决方法

相关文章