Javascript Image Slider / Posts /

displaying different sized images in slider

It looks like all the images have to be the same size. What if I want to have portrait and landscape images in the same gallery?

Also, the #sliderframe css calls out width but not height, so my navigation bullets go under the next div (below) if I increase the relative offset from the #slider. If I add the height to the #sliderframe, this problem is solved. Will adding the height break anything?
Jake  11 years ago   viewed: 29287    

3 Answers


The best way is to use Menucool Ninja Slider that allows any sized images, and that is also responsive.

The Ninja Slider has an aspectRatio option to handle this. Example of its values: "9:6", "auto" or "default". For details please refer to the JavaScript section in the Ninja Slider page.

If the aspectRatio still doesn't fit your requirements, you can consider adding your own element as the ninja slider element with whatever background-size setting that you prefer. For example:

<div style="background:url(/img/3.jpg) no-repeat 50% 50%; background-size:cover;"></div>
milo   11 years ago
This response doesn't answer their question.  It's responsive, but if they want the images to be TALLER... increasing the height, how do they do that?  We want to do that too.

  7 years ago

You can set aspectRatio option to be "auto" in the ninja-slider.js

Milo   7 years ago


Your name*
(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: