Positioning the thumbnail scroller

The orientation of the thumbnail scroller can be set to 'horizontal' or 'vertical'. When the orientation is horizontal, the scroller is positioned below the slider, and when the orientation is vertical, the scroller is positioned to the right of the slider. If you want to position the scroller above or to the left of the slider, you will need to use some custom CSS code.

1. Thumbnail scroller above the slider

#my-slider .thumbnail-scroller.horizontal {
    margin-top: 0;
    top: 0;
#my-slider .slider-main {
    padding-top: 100px;

2. Thumbnail scroller to the left of the slider

#my-slider .thumbnail-scroller.vertical {
    margin-left: 0;
    left: 0;
#my-slider .slider-main {
    padding-left: 200px;

The padding you set for the '.slider-main' element depends on the size of the thumbnail scroller. You might need to set it to a lower or higher value.

Have more questions? Submit a request


Article is closed for comments.
Powered by Zendesk