Circle Theme
Content slider drag and freedrag

Content slider mouse and touch drag and freedrag examples.

Live drag

See active and current slides right away.

Slide title 1

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 2

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 3

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 4

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 5

Some quick example text to build on the slide title and make up the bulk of the slide content.

Free drag

Slide title 1

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 2

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 3

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 4

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 5

Some quick example text to build on the slide title and make up the bulk of the slide content.

Stay at the dragged position

Slide title 1

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 2

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 3

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 4

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 5

Some quick example text to build on the slide title and make up the bulk of the slide content.

Free drag + live drag.

Text section 1

Praesent eget porttitor augue, ac tristique nulla. Morbi consequat dictum efficitur. Curabitur vitae erat quam. Integer dapibus quam non congue efficitur. Pellentesque quis tortor at neque lobortis auctor. Aenean facilisis dolor non venenatis finibus. Mauris hendrerit enim non elit elementum, non molestie risus efficitur.

Sed ut leo pellentesque, fringilla purus sed, tempus est. Nullam eget vehicula diam. Praesent convallis aliquet sapien, bibendum auctor ipsum viverra eu. Duis quis felis non augue aliquam elementum dignissim ut augue. Curabitur in dui vitae quam aliquam dapibus. Fusce a velit lobortis, aliquam massa vel, porttitor velit.

Sed ut leo pellentesque, fringilla purus sed, tempus est. Nullam eget vehicula diam. Praesent convallis aliquet sapien, bibendum auctor ipsum viverra eu. Duis quis felis non augue aliquam elementum dignissim ut augue. Curabitur in dui vitae quam aliquam dapibus. Fusce a velit lobortis, aliquam massa vel, porttitor velit.

Text section 2

Praesent eget porttitor augue, ac tristique nulla. Morbi consequat dictum efficitur. Curabitur vitae erat quam. Integer dapibus quam non congue efficitur. Pellentesque quis tortor at neque lobortis auctor. Aenean facilisis dolor non venenatis finibus. Mauris hendrerit enim non elit elementum, non molestie risus efficitur.

Sed ut leo pellentesque, fringilla purus sed, tempus est. Nullam eget vehicula diam. Praesent convallis aliquet sapien, bibendum auctor ipsum viverra eu. Duis quis felis non augue aliquam elementum dignissim ut augue. Curabitur in dui vitae quam aliquam dapibus. Fusce a velit lobortis, aliquam massa vel, porttitor velit.

Sed ut leo pellentesque, fringilla purus sed, tempus est. Nullam eget vehicula diam. Praesent convallis aliquet sapien, bibendum auctor ipsum viverra eu. Duis quis felis non augue aliquam elementum dignissim ut augue. Curabitur in dui vitae quam aliquam dapibus. Fusce a velit lobortis, aliquam massa vel, porttitor velit.

Text section 3

Praesent eget porttitor augue, ac tristique nulla. Morbi consequat dictum efficitur. Curabitur vitae erat quam. Integer dapibus quam non congue efficitur. Pellentesque quis tortor at neque lobortis auctor. Aenean facilisis dolor non venenatis finibus. Mauris hendrerit enim non elit elementum, non molestie risus efficitur.

Sed ut leo pellentesque, fringilla purus sed, tempus est. Nullam eget vehicula diam. Praesent convallis aliquet sapien, bibendum auctor ipsum viverra eu. Duis quis felis non augue aliquam elementum dignissim ut augue. Curabitur in dui vitae quam aliquam dapibus. Fusce a velit lobortis, aliquam massa vel, porttitor velit.

Sed ut leo pellentesque, fringilla purus sed, tempus est. Nullam eget vehicula diam. Praesent convallis aliquet sapien, bibendum auctor ipsum viverra eu. Duis quis felis non augue aliquam elementum dignissim ut augue. Curabitur in dui vitae quam aliquam dapibus. Fusce a velit lobortis, aliquam massa vel, porttitor velit.

Text section 4

Praesent eget porttitor augue, ac tristique nulla. Morbi consequat dictum efficitur. Curabitur vitae erat quam. Integer dapibus quam non congue efficitur. Pellentesque quis tortor at neque lobortis auctor. Aenean facilisis dolor non venenatis finibus. Mauris hendrerit enim non elit elementum, non molestie risus efficitur.

