Ninja Slider / Posts /

Let the page know earlier about the height of the image slider

2

As the Ninja image slider is responsive, I cannot specify a fixed height to the slider. Then the page will take the height of the image slider as zero before the slider is fully initiated. It will cause an unwanted effect: the contents below the image slider will jump down when the slider is loaded. 

I dislike the jumping effect caused by the responsive image slider. Any solutions to avoid this?

Federico  9 years ago   viewed: 8656    

2 Answers

0

If you know the aspect ratio of your images of the slider, there is a workaround.

Say your original image size is 1000 x 250 px, then you can create a DIV element with the { padding-top: 25%; height:0; width:100%; }, and it will have the same height as your slider. So you can make your slider has an absolute positioning, and put your slider inside the DIV element. For example:

<div style="position:relative;width:100%;padding-top:25%;> <div id="ninja-slider" style="position:absolute;width:100%;left:0;top:0;"> <ul> <li><div data-image="1.jpg"></div></li> <li><div data-image="2.jpg"></div></li> <li><div data-image="3.jpg"></div></li> </ul> </div> </div>


Sun Hong Yang   9 years ago
-1

You get that issue because you have set: nsOptions { ... aspectRatio: "fixed", ...}in your ninja-slider.js file.

You can easily resolve the issue by specifying an exact aspect ratio to it. Say your original image size is 1000 x 250 pixel, then you can set the aspectRatio as:

aspectRatio: "1000:250"
Milo   9 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question:
▲