Easy for novice, powerful for experienced users

Overscroll and Align

The following examples demonstrate the differences between the overscroll types in conjunction with the slides align.

1. Circular Sliders

Infinite sliders. The Overscroll option (General section) does not have any effect on circular sliders.

Clicking on a small navigation image scrolls the selected slide to the left/center/right. Clicking on the previous or next buttons (top-right corner) scrolls the slides by the width of the view and the slides will be aligned to the left/center/right. The same happens when you are using the left or right arrow keys on the keyboard to navigate (click on a slide before using the arrow keys). Finally, the slides will be aligned to the left/center/right after dragging (just click on a slide and start dragging).

1.1 Circular, Slides align - left

General section > Circular: enabled
General section > Slides Align: left

thumbnail

1.2 Circular, Slides align - center

General section > Circular: enabled
General section > Slides Align: center

thumbnail

1.3 Circular, Slides align - right

General section > Circular: enabled
General section > Slides Align: right

thumbnail

2. Non-Circular Sliders

Finite sliders. The Overscroll option specifies the amount of space before the first and after the last slide. It limits the scrolling area of the slides.

2.1 Overscroll - none

No space before and after the slides.

2.1.1 Overscroll - none, Slides align - left

General section > Circular: disabled
General section > Overscroll: none
General section > Slides Align: left

thumbnail

2.1.2 Overscroll - none, Slides align - center

General section > Circular: disabled
General section > Overscroll: none
General section > Slides Align: center

thumbnail

2.1.3 Overscroll - none, Slides align - right

General section > Circular: disabled
General section > Overscroll: none
General section > Slides Align: right

thumbnail

2.2. Overscroll - min

The minimum amount of space that is required for the alignment of slides to be met. If the slides align is left/top, then no space before the leftmost/topmost slide and as much space after the rightmost/bottommost slide as needed for the slides to be left/top aligned. If the slides are centered, then as much space before and after the slides that is needed for the slides to be centered.

2.2.1 Overscroll - min, Slides align - left

General section > Circular: disabled
General section > Overscroll: min
General section > Slides Align: left

thumbnail

2.2.2 Overscroll - min, Slides align - center

General section > Circular: disabled
General section > Overscroll: min
General section > Slides Align: center

thumbnail

2.2.3 Overscroll - min, Slides align - right

General section > Circular: disabled
General section > Overscroll: min
General section > Slides Align: right

thumbnail

2.3 Overscroll - max

As much space as needed for the first and last slides to be positioned as the "Slides Align" option specifies. If the slides align is left/top, then no space before the leftmost/topmost slide and as much space after the rightmost/bottommost slide as needed for the last slide to be positioned to the left/top. Finally, if the slides are centered, then as much space before and after the slides that is needed for the first and last slides to be centered.

2.3.1 Slides align - left

General section > Circular: disabled
General section > Overscroll: max
General section > Slides Align: left

thumbnail

2.3.2 Slides align - center

General section > Circular: disabled
General section > Overscroll: max
General section > Slides Align: center

thumbnail

2.3.3 Slides align - right

General section > Circular: disabled
General section > Overscroll: max
General section > Slides Align: right

thumbnail

More features

This is a demo site for the Dottoro Slider,
which is part of the Dottoro WordPress Theme
i