Sed ut leo pellentesque, fringilla purus sed, tempus est. Nullam eget vehicula diam. Praesent convallis aliquet sapien, bibendum auctor ipsum viverra eu. Duis quis felis non augue aliquam elementum dignissim ut augue. Curabitur in dui vitae quam aliquam dapibus. Fusce a velit lobortis, aliquam massa vel, porttitor velit.

Sed ut leo pellentesque, fringilla purus sed, tempus est. Nullam eget vehicula diam. Praesent convallis aliquet sapien, bibendum auctor ipsum viverra eu. Duis quis felis non augue aliquam elementum dignissim ut augue. Curabitur in dui vitae quam aliquam dapibus. Fusce a velit lobortis, aliquam massa vel, porttitor velit.

Text section 5

Praesent eget porttitor augue, ac tristique nulla. Morbi consequat dictum efficitur. Curabitur vitae erat quam. Integer dapibus quam non congue efficitur. Pellentesque quis tortor at neque lobortis auctor. Aenean facilisis dolor non venenatis finibus. Mauris hendrerit enim non elit elementum, non molestie risus efficitur.

Sed ut leo pellentesque, fringilla purus sed, tempus est. Nullam eget vehicula diam. Praesent convallis aliquet sapien, bibendum auctor ipsum viverra eu. Duis quis felis non augue aliquam elementum dignissim ut augue. Curabitur in dui vitae quam aliquam dapibus. Fusce a velit lobortis, aliquam massa vel, porttitor velit.

Sed ut leo pellentesque, fringilla purus sed, tempus est. Nullam eget vehicula diam. Praesent convallis aliquet sapien, bibendum auctor ipsum viverra eu. Duis quis felis non augue aliquam elementum dignissim ut augue. Curabitur in dui vitae quam aliquam dapibus. Fusce a velit lobortis, aliquam massa vel, porttitor velit.

Vertical text sections sliding, with free drag and live drag.

Adaptive height

Adaptive height can be used with live and free drag

Text sliding

Praesent eget porttitor augue, ac tristique nulla. Morbi consequat dictum efficitur. Curabitur vitae erat quam. Integer dapibus quam non congue efficitur. Pellentesque quis tortor at neque lobortis auctor. Aenean facilisis dolor non venenatis finibus. Mauris hendrerit enim non elit elementum, non molestie risus efficitur.

Some title text

Sed ut leo pellentesque, fringilla purus sed, tempus est. Nullam eget vehicula diam. Praesent convallis aliquet sapien, bibendum auctor ipsum viverra eu. Duis quis felis non augue aliquam elementum dignissim ut augue. Curabitur in dui vitae quam aliquam dapibus. Fusce a velit lobortis, aliquam massa vel, porttitor velit.

Another title

Sed ut leo pellentesque, fringilla purus sed, tempus est. Nullam eget vehicula diam. Praesent convallis aliquet sapien, bibendum auctor ipsum viverra eu. Duis quis felis non augue aliquam elementum dignissim ut augue. Curabitur in dui vitae quam aliquam dapibus. Fusce a velit lobortis, aliquam massa vel, porttitor velit.

Bootstrap jumbotron slide

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.


Some quick example text to build on the slide title and make up the bulk of the slide content.

Learn more

Bootstrap form slide

We'll never share your email with anyone else.
Bootstrap media slide

Some quick example text to build on the slide title and make up the bulk of the slide content.

Bootstrap card slide

Some quick example text to build on the slide title and make up the bulk of the slide content.

With live drag

Text sliding

Praesent eget porttitor augue, ac tristique nulla. Morbi consequat dictum efficitur. Curabitur vitae erat quam. Integer dapibus quam non congue efficitur. Pellentesque quis tortor at neque lobortis auctor. Aenean facilisis dolor non venenatis finibus. Mauris hendrerit enim non elit elementum, non molestie risus efficitur.

Some title text

Sed ut leo pellentesque, fringilla purus sed, tempus est. Nullam eget vehicula diam. Praesent convallis aliquet sapien, bibendum auctor ipsum viverra eu. Duis quis felis non augue aliquam elementum dignissim ut augue. Curabitur in dui vitae quam aliquam dapibus. Fusce a velit lobortis, aliquam massa vel, porttitor velit.

