We Keep Coding

Add stationary text next to slick slider (using inline-block or flex messes up slider sizing)

Using Slick slider to make a changing/fading line of text. I want stationary text to the left of it and display the dynamic text to the right in the slider. When I try to use inline-block on both elements, the slider does not size down correctly to allow it to join the stationary text on the same line. When I use display: flex; on the .slider-container, it makes the slider be insanely wide and thus makes the .stationary text tiny, and doesn't allow it to resize even with flex-grow. Please advise!
See here (and comment/uncomment to see inline-block and flex behaviors:
( function( $ ) {
// Add slick slider
$('.slider').slick({
dots: false,
arrows: false,
infinite: true,
speed: 200,
fade: true,
cssEase: 'linear',
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1000
});
} )( jQuery );
/* INLINE-BLOCK: Does not allow slider to resize smaller */
.stationary, .slider {
display: inline-block;
}
/* FLEX: Results in extremely wide slider and crunches down the .stationary block */
/* .slider-container {
display: flex;
align-items: center;
}
.stationary {
flex-grow: 1;
} */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css" rel="stylesheet"/>
<div class="slider-container">
<div class="stationary">You can: </div>
<div class="slider">
<div class="item">do this</div>
<div class="item">make that</div>
<div class="item">win this</div>
<div class="item">give this</div>
</div>
</div>

So I tested out your code in JSFiddle and ran into the issues you presented, and it rattled by brain to find a truly dynamic solution but couldn't atm. However i did find a solution in which i just set a width on the slider and a max-width on the container.
You can see the Fiddle here with the solution using your code.
// Add slick slider
$('.slider').slick({
dots: false,
arrows: false,
infinite: true,
speed: 200,
fade: true,
cssEase: 'linear',
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1000
});
.slider-container {
display: flex;
justify-content: flex-start;
align-items: center;
max-width: 500px;
overflow: hidden;
}
.stationary {
flex-shrink: 0;
flex-grow: 1;
flex-basis: auto;
margin-right: 10px;
}
.slider {
flex-shrink: 1;
flex-grow: 0;
flex-basis: 100%;
text-align: left;
width: 200px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="slider-container">
<div class="stationary">You can: </div>
<div class="slider">
<div class="item">do this</div>
<div class="item">make that</div>
<div class="item">win this</div>
<div class="item">give this</div>
</div>
</div>
Additionally i'd ask, if you needed to use slick to accomplish that at all and would alternatively use a lighter weight approach as seen in this simple pure JS (jquery) based solution.
const answers = ['do this', 'make that', 'win this', 'give that'];
let activeIndex = 0;
$('.answer').text(answers[activeIndex]);
setInterval(() => {
if (activeIndex === answers.length) {
activeIndex = 0
} else {
activeIndex++
}
$('.answer').text(answers[activeIndex]);
}, 1500);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<h1>
You can: <span class="answer"></span>
</h1>
Lastly, there is already a plugin out there that I've used in the past to achieve what you're trying to do with minimal effort. It's called "Typed", here is their site https://mattboldt.com/demos/typed-js/.

Slick slider gets wrong width

My slick slider gets wrong width when initialized and when I change screen resolutions.
My js:
$('.slider').slick({
infinite: false,
speed: 300,
initialSlide: 1,
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 2
}
}, {
breakpoint: 650,
settings: {
initialSlide: 2,
slidesToShow: 1
}
}]
});
My css:
.sub-slider {
width: 100%;
display: flex;
flex-flow: column;
.slider {
display: flex;
flex-flow: row;
justify-content: center;
align-content: center;
align-items: center;
min-width:500px;
.sub-box {
text-align: center;
padding-top: 45px;
cursor:pointer;
.title {
color: #6deca0;
font-family: "AmsiProNarw", sans-serif;
font-size: 48px;
font-style: italic;
font-weight: 800;
}
.price {
color: #393939;
font-family: "AmsiProNarw", sans-serif;
font-size: 18px;
font-style: italic;
font-weight: 800;
}
.sub-slider-btn {
margin: 60px 20px;
border-color: #eaeaea!important;
background-color: #fdfdfd!important;
color: #686868!important;
}
}
.sub-box:hover {
transition: border .2s;
border-bottom: 14px solid #6deca0;
.sub-slider-btn{
border-color: #6deca0!important;
background-color: rgba(108,235,159,.2)!important;
color: #393939!important;
}
}
}
.sub-slider-confirmation-btn-wrp {
align-self: center;
display: none;
.sub-slider-confirmation-btn {
cursor:pointer;
$margin: 20px;
$height: 45px;
height: $height;
width: 80px;
border: 1px solid #ccc;
border-radius: 8px;
margin: $margin $margin $margin $margin;
text-align: center;
line-height: $height;
font-weight: 800;
}
}
}
This is how it is loaded, even though I have specified slidesToShow: 3.
Then when I change to resposive it looks like this:
I am not sure how to fix this. I have read through these, with no fix:
Slick slider wrong width on initialization
Slick carousel loads the wrong width on initialization
https://github.com/kenwheeler/slick/issues/790
https://github.com/kenwheeler/slick/issues/1180
https://github.com/kenwheeler/slick/issues/2167
edit:
I made a fiddle https://jsfiddle.net/simeydotme/fmo50w7n/
It seems to work in the fiddle, but not on my site. Maybe I inherit some bad css? But I've been trying to debug this for 5h now. And I cant find any solution..

