jQuery 如何更改 Slick Carousel 上幻灯片的宽度和高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23273506/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I change the width and height of slides on Slick Carousel?
提问by ShoeLace1291
http://kenwheeler.github.io/slick/
http://kenwheeler.github.io/slick/
A friend suggested that I use Ken Wheeler's Slick carousel and I decided to give it a try. I am having a couple of problems with it. The first is that the slides don't load "on top of each other" like they should. They are stacked vertically. When the first slide fades in, it is in the correct spot, however, when the second slide fades in, it is below where the first slide was. Also notice that on the first slide the right border is cut off and on the second slide everything besides the left border is cut off.
一位朋友建议我使用 Ken Wheeler 的 Slick carousel，我决定尝试一下。我有几个问题。首先是幻灯片不会像它们应该的那样“在彼此之上”加载。它们垂直堆叠。当第一张幻灯片淡入时，它位于正确的位置，但是，当第二张幻灯片淡入时，它位于第一张幻灯片所在的位置下方。另请注意，在第一张幻灯片上，右边框被切断，而在第二张幻灯片上，除左边框之外的所有内容都被切断了。
The second problem is that I can't seem to change the width or height of the slides. They would all be the same dimensions. (They are set in my css file in the "featured" class.)
第二个问题是我似乎无法更改幻灯片的宽度或高度。它们都是相同的尺寸。（它们设置在“特色”类的我的 css 文件中。）
What am I doing wrong?
我究竟做错了什么？
<?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>
回答by nicksmith
I initialised the slider with one of the properties as
我使用以下属性之一初始化滑块
variableWidth: true
then i could set the width of the slides to anything i wanted in CSS with:
然后我可以在 CSS 中将幻灯片的宽度设置为我想要的任何内容：
.slick-slide {
width: 200px;
}
回答by Ken Wheeler
I made this plugin. There is some css interference taking place.
我做了这个插件。发生了一些 css 干扰。
It's your border on the slider itself. Either use
这是滑块本身的边框。要么使用
box-sizing: border-box
to absorb the border width, or put the border on the content inside the slide.
吸收边框宽度，或将边框放在幻灯片内的内容上。
回答by RuiVBoas
Basically you need to edit the JS and add (in this case, inside $('#featured-articles').slick({), this:
基本上你需要编辑 JS 并添加（在这种情况下，在里面$('#featured-articles').slick({），这个：
variableWidth: true,
This will allow you to edit the width in your CSS where you can, generically use:
这将允许您在 CSS 中编辑宽度，通常使用：
.slick-slide {
width: 100%;
}
or in this case:
或者在这种情况下：
.featured {
width: 100%;
}
回答by Bartosz Was
I found good solution myself. Since slick slider is still used nowadays i'll post my approach.
我自己找到了很好的解决方案。由于现在仍然使用光滑的滑块，因此我将发布我的方法。
@RuivBoas answer is partly correct. - It can change the width of the slide but it can break the slider. Why?
@RuivBoas 的回答部分正确。- 它可以改变幻灯片的宽度，但它可以打破滑块。为什么？
Slick slider may exceed browser width. Actual container width is set to value that can accomodate all it's slides.
光滑的滑块可能会超出浏览器宽度。实际容器宽度设置为可以容纳所有幻灯片的值。
The best solution for setting slide width is to use width of the actual browser window. It works best with responsive design.
设置幻灯片宽度的最佳解决方案是使用实际浏览器窗口的宽度。它最适合响应式设计。
For example 2 slides with absorbed width
例如 2 张吸收宽度的幻灯片
CSS
CSS
.slick-slide {
width: 50vw;
// for absorbing width from @Ken Wheeler answer
box-sizing: border-box;
}
JS
JS
$(document).on('ready', function () {
$("#container").slick({
variableWidth: true,
slidesToShow: 2,
slidesToScroll: 2
});
});
HTML markup
HTML 标记
<div id="container">
<div><img/></div>
<div><img/></div>
<div><img/></div>
</div>
回答by jacm365
I know there is already an answer to this but I just found a better solution using the variableWidthparameter, just set it to true in the settings of each breakpoint, like this:
我知道已经有一个答案，但我刚刚找到了一个使用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
}
}
]
});
回答by roskaboska420
You could also use this:
你也可以使用这个：
$('.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
})
