Ninja Slider / Posts /

how can I change the aspect ratio for different devices to make slider responsive?


I have the aspect ratio: 2:1 for the image slider but this image size is for all screens. I want to change it like "media queries in css" maybe in width in 240px screen the aspect ratio can be 2:2 and 480px screen change it to 2:1... it is possible in javascript or css?

Hans  7 years ago   viewed: 6871    

2 Answers


Good question!

You can update the aspect ratio of your image slider by setting the padding-top of the UL element for certain devices through the media queries in the stylesheet. For example, if you want 2:1 for mobile 480px devices:

@media (max-width:480px) { #ninja-slider ul { padding-top:50%!important; } }

Note the !important is required to overwrite the aspectRatio option in the ninja-slider.js.

Milo   7 years ago

it works!!!!
thank you so much!!!

Hans   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: