Question

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, 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>

Answer 1

我使用其中一个属性

初始化滑块

variableWidth: true,

然后我可以将幻灯片的宽度设置为CSS中我想要的任何内容：

.slick-slide
{
width: 200px;
}

Answer 2

我制作了这个插件。发生了一些css干扰。

它是滑块本身的边框。使用

box-sizing: border-box

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

Answer 3

基本上你需要编辑JS并添加（在这种情况下，在$('#featured-articles').slick({内），这个：

variableWidth: true,

这将允许您在CSS中编辑宽度，通常使用：

.slick-slide {
    width: 100%;
}

或在这种情况下：

.featured {
    width: 100%;
}

Answer 4

我自己找到了很好的解决方案。由于如今光滑的滑块仍在使用，我将发布我的方法。

@RuivBoas的答案部分正确。 -它可以更改幻灯片的宽度，但会损坏滑块。 为什么？

光滑的滑块可能超过了浏览器的宽度。设置实际容器宽度可以容纳所有幻灯片的价值。

设置幻灯片宽度的最佳解决方案是使用实际浏览器窗口的宽度。它最适合响应式设计。

例如2张具有吸收宽度的幻灯片

CSS

.slick-slide {
    width: 50vw;
    // for absorbing width from @Ken Wheeler answer
    box-sizing: border-box;
}

JS

$(document).on('ready', function () {
            $("#container").slick({
                variableWidth: true,
                slidesToShow: 2,
                slidesToScroll: 2
            });
        });

HTML标记

<div id="container">
    <div><img/></div>
    <div><img/></div>
    <div><img/></div>
</div>

Answer 5

我知道已经有一个答案，但是我刚刚找到了使用 variableWidth 参数的更好的解决方案，只需在每个断点的设置中将其设置为true，就像这样：

$('#featured-articles').slick({
  arrows: true,
  autoplay: true,
  autoplaySpeed: 3000,
  dots: true,
  draggable: false,
  fade: true,
  infinite: false,
  responsive: [
  {
    breakpoint: 620,
    settings: {
        arrows: true,
        variableWidth: true
    }
  },
  {
    breakpoint: 345,
    settings: {
        arrows: true,
        variableWidth: true
    }
  }
  ]
});

Answer 6

您也可以使用此：

$('.slider').slick({
   //other settings ................
   respondTo: 'slider', //makes the slider to change width depending on the container it is in
   adaptiveHeight: true //makes the height change depending on the height of the element inside
})

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

6 个答案: