I use Slick in my project and I need to center two slides. Unfortunately centerMode option works only with odd numbered slidesToShow counts. I tried to center active slides by CSS but without effects.
Do you know any solution? Thank you in advance!
Edit:
Example of my carousel: https://jsfiddle.net/lukaszflorczak/y7t64oqs/.
I want to have 1 centered item on the smallers screens, next 2, 3 etc. Not active slides have less opacity.
Slick Carousel center Mode with two slides is possible using variableWidth, you have to set width for each slide. After that you have to move slick-track half width of the slick slide.
Working fiddle here:
Slick slide - two slides in center mode
Slick Carousel slides can be centered by setting the horizontal margins of .slick-track to auto in addition to using the centerMode attribute.
.slick-track {
margin-left: auto;
margin-right: auto
}
Related
I am working on a template which is bootstrap based. I need to set up a full width slick slider, but its initial state should start at the left edge of the content container, and then progressively slider further left.
I tried to represent what needs to happen on the image below. The black border represent the viewport, the red border represent the content container. The first row is the initial state, the other 2 rows show the position of the slider after clicking the "prev" arrow:
Is this possible? And if so, how?
Thanks,
Lol, I just had to do that same thing last week. I set slidesToShow:1 and slidesToScroll:1. I also have variableWidth:false, though I'm not sure if that played into it.
The next step is to set a width on your slides in CSS to keep them from resizing out to fill the space:
JS
$('.slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: false
}
CSS
/*Just to make it not full width, for this example*/
.slider{
width:800px;
margin:0 auto;
}
/*Edit, forgot this important bit. This keeps the other slides visible*/
.slick-list {
overflow: visible;
}
.your_slide {
width: 280px!important;
height: 345px!important;
}
I have three images to be shown on a page and I want the image which comes in center by sliding should have margin-top that means my center image should be little down then the other two images which are on both the sides of the image.
If you are using centerMode:true, there's a .slick-center class applied to the element in the middle. You can create a css rule like:
.slick-center {
margin-top:0.5%;
}
If you don't have centerMode:true on, and for some reason you can't enable it, you can always target the .slick-current class (which will be the first of the three slides that are showing, and then target it's adjacent sibling like this:
.slick-current + .slick-slide {
margin-top: 20px;
}
However, if both options are available to you, I would suggest going with Tutch's answer as it scales better in cases where you might increase/decrease slide counts dynamically.
Im working on a website that has header(top), slider(middle) and footer(bottom). On my first slide i have a logo showing so i'm wondring if it's possible to hide logo on my header when my slider is on first slide, but only hidden on first slide and when i'm on other slides that a logo still shows on a header.
I'm using a slider "Swiper" if that helps.
Link to a website is:
http://raumfuerkunsttherapie.de/FW/
Any help will be much appreciated!
Thank you in advance :)
Yes, you can using the nth-selector property of CSS. Each slide inside your slider has a common class swiper-slide so you can target the logo image inside the first slide like this and then hide it using display: none;:
.swiper-slide:first-child .row .u-max-full-width {
display: none;
}
Using the above CSS will hide the logo image on the first slide but it'll appear on the rest of the slides.
Is there a way to horizontally center slides that have a max-height set with various widths using slick.js? Notice in the url below how they are floated to the left leaving an empty space to the right of each slide.
Here's is an example: http://valeriebischoff.com/staging/work/post-soviet-estonia/#feature
Couple ways to go about it, pick one
1) Remove max-height from .slick-slide
2) Add a min-width to .slick-slide and add overflow:hidden on the parent container.
3) Change from using an <img> tag to a <div> and set the image as the background, with the property background-size:cover
I have used THIS tutorial to create a full-screen version for a website I am working on.
As you may have noticed I have succeeded in making most of the changes I needed.
http://coolcarousels.frebsite.nl/c/68/
But I am unable to figure out why the cans that shrink and grow every time the slides are clicked and made active.
JSBin
I have a feeling it has something to do with the Slides changing their width when going from active to smaller slides, But I do not understand why should the content grow/shrink with it.
// resize currentslide to small version
currentSlide.stop().animate({
width: _width * 0.065
});
Is there anyone that can help me understand why this is happening?
All I want is for the click to reveal the slide and the cans to stay the size they are suppose to be. Just like the original tutorial a clean reveal to the content.
The reason the cans expand is not a JavaScript issue, its because the CSS for the can is width:100% when its a small slider and when the new slide is clicked, the active slide goes from 60% to 10% and therefore the can takes up 100% of it.
.slide .can {
position: absolute;
width: 150%;
left: -56%;
bottom: 0;
right:auto;
}
The easiest solution would be to turn the values into pixels so that it stays the size it is while transitioning. But that perhaps complicates responsive behaviour.