关于jquery：如何更改Slick Carousel上幻灯片的宽度和高度？


How can I change the width and height of slides on Slick Carousel?

http://kenwheeler.github.io/slick/

一个朋友建议我使用Ken Wheeler的Slick传送带，因此决定尝试一下。我有一些问题。首先是幻灯片不会像应该的那样"彼此叠放"。它们垂直堆叠。当第一张幻灯片淡入时，它在正确的位置，但是，当第二张幻灯片淡入时，它在第一张幻灯片的下方。另请注意，在第一张幻灯片上，右边框被切除，在第二张幻灯片上，除左边框之外的所有东西都被切除。

第二个问题是我似乎无法更改幻灯片的宽度或高度。它们都是相同的尺寸。 (它们在我的css文件的"功能"类中设置。)

我在做什么错？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<?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>
    BaseCMD :: Home
    <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 type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js">
    <script src="http://localhost/basecommand/js/global.js">
    <script src="http://localhost/basecommand/js/slick.min.js">

</head>

 <body>

 Top Stories



$(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
    }
  }
  ]
});
});



           

               
                    Another Test Article
                    <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>

                    Read More    
               

               
                    This Is a Test Article
                    <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>
                    Read More

Slide

1
variableWidth: true

然后我可以使用以下方式将幻灯片的宽度设置为我想要的CSS宽度：

1
2
3
.slick-slide {
    width: 200px;
}

我做了这个插件。发生了一些CSS干扰。

这是滑块本身的边框。要么使用

1
box-sizing: border-box

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

相关讨论

基本上，您需要编辑JS并添加(在本例中，在$('#featured-articles').slick({内)以下内容：

1
variableWidth: true,

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

1
2
3
.slick-slide {
    width: 100%;
}

，或者在这种情况下：

1
2
3
.featured {
    width: 100%;
}

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

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

Slick slider may exceed browser width. Actual container width is set
to value that can accomodate all it's slides.

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

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

CSS

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

JS

1
2
3
4
5
6
7
$(document).on('ready', function () {
            $("#container").slick({
                variableWidth: true,
                slidesToShow: 2,
                slidesToScroll: 2
            });
        });

HTML标记

1
2
3
    <img/>
    <img/>
    <img/>

您也可以使用此：

1
2
3
4
5
$('.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
})

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$('#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
    }
  }
  ]
});