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>
The answer is
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
})
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%;
}
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
}
}
]
});
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;
}
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>
Source: Stackoverflow.com