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
}
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
});
Am trying to do a netflix like slider but with different hover effect. Here's how the mockups look https://pasteboard.co/IGwDwLE.png
I also wonder why it gets off once I set the variablewidth:true for slidesToShow config.
I'd also like to have a spacing for the first item and when the user hit the next item i'll fill up that space like so https://pasteboard.co/IGwFVmy.png
I have this config of slick slider.
$('.slider-inner').slick({
dots: true,
infinite: true,
cssEase: 'linear',
slidesToShow: 5,
slidesToScroll: 5,
arrows: true,
});
The CSS pseudo class :hover can be used to define the style of elements in the slider on hover, and a negative right margin can achieve the positioning effect for the first element.
When using slick.js, note the following:
The items in the slider are given a class slick-slide. Use it to target the slider elements in your stylesheets.
Insert your own CSS after slick-min.css and slick-theme-min.css so that your custom styles override the default.
Define the width of slide elements if you are using variableWidth: true.
Here's an example:
$('.slider-inner').slick({
dots: true,
infinite: true,
cssEase: 'linear',
arrows: true,
variableWidth: true,
});
.slider-outer {
margin: 0 auto;
padding: 30px;
width: 70%;
background: #ccc;
}
.slick-slide {
text-align: center;
color: #ccc;
background: white;
border-left: 2px solid #ccc;
width: 91px;
}
.slick-slide:hover {
width: 130px;
color: red;
transition: .5s linear;
}
.first {
margin-right: -50px;
}
.first:hover {
margin-right: 0px;
transition: .5s linear;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css" rel="stylesheet"/>
<div class='slider-outer'>
<div class='slider-inner'>
<div class='first'><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
<div><h3>6</h3></div>
<div><h3>7</h3></div>
<div><h3>8</h3></div>
<div><h3>9</h3></div>
<div><h3>10</h3></div>
</div>
</div>
Try This
centerMode: true,
centerPadding: '60px'
Live slick Demo
You can achieve the mockup design by using below settings of slick js
centerMode -
Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts.
centerPadding -
Side padding when in center mode (px or %) and by default value is set to 50px.
You can find all slick configurations in below link
https://kenwheeler.github.io/slick#settings
Example
$(".single-item").slick({
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
});
You can check the live example in below link
https://jsfiddle.net/afz0os4w/
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.
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