I have been trying to get a slick slider to work for a few hours now, and after trying all the suggestions on relevant SO questions, nothing has worked.
My images are 1080px tall, but slick displays them as 1px tall.
FYI, the images have enough transparent space at the bottom and I am planning to move the dots up on top of the image to keep the page without scroll bars. I am also planning to make the navigation arrows smaller, though they should still be on top of the image.
I have the entire slider having the full height as well as the everything within (.fullheight and .backimg).
<div id="picslider" style="height: 100%">
<img src="https://octolopagon.games/_resources/img/olumian.png" class="backimg">
<img src="https://octolopagon.games/_resources/img/support.png" class="backimg">
</div>
The full code is at https://jsfiddle.net/wrtvq2we/
Any help is appreciated.
You should give the container where the slides are in a height, otherwise the height will always be 1px. So you can give .slick-track a height desired to your needs. Here's an updated JSfiddle.
The images that are inside the slider will grow (in height and width) to the set height of the container.
Related
I am trying to understand the Skrollr javascript script library, and am having difficulty understanding data values, and how they differ between absolute and relative.
I have a background image on a div (about 2x taller than the div) that I would like to scroll down as I scroll down the page. Here is what I have so far.
<div id="jumbotron" data-top="background-position: right bottom;" data-bottom="background-position: right top;" >
What are data-top and data-bottom? As near as I can figure from the documentation, data-top is the top of the div #jumbotron. What I want is that when #jumbotron is at the top of the viewport, the background position is right bottom. Then, as I scroll and the the bottom of #jumbotron reaches the top of the viewport, I want the background image to be right top. This isn't happening. What am i doing wrong?
The skrollr library will transition the CSS on an element based on its data elements. For example, if you had an element as follows:
<div id="element" data-0="opacity: 1" data-100="opacity: 0"></div>
At scroll position 0 (user has not scrolled), the opacity of the element would be 1. Once the user has scrolled 100px down the page, the element would have faded to opacity 0. You can add as many data increments as you'd like.
Regarding data-top, the readme on the skrollr repo says the following:
data-top: When the element's top is aligned with the top of the
viewport
I don't however see anything about data-bottom in the docs. I only see:
data-top-bottom: When the bottom of the element is at the top of the viewport (it's just not visible).
So you might try:
<div id="jumbotron" data-top="background-position: right bottom;" data-top-bottom="background-position: right top;" >
Just consider that the first data is your starting point, and the final data is your finishing point with as many increments along the way as you need.
Skrollr.js needs a data-attribute with two values.
The first describes the alignment to the viewport.
The second the edge (or center) of the element.
It can be a bit confusing, that both are named in the same manner (top, center or bottom).
You can further position the background with percentage values.
This way skrollr can transition between the values.
See this example.
https://jsfiddle.net/4frjantk/
<div class='section'
data-bottom-top="background-position: 50% 100%"
data-top-bottom="background-position: 50% 0%" >
</div>
PS:
The example contains a workaround for containers with 100% height as described here https://github.com/Prinzhorn/skrollr/issues/347
I have an image of 1108px height and 907 px height. I have kept this image in a div tag and its height and width is as shown
<div id="mapframe" style="overflow:hidden;height:200px;width:300px;">
<img id="image" src="img/Groundfloor1.jpg" height="1108px" width="907px">
</div>
Now i do not know how to display only the specified coordinates(eg 500px from top and 100px from right) of my image at the centre of the div container and the image should be a DRAGGING IMAGE like GOOGLE MAPS. I have tried it with offset but the problem with it is that my image stops dragging.
Thank you for trying to help me.
Does it need to be an image element? It might be easier having it as a background-image for the div and using background-position to move it around.
If you insist on having an img element, you could also use margins, but to save you some headaches I would just use absolute positioning.
Let me explain this question. I'm working on a responsive website that need the image to be scaled depending on the window's width. Do I have all set those image with this style
.bgImg{width:100%; height:auto; display:block; position:relative;}
and I have make a 3 column group like this
the thing is when the height of the window becomes odd, both 25% column have now a margin of 1px at the bottom
You'll need to zoom in the image above since it's only 1px.
I was wondering if there's a way to fix this or any javascript that could force the image height to round up to the nearest even number so all my image's height will be even and will fix that problem.
Added a fiddle http://jsfiddle.net/2QneE/3/
I have page http://inspire.mobi/how, where it is aligned horizontally well ut it is not properly aligned vertically.
For this page http://inspire.mobi/how, there are 2 divs ( having css classes mainHow & botHow) in the body part. Both these divs are in one main div "mainHow" whose height is calculated using javascript (wondow.height- footerheight-headerheight). Internal 2 divs (having css classes mainHow & botHow) are 75% & 25% of the main div "mainHow". But it is not covering full height. When i zommin & zoom out the page (not 100% page size), it is creating too much part leftout below "bothow" div.
Please help me on this.
I had a look at this site and i can see a few errors that might be causing it.
Your divs mainHow & botHow, height are adding up to 105%.
In your javascript that you have set up to work out .container height, your footer height that you have hardcoded is set to 110px, im seeing the footer hieght as 91px, so you will have a gap there. If you fixed this, it should be the full size. If im understanding the question right
I'm trying to create a div which will have fixed width and flexible height , here is the picture which I want to use for background. The thing is when I have div larger than image height the bottom rounded corners are omitted and also if I have div less than the size of image same thing, how do I make this work with round corners with all sizes? Thank you
Just use a bottom of your image, others with border style.
<div style="padding-bottom:20px; width:303px; background: url('http://i48.tinypic.com/wvvhbr.png') left bottom no-repeat;">
<div id="myContent" style="border: 1px solid #ccc; border-bottom:none;">
Some Content
</div>
</div>
If you need a round borders at the top, simply add style "background" to #myContent with top align and another image.
Using background-position will ensure you always have rounded corners:
CSS:
background-position:bottom;
You'll have to create an image that has a lot of extra height so that if the div does end up being taller than expected, you've always got room to play with.
Another option would be to divide the div into 2 separate divs - 1 as the main content section, the other just adding the curved corners to the bottom. This will allow you to use a 1px high background image for the main div, and a 20px(ish) image for the curved border image, reducing the file size quite a bit. I've attached an example for you: Download Example
Position the background image at the bottom -add some padding to bottom of the div so the corners will fit into that. Make the bg image really tall.