I need to make slick slider where next slider from right is cropped by half, but not from the left side. I did it with set up slidesToShow: 1.5, like in the screen below.
But also I need to make that if it's the last slide, then the previous slide should cropped by half and after the last slide there is not empty space, like in the screen below.
And if I swipe back it should be like in the first screen, cropped by the right side only.
How can I achieve this? I was looking for examples but didn't find much.
Just add folowing css
div.slick-list{
padding:0 50px 0 0;
}
Related
I am trying to do something similar this guy did here
However, I want my animation to go from left to right as opposed to right to left.
Now since all divs are actually positioned inline i have tried to specify direction: rtl on the parent div, but it still does not work. (my view remains on the left side on the page, I would like to see the rightmost div first and then when I slide the left divs they move to the right).
Thank you.
L.E: Here is the solution for those interested http://jsfiddle.net/oq4p28wg/
From moving left to right in the example referenced they add margin-left to move between slides, until reaching a maximum number of slides. In your case to move in the opposite direction you will need to start with the maximum margin-left and substract margin to move from right to left in the slides until reaching the first slide and therefore margin-left:0.
I have tried using the slick initial setting 'variableWidth: true', but then the carousel container (.slick-track) is set to 20000px wide and does not respond to screen width, so then the width of each slide is not responsive either. So, to be clear, 'variableWidth: true' is not useful to me.
I have seen the questions here:
How can I change the width and height of slides on Slick Carousel?
and here:
fixed width slides with slick carousel
but I do not want to set the width of each slide as a fixed pixel amount; They need to be responsive.
I'd really like to know where the width of a slide is calculated, when 'variableWidth' is left at the default of 'false'; The carousel is very close to looking correct (each slide just needs to be slightly wider). I've been looking through the slick.js plugin but cannot find a reference to 'width' that is applied as css.
There are several references to 'px' in the plugin, but these are to do with either padding or position.
Does anyone know where, or how, in the 'slick.js' code, the width of a carousel slide is calculated, when 'variableWidth' is set to false?
Thanks.
Maybe this will help anybody else, if it's too late for you.
I just dived into the code, as I was looking for this too.
The width of every slide is set in at the last line of the setDimensions() function. (Slick 1.8.1)
if (_.options.variableWidth === false)
_.$slideTrack.children('.slick-slide').width(_.slideWidth - offset);
Hi so I've used the command:
<script type='text/javascript'>
$(document).ready(function() {
$('.carousel').carousel({
interval: 4500
})
});
right before my closing body tag in order to get my bootstrap carousel to start and scroll through automatically.
The problem is that the last slide briefly resizes to a smaller height (moving the whole page up with it) before sliding back to the first slide.
To explain: All the slide images are the same size and all show at the same size as they slide through. But the last slide shortens (decreases in height) quickly before the first slide appears again (the first slide is shown back at the correct/original height of the slides). This is annoying because the temporary decrease in slide height causes the entire page to shift upwards.
To clarify, the last slide is initially starting at the correct height, then for a split second before sliding back to the first slide the last slide shortens in height. The first slide is then shown at the correct height again.
I have no idea what is causing this?
This is because there is no default height for the carousel slides. To keep the slides at a consistent height, add a predefined height or min-height to the slide's css. Example:
.carousel-inner .item {
min-height: 400px;
}
I use min-height in case my content overflows on different devices.
I am using the Basic JQuery Slider (http://www.basic-slider.com/).
By default the number markers (showing the total number of slides and which slide you are on) are under the image with a small margin. I want them to appear on the bottom of the images themselves.
What I have tried:
CSS:
I have pushed the images up by applying a negative margin-top, which worked. I have given them a z-index of 9999 (the same z-index that the left and right buttons have). Yet, for some reason, they appear behind the images, instead of on top of them. This is the problem I need to fix.
JQuery
I have looked at the JQuery code for the left right controls and the captions (which are both on top of the slide images, but I do not see anything specific that they have (and which is missing from the number markers) that would allow them to be on top of the images...
I have not posted any code, but can do so if requested. I am using the bjqs.js, bjqs.css, and demo.css found in the package downloaded from the Basic JQuery Slider site.
Try this CSS:
.bjqs-markers { position:relative; top:-35px; }
Try to give z-index for this line as -1
li.bjqs-slide{
z-index: -1;
}
And for this as +1
ol.bjqs-markers{
margin-top:-35px;
z-index:1;
}
I am using Swipeview (http://cubiq.org/swipeview) to create a touch-enabled carousel working on an iPhone and Android. The basics works great.
My problem starts when i try to get it to show 25% of the next slide pr default. The idea is that the user can see 1/4 of the next slide/image, which should then make them slide the image to reveal the next slide/image. The first image then disapears, the second image becomes 100% visible, aligned to the left, and the 3rd image is then visible by 1/4. And so on.
I have tried changing the div.style.cssText (in swipeview.js) to have a width of 75% instead of the default 100%. This works for the initial load, but when i scroll, the part of the 2nd image that was visible on slide 1, is now hidden on slide 2.
I made a fiddle to demonstrate: http://jsfiddle.net/zeqjN/1/ (test it in Chrome and try dragging the image to the left)
Any ideas as to how i can modify swipeview.js to fit my needs?
You can achieve this with css only. Just add a scale effect on the items.
.scroller .scroll-item { float: left; -webkit-transform: scale3d(1.1,1.1,1.1) }
Check out:
http://jsfiddle.net/frapporti/Xt9dM/