How can I change the width and height of slides on

2020-02-02 11:59发布

站内问答 / jQuery
811 6 5

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.

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.)

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>

Slide 1 Slide 2

6条回答
家丑人穷心不美
2楼-- · 2020-02-02 12:10

I made this plugin. There is some css interference taking place.

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.

查看更多
0人赞 添加讨论(0) 举报
干净又极端
3楼-- · 2020-02-02 12:10

Basically you need to edit the JS and add (in this case, inside $('#featured-articles').slick({ ), this:

variableWidth: true,

This will allow you to edit the width in your CSS where you can, generically use:

.slick-slide {
    width: 100%;
}

or in this case:

.featured {
    width: 100%;
}
查看更多
0人赞 添加讨论(0) 举报
傲
4楼-- · 2020-02-02 12:11

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:

.slick-slide
{
width: 200px;
}
查看更多
0人赞 添加讨论(0) 举报
Melony?
5楼-- · 2020-02-02 12:19

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
})
查看更多
0人赞 添加讨论(0) 举报
看我几分像从前
6楼-- · 2020-02-02 12:28

I know there is already an answer to this but I just found a better solution using the variableWidth parameter, just set it to true in the settings of each breakpoint, like this:

$('#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
    }
  }
  ]
});
查看更多
0人赞 添加讨论(0) 举报
Bombasti
7楼-- · 2020-02-02 12:37

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?

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

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 markup

<div id="container">
    <div><img/></div>
    <div><img/></div>
    <div><img/></div>
</div>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)