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);
Related
I am trying to develop a carousel similar to Netflix, but I cannot make it responsive. I have been using a codepen example:
Link to example
In this example, it has a hardcoded width and height. I would like to make it use a responsive measure (percentages). I wanted to use the vw viewport width units, but this doesn't work for me because it does not exclude the scrollbar. So, when I want every carousel item to have a width of 20vw (so that each one is 20% of the viewport size), they are always wider than I want because the viewport does not exclude the scrollbar.
How can I fix that problem?
I have made an example: Link
In this example, I want to show five items and showing an arrow on the right. The 6th item should be hidden behind the arrow, but the arrow width is not correct.
The width of every item is 18.4vw ( (100-8)/5=18.4). As you can see, I have put a padding on left and right with 4vw(so, I am subtracting 8 for total width), so, I have made the arrow layer with:
position:absolute;
right:0;
width:4vw;
In this manner, the arrow always is fixed to right.
The problem is that 18.4vw is the measure respect the viewport, and as there is a scrollbar, the width is not correct, because the scrollbar width is breaking the correct measure.
I dont know if you understand what I want to make.
BR.
I am using jssor`s simple fade slider and It is working fine but there is an issue with height and width ..
Actually I am using the width as percentage and the problem cause by it is that as I increases width height also increases similarly for vice versa..
What I want is height of the slider remain fixed but the width changes accordingly ..
The most I've been able to do is get the slider to scale the width before initializing, essentially working like 100% width and fixed height.
The only problem is it doesn't scale if the window resizes.
Either way, for anyone interested, just update the slider container divs with JS right before you initialize Jssor:
<!-- Jssor Trigger -->
<script>
var parentWidth = document.getElementById('slider').offsetWidth;
document.getElementById('slider1_container').style.width=parentWidth+'px';
document.getElementById('slider1_slides').style.width=parentWidth+'px';
jssor_slider1_starter('slider1_container');
</script>
If your page has a vertical scrollbar, you might have to call this code after the ending tag of the div you're getting your width value from, or simply just before closing the body tag.
I am Using CIRCULAR CONTENT CAROUSEL WITH JQUERY by tympanus , in this using jquery plugin left position is increasing 200px for every time . But i need only 170px. How can i Change in that plugin. Please help me.
open jquery.contentcarousel.js and go to line 165
cache.itemW = $items.width(); //item width
cache.itemW is apply as left to the items, here you can give manual size
Hi I am trying to make a scroll bar (I'm still far from done, link here: http://jsfiddle.net/xD2Hy/24/ ), thing is that when I scroll (using the scroll bar) to the bottom, THEN and I resize the window to make it SMALLER, the scrollbar drowns under the window. To fix this, i tried adding a jquery offset to the scroll bar move it up when i resize. NOW when i scroll to bottom, then i resize, the scroll bar dissapears completely! I really dont know what to do, im still learning javascript, please help. Here's a the offset jquery of the code, check the link of the jsfiddle for the whole thing:
$('#scrollBar').offset({top:100});
It seems you're setting offset to 100px from document's top border. You need to set offset based on scrollbar's parent container offset and height, and scrollbar container's height. Try this instead:
var scrollContainer = $('#cow'),
scrollBar = $('#scrollBar');
scrollBar.offset({ top: scrollContainer.offset().top + scrollContainer.height() - scrollBar.height() });
Updated fiddle.
I have this jsfiddle http://jsfiddle.net/r3pek/wxffL/ where i'm trying to understand why does the scroll goes beyond de window size :/
If I remove the "height: 100%" from the rightpane class, I don't have a scroll; if I add it, I have a scroll but that goes beyond the window. Any way I can limit the scroll to the window?!
Thanks in advance!
EDIT:
Just a quick update...
I updated the fiddle to reflect the actual problem. I have an image that takes space as a header and it looks like that image size isn't accounted for. (I really suck at CSS :P )
You have to define a height for an element to scroll. That's why the scrollbar disappears when you remove the height. You're also adding padding to the div along with the 100% height. That adds to the element's height so it ends up being taller than the window. Reduce the height to something less than 100%, maybe 90% and play with it. That will allow you to keep the scrollbar and keep it inside the window. I have a fiddle set up for you here.
The total height (or "outer height") of an element equals inner height (which you can specify in css) + padding + border.
If you use height: 100% but then also add padding and/or borders then the total height will be bigger than 100%. There's a css property called box-sizing that can help you but it's not cross-broswer (you guessed it, IE<9).
If you drop the borders and paddings, it'll be fixed. But then to have borders and padding on outer elements... you'll need to get creative (or come back here with a specific question)
OK, I solved the problem, just not sure if it was the "right way". Anyway, here's how I did it:
added this right before the tag:
<script>
window.onload=setRightPaneHeight;
</script>
Then, I created the function that will calculate the right size for the "rightpane":
function setRightPaneHeight(){
var pic = document.getElementById("headerPic");
var pic_h = pic.offsetHeight;
var total_h = window.innerHeight;
var right_pane = document.getElementById("rightpane")
$(".rightpane").height(total_h - pic_h - 30);
}
That being done, now after the page loads, the right height is calculated for the rightpane DIV. And it works :)
Thanks for all the answers as they made me understand what the problem was!