Another title

Sed ut leo pellentesque, fringilla purus sed, tempus est. Nullam eget vehicula diam. Praesent convallis aliquet sapien, bibendum auctor ipsum viverra eu. Duis quis felis non augue aliquam elementum dignissim ut augue. Curabitur in dui vitae quam aliquam dapibus. Fusce a velit lobortis, aliquam massa vel, porttitor velit.

Bootstrap jumbotron slide

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.


Some quick example text to build on the slide title and make up the bulk of the slide content.

Learn more

Bootstrap form slide

We'll never share your email with anyone else.
Bootstrap media slide

Some quick example text to build on the slide title and make up the bulk of the slide content.

Bootstrap card slide

Some quick example text to build on the slide title and make up the bulk of the slide content.

With free drag and live drag.

Text sliding

Praesent eget porttitor augue, ac tristique nulla. Morbi consequat dictum efficitur. Curabitur vitae erat quam. Integer dapibus quam non congue efficitur. Pellentesque quis tortor at neque lobortis auctor. Aenean facilisis dolor non venenatis finibus. Mauris hendrerit enim non elit elementum, non molestie risus efficitur.

Some title text

Sed ut leo pellentesque, fringilla purus sed, tempus est. Nullam eget vehicula diam. Praesent convallis aliquet sapien, bibendum auctor ipsum viverra eu. Duis quis felis non augue aliquam elementum dignissim ut augue. Curabitur in dui vitae quam aliquam dapibus. Fusce a velit lobortis, aliquam massa vel, porttitor velit.

Another title

Sed ut leo pellentesque, fringilla purus sed, tempus est. Nullam eget vehicula diam. Praesent convallis aliquet sapien, bibendum auctor ipsum viverra eu. Duis quis felis non augue aliquam elementum dignissim ut augue. Curabitur in dui vitae quam aliquam dapibus. Fusce a velit lobortis, aliquam massa vel, porttitor velit.

Bootstrap jumbotron slide

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.


Some quick example text to build on the slide title and make up the bulk of the slide content.

Learn more

Bootstrap form slide

We'll never share your email with anyone else.
Bootstrap media slide

Some quick example text to build on the slide title and make up the bulk of the slide content.

Bootstrap card slide

Some quick example text to build on the slide title and make up the bulk of the slide content.

With free drag and live drag, but resize only on current change.

Drag to closest only

Allow to moving to previous or next slides only, after dragging.

Slide title 1

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 2

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 3

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 4

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 5

Some quick example text to build on the slide title and make up the bulk of the slide content.

Don't move slides

Slides movement while dragging can be disabled, best with drag to closest.

Slide title 1

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 2

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 3

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 4

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 5

Some quick example text to build on the slide title and make up the bulk of the slide content.

Drag speed

Custom slider move animation speed to the closest slide, after it's dragging.

Slide title 1

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 2

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 3

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 4

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 5

Some quick example text to build on the slide title and make up the bulk of the slide content.

Drag threshold

Threshold to advance slides.

Slide title 1

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 2

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 3

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 4

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 5

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide treeshold. Requires to drag full slide length to advance (threshold - 1, treeshold type - slide).

Slide title 1

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 2

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 3

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 4

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 5

Some quick example text to build on the slide title and make up the bulk of the slide content.

Requires to drag atleast 100px to advance (threshold - 100, treeshold type - static).

Edge friction

Resistance when swiping edges in non-loop slider.

Slide title 1

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 2

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 3

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 4

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 5

Some quick example text to build on the slide title and make up the bulk of the slide content.

Allow to move a little out of the edges, edge friction = 0.15.

Slide title 1

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 2

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 3

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 4

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 5

Some quick example text to build on the slide title and make up the bulk of the slide content.

Don't allow to move out of the edges, edge friction = 0.

Disable dragging

Both mouse and touch drag can be disabled.

Slide title 1

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 2

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 3

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 4

Some quick example text to build on the slide title and make up the bulk of the slide content.

Slide title 5

Some quick example text to build on the slide title and make up the bulk of the slide content.