-
Notifications
You must be signed in to change notification settings - Fork 5.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Parameter for space between slides #582
Comments
Flagged for feature review. Thanks. |
Would love to see this feature implemented as well. It's critical for many designs for the images to be flush with the edge. Flexslider has this exact feature, implemented in 2.2.0. It makes sure the carousel is always flush with its container, depending on the specified margin between the slides and number of slides to show. Flexslider 2.2.0 is buggy and I really want to switch to Slick as soon as this feature is implemented. For example: http://jsfiddle.net/sngcoj5d/5/ Great Job with the slider @kenwheeler ! |
You can solve this with CSS using a similar approach to CSS grid systems. Something like this:
Although I bet people would like an option tied to responsive settings too... |
@matthewlein yeah thats usually what i do |
@matthewlein This doesn't solve the issue mentioned by @simranbentel and @paulthecoder |
Has anyone found a solution for this? |
I decided to look at this again...and I think I see what you're talking about. The content is visible outside the container because the |
Awesome!
|
Did anyone ever find a fix ever found for this? I like yours @matthewlein but it won't work if you want arrows and dots outside. |
I made it by directly setting styles to wrapper div
|
You can always use external triggers if you want to place arrows outside of the slider (which wont show if overflow is hidden, using the other method suggested). Something like: $('.nextarrow').click(function(e) { $('.prevarrow').click(function(e) { |
Using css animation-delay property, you can hide the slide until the animation stops. Animation delay should be equal to the speed setting of the plugin. slick-list { .slick-slide { .slick-slide.slick-active { |
thank you @egemenerd |
You can also do this to make the slides have an equal gap between them but still be flush to their container on the left and right like this:
Handy if you want to keep everything in line with other elements above and below the slider. |
@egemenerd Awesome dude !!! Thank you |
@zerodburn mind clarifying a bit? My slider doesn't seem to have a .slick or .slick__slide (only slick-slide). Also are the .c appended signifying a custom class? thx! |
Thank you @matthewlein ... works perfectly! |
This solution worked for me in order to get a full-width carousel with spacing between images. I had to move the arrows inside the carousel (i.e. on top of the images). // Add spacing between images
.slick-slide {
margin: 0 5px;
}
// Fix external margins
.slick-list {
margin: 0 -5px;
}
.slick-slider {
overflow: hidden;
}
// Move arrows on top of images
.slick-prev {
left: 50px;
z-index: 1;
}
.slick-next {
right: 50px;
} |
all of the solutions does not work good enough! I think I speak on behalf of all mankind if I say we want it to work like "justify-content: space-between;" The following helps but there is some imperfection with first and last slides - they have margin too:
I've tried to modificate the slick.js: Part 1:
Part 2 (line 2051):
But it doesn't work. Apparently my JavaScript skills have need of improvements too. Thus SOS to pros! |
It's not necessary to move arrows inside the carousel (when using @gzurbach solution). https://jsfiddle.net/xepnvrf8/ In my example, I use a wrapper which has a necessary width and full-width carousel inside with spacing between slides. The custom arrows have been added inside the wrapper and positioned absolutely outside the wrapper width (that is how it was needed for me). Now it works perfectly for me. |
You dont need to set margins just set:
padding-left/right depends on your centerPadding. |
I've worked on a possible solution that seems to work on load and with responsive, haven't tested use with other options though. Add new option to _.defaults Line 2077 Line 2088 I've been working on v1.8.0 so haven't tested this on v1.9.0. I have noticed that it cuts maybe a pixel off slides at the edges with some parameters :/ |
Here's how I did it with plain CSS.
This solution works well for all cases except with centerMode because it already extends to the edges. Using JS, you can detect centerMode and omit the custom styles. Make sure you resize the screen when testing/adding values in inspector, to recalculate the slider values.
|
If you add a container div inside of each slide and give it a margin, then make the background of the slides the same as the background behind it, you can achieve the aesthetic of slides with space between them in a way that works with slick's responsive functionality. Won't work for all situations but could work for a lot of simple ones. |
In latest version as of this comment (1.8.1), slick will nest your slides wthinin two consecutive divs in which you can apply padding to the
CSS
|
you saved my life. thank you |
I can't believe it's 2020 and we still have to rely on hacks for this. |
I use to make equal gap between the slides text-align: center inside the slide |
If you have arrows outside.. try |
Apply |
Hy everyone: to fix this: |
thanks @virgiliud, your solution seemed best as the last visible slide did not have an unnecessary space on the right |
Hello everyone ! I have been using this plugin quite a bit, sad to see it looks abandoned while being so awesome 😞 Anyway, after trying some of the hacks listed in this issue, didn't find anything fitting with my current need which is a setup using Bootstrap (5.0.2) cards. So I find a pretty simple solution that looks to be working fine, hope it can ever help someone : <div class="carousel w-50 mx-auto my-5" id="carousel-id">
<div class="carousel-trigger">
<!-- In order to ensure each slide has same height -->
<div class="carousel-slide d-flex align-items-center">
<div class="card">
<div class="card-body">
<!-- ... -->
</div>
</div>
</div>
<div class="carousel-slide d-flex align-items-center">
<div class="card">
<div class="card-body">
<!-- ... -->
</div>
</div>
</div>
<!-- ... -->
</div>
</div> #carousel-id {
.slick-slide > div {
display: flex;
.carousel-slide {
margin: 5px; // replace by the gap amount you would like to use
}
}
} // Slick configuration
$("#carousel-id").slick({
infinite: true,
dots: true,
rows: 2,
slidesPerRow: 2
}); |
Thanks, @ZeroCool-85
Thanks @ZeroCool-85 |
thanks bro |
I solved as below
|
.slick-active.slick-current { .slick-active { |
I'm having this same issue of no-space between between slick-items on mobile. Avoid using centerMode flag. Its the main culprit. On settings object: |
Seems that the space between slide is the width calculated by the library. What worked for me: options:
then the suggestion above to play with the styles:
|
I achieved with
and the container
Adjust the |
All the solutions mentioned above work only for the static state. As it is 2024 the browsers have evolved and here is a working solution for modern browsers! Use https://jsfiddle.net/mzevrkgy/6/ /* gutter width: 20px */
.slick-slider {
margin-left: -10px;
margin-right: -10px;
}
.slick-list {
clip-path: inset(0 10px 0 10px);
/* warning: do not set `margin` or `padding` to anything other than `0` here! */
margin: 0;
padding: 0;
}
.slick-slide {
margin-left: 10px;
margin-right: 10px;
background-color: thistle;
} Also see: |
This worked best for me:
It kept all slides in view and spaced between parent container without any gap at the beginning or at the end. Just between them. Worked for mobile and tablet view as well. |
This works for me:
|
I noticed that all your demos are applying no space between the slides but rather you are creating the appearance of space by using heading tags as the content in each slide, which have equal margin on all sides. This approach creates an interesting issue though...
If you watch the left and right edge of the slides area as you advance or regress the slides, you can see the content spilling out past the initial left or right edge by the amount of left- or right-margin of each slide's content during the actual transition. I notice that the actual width of the entire .slick-list element includes the left margin of the first viewable slide and the right margin of the last viewable slide.
In an implementation I am working with, the design directive is for the entire .slide-list to go edge to edge width-wise without any space on the left and right side. The extra margin I mentioned in the previous paragraph then poses a problem and I have been playing with various workarounds to create the appearance of a clean edge to edge presentation, none of which I am thrilled with.
I would think you could probably add a spacing parameter to the script that would calculate the space between each slide without any extra space at the beginning or end.
I think this would be the cherry on top of a truly tasty plugin! Cheers!
The text was updated successfully, but these errors were encountered: