Riode Slider

The Slider is a powerful element to show lots of banners, images and any other elements by several items in a restricted area.

Dot & Nav Options

Riode slider element provides lots of customizable options for slider dots and navs with awesome style, shapes, sizes and other options.

01.

Nav & Dot Style

By using Riode slider element, you can change status of slider navs & dots. You can control visibility, shapes, animations, sizes and any other options that you need.

You will never be disappointed with our element!

Element Image
Element Image

02.

Image Navigation

Riode slider element also helps you navigate slides by clicking image thumbnails with classic dots and navs. You can show small thumbnails which represent each slides.

Enjoy Riode slider element with awesome features!

Element Image

Responsive Columns

Riode provides responsive columns option to help you change columns count on desktop, tablet and mobile.

Element Image

More Slider Options

You could change essential slider options using below options. Each options has rich descriptions to make you understand and use easily.

Element Image

Full Height

This options makes each slide of slider have 100vh height.
Element Image

Autoplay

This option makes each slide play sliding automatically.
Element Image

Infinite Loop

This option makes slides of slider play sliding infinitely.
Element Image

Pause on Hover

This option makes slider stop sliding effect when mouse is over.
Element Image

Auto Height

This option makes each slide have their own height.
Element Image

Disable Drag

This option prevents sliding even if customers drag slides to see next one.

Sliding Effect

Riode provides tons of sliding animations which our customers can choose for their demands. Please enjoy our Sliding Effect!

Fading
Zooming
Rotating

Element Options Glossary

Here comes list of all options from our element with explanation in detail. This could probably
help you to find out what each option is for.

  • Columns – Select number of columns to show.
  • Column Spacing – Choose amount of spacing between items. Choose from No Space, Extra Small, Small, Medium, Large.
  • Vertical Align – Choose vertical alignment of items. Choose from Top, Middle, Bottom, Stretch.
  • Show Nav – Determine whether to show/hide slider navigations.
  • Nav Auto Hide – Hides slider navs automatically and show them only if mouse is over.
  • Nav Type – Choose from icon presets of slider nav. Choose from Default, Simple, Simple 2, Circle, Full.
  • Nav Position – Choose position of slider navs. Choose from Inner, Outer, Top, Custom.
  • Nav Horizontal Position – Controls horizontal position of slider navs when nav type is Custom.
  • Nav Vertical Position – Controls vertical position of slider navs when nav type is Custom.
  • Show Dots – Determine whether to show/hide slider dots.
  • Dots Style – Choose what you are going to use for slider dots. Choose from Dots, Images.
  • Dots Type – Choose slider dots color skin. Choose from Default, White, Grey, Dark.
  • Vertical Dots – Shows dots vertically not horizontally.
  • Dots Position – Choose position of slider dots and image dots. Choose from Inner, Outer, Close Outer, Custom.
  • Dots Horizontal Position – Controls horizontal position of slider dots and image dots.
  • Dots Vertical Position – Controls vertical position of slider dots and image dots.
  • Full Height – Set to use 100vh slider.
  • Autoplay – Enables each slides play sliding automatically.
  • Autoplay Timeout – Controls how long each slides should be shown.
  • Infinite Loop – Makes slides of slider play sliding infinitely.
  • Pause on Hover – Makes slider stop sliding when mouse is over.
  • Auto Height – Makes each slides have their own height. Slides could have different height.
  • Disable Drag – Prevents sliding effect even if customers drag slides.
  • Animation In – Choose sliding animation when next slides become visible.
  • Animation Out – Choose sliding animation when previous slides become invisible.
  • Nav Size – Controls size of slider navs.
  • Nav Colors – Choose color, background color, border color of slider navs for normal, hover, disabled status.
  • Dots Size – Controls size of slider dots.
  • Dots Colors – Choose color, background color, border color of slider dots for normal, hover, disabled status.
  • Image Dots Gap – Controls gap space between image thumbnail dots.
  • Image Dots Border – Controls border width and radius of image thumbnail dots.