Login/Register
How can I change the width and height of slides on Slick Carousel?
Asked Answered
Solved jquerycarouselslick.js
M

6

36

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

Michaella answered 24/4, 2014 at 15:36 Comment(0)
P
39

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.

Poliomyelitis answered 26/4, 2014 at 14:17 Comment(3)
Ok, so getting rid of the border solved the stacking issue... but how would I change the dimensions of the actual slide? I have it set in my css file, but that doesn't seem to do anything. – Michaella
What was the correct answer here? I am setting the slide width in the CSS, but the inline style from the js is overriding it as if it is ignored. – Interrogative
can you help? from where this is generation '<div class="course-box-wrap slick-slide slick-current slick-active" style="width: 221px;"' this inline width is generating automatically as inline, i need to make it something bigger – Sjoberg
T
98

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;
}
Trial answered 19/3, 2015 at 13:6 Comment(0)
P
39

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.

Poliomyelitis answered 26/4, 2014 at 14:17 Comment(3)
Ok, so getting rid of the border solved the stacking issue... but how would I change the dimensions of the actual slide? I have it set in my css file, but that doesn't seem to do anything. – Michaella
What was the correct answer here? I am setting the slide width in the CSS, but the inline style from the js is overriding it as if it is ignored. – Interrogative
can you help? from where this is generation '<div class="course-box-wrap slick-slide slick-current slick-active" style="width: 221px;"' this inline width is generating automatically as inline, i need to make it something bigger – Sjoberg
F
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%;
}
Formic answered 1/12, 2017 at 11:41 Comment(0)
S
4

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>
Suanne answered 28/8, 2018 at 17:2 Comment(0)
S
3

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
})
Swartz answered 24/7, 2019 at 7:6 Comment(0)
S
1

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
    }
  }
  ]
});
Steno answered 14/1, 2019 at 22:12 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.