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.
Related
I'm using this CSS for slides in Slick slider:
backdrop-filter: blur(10px)
However, when I click to display the next slide, the CSS blur disappears for a second and then the slide blurs again. When dragging the slides with my mouse, the CSS blur disappears on mouseup.
How can I fix this?
CodePen: https://codepen.io/maxbeat/pen/abNBrex
.slider__item {
height: 200px;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
font: 24px arial;
background: rgba(255,255,255,0.5);
backdrop-filter: blur(10px);
}
Here is a working codepen.
You can use filter blur and then it will be smoothly:
filter: blur(1px);
Also, You need to split between the slide "shadow" layer and the slide "content" layer, as you want the content to be sharp and only the box background to be blurred.
For those who are still struggling with this issue. Just disable useTransforms and useCSS in the slider's config object. For example:
$('.slider').slick({
autoplay: true,
autoplaySpeed: 4500,
ladyload: 'ondemand',
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
useCSS: false,
useTransform: false
});
I'm currently using Owl Carousel and am wondering if there's a way to adjust image sizes so that the height of each image is consistent. I'm using this plugin to display my photography, and I have both landscape and portrait sizes. I tried using autoWidth in the JS but it makes my portrait images too large and my landscape images too short, how do I get all the images to have a set height?
I tried adjusting the CSS, but the landscape images seem to be behind the next image and doesn't display the full width. It looks like there is a set width, and when I adjust the width, the image just gets stretched. I have 19 items in the carousel. Also tried adjusting the items in the responsive part of the JS, when I adjust it to two items, the landscape images are the right proportions but the portrait images end up being stretched. Any ideas on how to fix?
Here's the CSS code I've used:
#demos img{
display: inline-block;
max-width: auto;
height: 500px!important;
margin-bottom: 30px;
}
Javascript:
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop: true,
margin: 0,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 3,
nav: false
},
1000: {
items: 5,
nav: true,
loop: true,
margin: 0
}
}
})
})
you can use this code in your css
.owl-carousel .owl-stage {
display: flex;
}
.owl-carousel .owl-item img {
width: auto;
height: 100%;
}
If you're using Bootstrap, then add the img-responsive class:
<img class="img-responsive">
This worked for me, I was also facing the same issue.
try to play with something like this:
display:block; height:500px !important; margin:0 auto 30px;
add style to img tag, owl carousel automatically adjust the height to the biggest image. img tag width height might not work, try adding css styles
<img
class="img-fluid"
src={require("../../assets/assorted-flowers-on-table-2253831.jpg")}
style="width:800px; height:600px;"
/>
Add to your style:
img {
width: 100%;
height: 500px!important;
object-fit: cover;
object-position: center;
}
And if you need, force the height on every parent of your image. That worked for me.
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
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
}
I have started using the Slick Carousel plugin for a website I am working on and for some reason, if I set a wrapper around the targeted element for the Slick Carousel, the width is not honoured unless I set it with pixels which is not an option when I need the width to only grow to the size of the parent element.
I am using Bootstrap as well in case this helps.
HTML
<div class="col-md-6 col-xs-12">
<div class="group-filter">
<span class="title">Group Filter</span>
<div class="group-slick-cell">
<div class="group-slick-wrapper">
<div class="group-slick">
<div><button class="btn btn-groups">Group 1</button></div>
<div><button class="btn btn-groups">Group 2 more text</button></div>
<div><button class="btn btn-groups">Group 3</button></div>
<div><button class="btn btn-groups">Group 4 text</button></div>
</div>
</div>
</div>
</div>
LESS:
.group-filter {
display: table;
width: 100%;
.title {
display: table-cell;
font-size: 16px;
color: #text-color;
padding: 0 5px;
vertical-align: middle;
width: 1%;
}
.group-slick-cell {
display: table-cell;
width: 100%;
height: 31px;
.group-slick-wrapper {
margin-left: 17px;
width: 100%
.btn {
margin: 0 5px;
}
}
}
}
JS:
groupSlick.slick({
infinite: true,
dots: false,
speed: 200,
slidesToShow: 3,
slidesToScroll: 1,
variableWidth: true,
centerMode: true,
draggable: false,
accessibility: false
});
Here's a JSFiddle of the actual issue. The child of the parent container is pushing the width out to 20,000px which is wider than what Bootstrap should be going to.
https://jsfiddle.net/wqvth9ms/
For someone that might be looking for a similar fix to this, I have created an update to the original jsFiddle below that might be able to help you out.
I changed the display: table-cell into a float: left and also added the table-layout: fixed to the wrapper element.
https://jsfiddle.net/wqvth9ms/1/
The markup had the class group-slick-cell for one of the parents. group-slick-cell is a class used by slick-carousel. Just change it to something and you will be alright
Fiddle - https://jsfiddle.net/y3vs6h9q/
Note that I renamed the class to group-slick-cell1 only in the markup. I wasn't sure which of the styles in the CSS came from your customizations and which from slick-carousel.