I also encountered the same issue - slider track width too large upwards of 30,000px wide. After reading Spencer Rysman's answer, I reviewed my markup and realized that I had applied a row class to the div wrapping my slider and since I'm using bootstrap 4 the default display:flex property used with the row class was causing unexpected output with the slide elements.
Adding a col within the wrapping row div fixed the issue for me.
<div class="row">
<div class="col-12">
../slider markup
</div>
</div>
Although, this may not be directly related to the op's issue, I thought I'd post as other users may encounter a similar problem as I did and find this thread.

I have the same problem only on screens <768px with bootstrap4, slick (and owlCarousel) set width more then 10000px to there container. The issue was that's the bootstrap container (.container) does't have a width property <768px, set it to 100% resolve the problem.

Short Answer:
Make sure that your slick slider is inside of a container which is set as display: block

I had this same issue and was also dealing with some inherited bad css from stylesheets that I did not author. In my case I found 2 problems:
body had a declaration of display: table
.page (a page wrapper) had display: inline-block
So I would check to make sure that the slick slider is not nested inside of any element that is displayed as table or inline-block

On initial loading, slick will not take the width, in IOS - in few devides, if the internal content is heavy.
Its fixed for me by adding css max-width to slick-track
Check with following:
$(".slick-track").css("max-width", $(window).width());

I encountered the same issue and after attempting the above-mentioned to no avail. I revisited the docs and added this
variableWidth: true
to the javascript config block.
so your code looks like this
$('.slider').slick({
infinite: false,
speed: 300,
initialSlide: 1,
slidesToShow: 3,
slidesToScroll: 1,
variableWidth: true, <=== change here
dots: false,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 2
}
}, {
breakpoint: 650,
settings: {
initialSlide: 2,
slidesToShow: 1
}
}]
});

We can't always remove all container's display: flex and recode all CSS in page just to make a library work.
In my experience I found that the problem appears after this line:
_.$slideTrack.width(Math.ceil((_.slideWidth * _.$slideTrack.children('.slick-slide').length)));
in version 1.8.1, where the library sets .slick-track's width it seems that any flex container (any, not the direct container) will generate the issue.
I fixed forcing (and updating on window resize event) a fixed width to the slider main wrapper, that is the element where you instantiate your slider with $('#slider-wrap').slick(...), using this little Javascript snippet:
var $sliderwrap = $('#slider-wrap');
// fix for flex begins here ----
function setW() {
// use parent width, not always the right way
// change it if your $sliderwrap parent width
// does not match your $sliderwrap width
$sliderwrap.width($sliderwrap.parent().width());
}
setW();
window.addEventListener('resize', setW);
// end fix here ----
// instantiate the slider
$sliderwrap.slick(...);
I hope this can help anyone.

