Javascript Image Slider / Posts /

Scale Image in Slider

148
I am using Demo 1. How can I scale the to width:150px; height:100px. I tried altering the image-slider.css #slider, the div is smaller but the image is not scaled.
Rick  12 years ago   viewed: 81624    

12 Answers

17
hello people .. 
this is really amazing slider .. and to make the slider work fine with any size and let the images to be filled in the slider you can use this code, just add it to your css .. 
 
div#slider, #slider div.sliderInner div.mcSlc {
background-size: cover !important;
background-position: center center !important;
}
 
and it work just with the effect 13 .. the fade effect . .
 
sorry for my weak english .. am working to improve it .. :)
abo.al.tot@gmail.com

PS: I just found Menucool has released a new responsive image slider, Ninja Slider, that is by default responsive and touch-device enabled. We don't need to worry about those feature anymore.
tamer
  10 years ago
-9

Thank tamer for your post.

To make your solution work, in addition to:

div#slider, #slider div.sliderInner div.mcSlc { background-size: cover !important; background-position: center center !important; }

I found we also need to add/update the following CSS:

#sliderFrame { ... ... width: 100%; /*You can also add: max-width:1200px; if you like*/ font-size:0; } div#slider, #slider div.sliderInner { width:100%; padding-top:43.7%; /*this is the aspect ratio of the image: height/width */ }

This responsive configuration only works for slide effects: 9,10,11,12,13, and it also has some defects such as it does not have a good support when you are resizing the window (If you know how to use the @media query in CSS, you can overcome this problem by setting a fixed slider width when in non-mobile devices, and a flexible 100% width for mobile phones).

To get the best responsive support, Ninja Slider is recommended.

Milo   10 years ago
5
At first. Thanks for this script. I'm running on http://quietopalafoto-med.blogspot.com/p/camaras-de-fotomulta.html

But I have images with diferent size... like (005).  In my proyect I strech the background with this CSS:

background                  : url('themes/base/images/FondoAzul.jpg') no-repeat center center fixed;
/* Cober 100% screen */
-webkit-background-size     : cover;
-moz-background-size        : cover;
-o-background-size          : cover;
background-size             : cover;

Can you tell me in wich part can I test It?
Or in wich file an line is the background assign?
quiman   12 years ago
2
The background image is assigned to the slider's slices through the js-image-slider.js code and you can hardly modify it.
milo   12 years ago
1

The slider image is not scalable as the images in this slider will be used as background images. If you cannot make them the same size and really need to scale them, please try our Content Slider that will scroll the actual images(you can specify the image width in your stylesheet or inline style) and any HTML content.

Another option is to use our newly released product Ninja Responsive Slider.

milo   12 years ago
1

The code is on the js-image-slider.js. it is possible however the author has not designed it to do that. Which is a little annoying. It is a feature that should be added as it limits the capability of this slider to static content.

the js adds the following at the end of the id="slider" div

style="background-image: url(http://img.youtube.com/vi/7QIVmHvqkEQ/maxresdefault.jpg); background-position: initial initial; background-repeat: no-repeat no-repeat;"

The only thing that is needed in this is background-size:600px 337px for example. This should be added in to the slider as a variable so we can define this.

The project I am trying to do involves pulling youtube previews then I give a youtube ID. However youtube only has limited preview sizes so I am forced to scale the image. However the way this code is it is not currently possible without altering the .js file. I took a look at this and this would take a ling time as the code is all minifyed with variables defined as letters.

This is the only thing stopping me from using this slider which is frustating as it looks perfect for what I need.

dgibbs   12 years ago
0
As far as I know, he background-size is a CSS3 feature and that is not widely-supported by all major browsers.
milo   12 years ago
1

The code is on the js-image-slider.js. it is possible remarq.store however the author has not designed it to do that. Which is a little annoying. It is a feature that should be added as it limits the capability of this slider to static content.























t is possible however the author has not designed it to do that. Which is a little annoying. It is a feature that should be added as it limits the capability of this slider to static content.


BettieDollar
  one year ago
-4
Have any changes regarding this been made or has anyone found out a way to resize the image?
Jonathan
  11 years ago
-7
Not for this JavaScript Image Slider. 
Currently you can use our Content Slider that allows any HTML content, and images can be aligned to the center.
We are now developing a responsive slider which will be released around Jan 5, 2014.
Milo   11 years ago
-8
Hi I am wondering how we can make the sider re-size the image to the same size as the DIV. we develop all the images in iPAD retina size but resize based on 980px which is the DIV size
Russell   10 years ago
-2
Menucool Ninja Slider is the solution as it is responsive. It will always adapt to the size of the slider's container.
Milo   10 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:
▲