Since the slider / rotator is 'responsive' - it will grow or shrink to the size of the container. The best thing to do is to wrap the slider in a container and force the width of the container.
For example, normally we just return the slider widget data from the static page like this:
PHP Formatted Code
So the slider is going to grow / shrink to fit the available space. Let's now wrap it in a div where we specify the width so the slider is now in a smaller container - so our code might look like this:
What we've done is create a wrapper div that is 500px wide. We add the class="uk-responsive" to ensure the slider will properly shrink on smaller devices. The margin: 0 auto; ensures that our slider is properly centered.
I think this will get you what you need - let me know if it works out.
Thank you - that works fine except that what I would really like to do is to control image size (both height and width). Actually I am a bit lost about how to control picture size in sliders generally... anyway I am sure I will solve it - just time needed...
Sliders, when mixed with a responsive design, can get complicated. The first rule of thumb is to never mix portrait and landscape images - as the portrait image will drive the overall height of the slider. The second rule of thumb is to use the same size images in a slider - again this drives a consistent size of the slider.
Since we are using responsive layouts - the width of the slider is what will then controls / influences the height - as the page scales up / down, the width of the slider will change and so does the height automatically so the image retains the correct aspect ratio. Sliders will typically scale up to the available space - this is why we need to sometimes create a div wrapper to specify max width.
We can control the width by using the trick above and the height will be automatically set to ensure proper aspect ratio of the image is shown.
Trial and error is a great way to find the perfect mix.