Don't use display: flex for the slick containter. It will cause problem on mobile.

main div container must be
display:block;
or
display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
minmax(0,1fr) is the way. Or a defined width (px, em,...). display:flex; is problem.

If any block thing works, add to your CSS file:
.slick-track {display: flex !important}
.slick-slide {height: auto;}

In my case I wanted to have at-least one entire slide always visible on both Desktop and Mobile. To do this I used the CSS vw property
.slick-slide,.slick-slide img {
max-width:90vw;
}

I got the same issue. To me the problem was caused by a (distant) parent of the slick block having the property display:grid. Turning it back to display:block fixed the problem for me.
So basically Slick shouldn't be even remotely contained in a flex or grid element.

Slick slider custom dots

I was wondering if there is a way to use custom slick slider dots. When I search, all I can finds is examples on how to change the dots into thumbnails from the slides, however this is not what I'm trying to accomplish. I just want to use my own png pictures for the active and non-active dot navigation. I tried this:
$('.slick-dots li').html('<img src="slide-dot.png" />');
$('.slick-dots li.slick-active').html('<img src="slide-dot-active.png" />');
But that didn't work, though I recall I did something like that before. Am I missing something here ?
Thanks!

This can be done when initializing slick as one of the options:
JS
$(".slider").slick({
dots: true,
customPaging : function(slider, i) {
return '<img src="slide-dot.png" /><img src="slide-dot-active.png" />';
},
});
Then you can display the image you want based on the active state with CSS
<!-- language: lang-css -->
.slick-dots li img:nth-child(1) {
display: block;
}
.slick-dots li img:nth-child(2) {
display: none;
}
.slick-dots li.slick-active img:nth-child(1) {
display: none;
}
.slick-dots li.slick-active img:nth-child(2) {
display: block;
}

You can style slick dots with CSS only and avoid using inline images:
Using background image:
.slick-dots li button {
background: url(path/to/your-image.png);
text-indent: -9999px;
overflow:hidden;
/* more CSS */
}
Using pseudo element:
.slick-dots li button {
font-size: 0;
/* more CSS */
}
.slick-dots li button {
content:url(path/to/your-image.png);
}

Hello there i searched a lot but didn't find any solution so i created my own solution
you can do like this:
In html
<div class="card rounded-0 h-100">
<div class="card-body p-0">
<div id="slick-slider">
<img class="w-100" src="https://demo.activeitzone.com/ecommerce/public/uploads/all/kYLM906MNqYcHvm0bHLcIj3TxldjZfySHl26wHMu.png" alt="">
<img class="w-100" src="https://demo.activeitzone.com/ecommerce/public/uploads/all/ppB6tYYNgWM3vL3uq81n80fZCdxrgkMul9KPk9pm.png" alt="">
<img class="w-100" src="https://demo.activeitzone.com/ecommerce/public/uploads/all/Dp0DBHFbBuyRCAUi8Od6tk4izOsMg1mVB1v8QAeu.png" alt="">
</div>
<div class="slick-slider-nav"></div>
<div class="slick-slider-dots"></div>
</div>
</div>
And in javascript
$('#slick-slider').slick({
autoplay: true,
dots: true,
appendArrows: $('.slick-slider-nav'),
appendDots: $('.slick-slider-dots'),
prevArrow: "<button class='slick-prev btn btn-white rounded-circle'><i class='mdi mdi-chevron-left'></i></button>",
nextArrow: "<button class='slick-next btn btn-white rounded-circle'><i class='mdi mdi-chevron-right'></i></button>",
});
For dots style like this i am using SCSS
.slick-slider-dots{
position: absolute;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
display: flex;
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
li {
margin: 0 4px;
button {
background: $gray-200;
height: 8px;
width: 35px;
overflow: hidden;
color: $gray-200;
border: none;
border-radius: 4px;
}
&.slick-active {
button {
background: $primary;
color: $primary;
}
}
}
}
}
Dots will look like this

