UDesign slider

UDesign provides powerful slider element based on SwiperJS which is focused on modern apps/platforms to bring the best experience and simplicity.

Slider Image

Nav type

Slider navigation is useful to see the next or previous slides. You can also move the slides by dragging the slider area.

Dot type

You can see any slide by clicking slider dots. It is useful to display number of slides and paginate the slider on touch devices.

Slider options galore

Dozens of slider options are supported by this element, so you can fully customize slider layout, navigation style and pagination.

Custom slider options

If you enable loop option, you can see that slides are repeated.

Slider Image

Select nav type

Select your navigation type that will be used in your slider.

Slider Image

Select dots type

Which dots type will you use in your slider. Choose anyone you want.

Unlimited possibilities

Navigation & dot variations

No need premium slider plugins at all. UDesign slider element has all essential features of slider and its usage and capability are perfect.

Nav styles

Slider Image
Slider Image
Slider Image
Slider Image
Slider Image
Slider Image

Dot styles

Slider Image
Slider Image
Slider Image
Slider Image
Slider Image
Slider Image

Glossary

Slider element options

Customize Elements Globally or Individually

  • Prevent Box Shadow Clip: Toggle to prevent that shadow effect is clipped.
  • Columns: Choose the number of columns on responsive.
  • Column Spacing: Choose space between columns.
  • Vertical Align: Control vertical alignment of each items.
  • Enable Loop: Toggle to enable repeat items.
  • Auto Height: Toggle to give height as same.
  • Nav: Toggle to enable nav.
  • Nav Auto Hide: Toggle to auto hide nav.
  • Nav Type: Choose your nav.
  • Nav Position: Choose nav position.
  • Nav Horizontal Position: Control horizontal position of nav.
  • Nav Vertical Position: Control vertical position of nav.
  • Nav Size: Control nav size.
  • Color: Control nav color.
  • Nav Background Color: Control background color of nav.
  • Nav Border Color: Control border color on nav.
  • Nav Box Shadow: Control shadow effect on nav.
  • Dots: Toggle to enable dots.
  • Dots Thumbnail Image: Enable to use thumbnail dots image.
  • Dots Skin: Choose your dot’s skin.
  • Dots Position: Choose dots position.
  • Dots Size: Control position of dots.
  • Dots Background Color: Control background color of dots.
  • Dots Border Color: Control border color of dots.
  • Dots Box Shadow: Control shadow effect of dots.