[Plugin: Promotion Slider] Thumbnail navigation on the sider resizing slider?

If you know CSS you can arrange the slider and thumbnail navigation to appear any way you want. You can define the width and height, have the thumbnail nav appear on the top, bottom, left or right, etc.

You can easily define the height of the slider by doing so in the shortcode, like this:

[promoslider height="400px"]

I’m planning to use the TwentyEleven theme with a child Theme for a new web site because of the automatic resizing for small screens, for example Android phones, etc.

I appears that Promo slider adjusts the width on small screens, but, unlike the standard header does not scale the height. Is there a setting I can use to make that happen?

I tried [height=”100%”] but it still did not rescale the height down on a screen 400px wide, it just scrunched the width and left the height the same as a full size page.

The slider wasn’t really designed to scale to different sizes. The width is set to automatic so that it will fill whatever space a user places it in. The height is just set to something reasonable and is designed to be altered via the shortcode. For width and height, you can pass any value you normally would in CSS directly into the shortcode.

I don’t really know a good way to scale the height depending on the width. I would be glad include that as a feature if anyone has some pointers, but otherwise I can’t really say that I know how to do this with CSS or would really intend to.

Hi woodent,

Is there a way of rounding the corners of the promo slider?

Any help would be much appreciated.

Cheers
Liam

Absolutely. Rounding the corners is simply a matter of applying the correct CSS rules. You can apply your own css rules in your active theme’s style.css file.

You will need to be sure and apply rounded corners to the .promo_slider div as well as to the .panel divs. Here is a link to a post from CSS Tricks on how to implement rounded corners: https://css-tricks.com/snippets/css/rounded-corners/

Basically, your css should look something like this:

div.promo_slider, .promo_slider div.panel {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -khtml-border-radius: 10px;
}

Superb, thanks woodent.