you can use the option "appendDots" when initializing the slider.
For example: appendDots: '$('.your-dot')'

You can implement this simply by using CSS, and you don't need any JavaScript function.
1- choose the element you want the slider to be applied to
this code is pugjs
ul
li 01
li 02
li 03
li 04
li 05
2- Then apply the Slider function to this element
$("ul").slick()
3- Now add the dot feature to the slider and do it with true
$("ul").slick({
dots: true,
})
4- Now go to the points and click on them and open the console and drag the class named slick-dots
5- Add the formatting you want to the buttons inside, as shown in the following figure
.slick-dots li button
{
width:10px;height:10px;
background-color:red;border-radius:50%;
font-size:0px; // This step is very important to hide the numbers
border:0;
}
6- Now inside the console, you will notice the mechanism of action of this slider, as it puts an active class on the element that you click on, so we go to the css and we coordinate the active
.slick-dots .slick-active button
{
background-color:blue;
}
7- And in this way, you will end the customization of dot without the need for any JavaScript function.

Slick slider "position: fixed"

I'm using slick.js and trying to position the slider at the bottom of the page.
I'm using position:fixed but it simply breaks the slider, meaning every movement causes each cell to grow, double in size I think.
Is there a workaround for this?
Here's my code:
<div class="cappa__holder">
<div class="cappa">111</div>
<div class="cappa">222</div>
<div class="cappa">333</div>
<div class="cappa">444</div>
<div class="cappa">555</div>
<div class="cappa">666</div>
<div class="cappa">777</div>
</div>
.cappa__holder {
/* uncomment next line to see it break */
//position: fixed;
bottom: 0;
}
.cappa {
text-align: center;
background:#f1f1f1;
margin: 4px;
border: 1px solid blue;
}
$(document).ready(function(){
$('.cappa__holder').slick({
infinite: true,
arrows: true,
slidesToShow: 4,
slidesToScroll: 4,
speed: 600
});
});
Here's a fiddle to show the problem

Problem: when .cappa__holder has position:fixed; and does not have height, the slick can not calculate the size of slides. However, you only need to give width to the .cappa__holder to solve your problem(for example width:100%).
Jsfiddle

Slick carousel has 0px width when loaded in collapsed tab

When loading slick slider in collapsed content (angular-bootstrap collapse plugin in this case) the .slick-track div gets 0px width, resulting in the slider trying to fit all slides on top of eachother. When pressing arrow to see next slide, the slides go back to normal. If I select the slider and want to check the components in my browser, it also goes back to normal.
Please see this example:
http://plnkr.co/edit/iw9f2alEnK0HFkv1eq16?p=preview
This is the slick configuration I'm using:
$(document).ready(function(){
$('.tourImageSlider').slick({
dots: true,
infinite: false,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1500,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
}
},
{
breakpoint: 1000,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
}
}]
});
});
Would anyone have an idea of how to solve this?

Finally I got the answer by slick creator Ken Wheeler himself. When collapsable content is triggered open, simply call the following line:
$('.slider-class').slick('setPosition');
...and replace "slider-class" with the class name of your slider.
Personally I created an angular function with this line, and triggered it with ng-open.

Problem related to the reason that slick carousel cannot get correct width from block that has {display: none} or small width like {width: 1px}.
This situation is often occurring when content is hidden with styles like in example below:
.product.data.items>.item.content~.content {
border: 0;
clip: rect(0,0,0,0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
The idea is to use {overflow-y: hidden} and {height: 0} for content hiding instead of {display: none}. And after tab activation, it is needed to set {height: auto;} for content.
// fix for slick carousel that initializes with zero width in collapsed tab
// it happens in tab with {display: none;} + small width like {width: 1px;}
.tab-content-selector {
width: 100%;
display: block !important; // if it set to display: none by script
overflow-y: hidden;
height: 0;
padding: 0 15px; // can be adjusted according to needs, but top and bottom padding must be zero
}
.tab-title-selector.active + .tab-content-selector {
height: auto;
padding: 10px 15px 30px; // can be adjusted according to needs
}