Summary

  • Overview
  • Video Lesson
  • Add Slider
  • Add New Slide
  • Add Elements To Slide
  • Slider Resize
  • Slider Properties
  • Slider Animation
  • Slider in Mobile Views
  • Swipe For Sliders

Overview

Use the Slider Element to present your content as slides in a Block. Unlike the Full-Width Block Slider, the Slider Element is usually smaller and is only a component in a Block, similar to sliding cards, for example, Testimonials.

slider.jpg

Video Lesson

Add Slider

You can add the Slider Element from the Add Elements list in the Top Bar.

adding-slider.png

Add New Slide

You can add a new empty Slide in the Slider Element or duplicate any existing one.

adding-new-slide.png

Add Elements To Slide

You can include any Element in a slide, not only Images or Text. Each Slide can have different combinations of Elements.

adding-element-to-slide.png

Slider Resize

You can modify the Size of the Slider to be unequal to the Block size.

slider-resize.gif

Slide Order

You can change the Slide Order by dragging the Slide Bar at the top of a Slide.

slide-reorder.gif

Slider Properties

For the Slider Element, you can customize properties, including the Animation, Arrows, and Indicators.

slider-properties.png

Slider Indicators

You can choose the Shape for the Slider Indicators. The Indicators can be linear or circular.

circle-slider-indicators.png

Change Slide with Arrows (Editor)

You can click the Slider Arrows to change Slides. When you click the Slider Arrow in the Preview, you will see the Animation while switching Slides.

slider-arrows.gif

Slider Arrows

You can modify the Icon Style for the Slider Arrows. You can adjust the Width and Height of the Arrows.

slider-arrow-width-height.png

You can also place the Slider Arrows outside the Slider. You can also drag the Arrows outside the boundaries of the Slider elements, which allows you to create interesting layouts used in modern web design. You can also move the Slide Indicators freely.

slider-arrows.png

Slider Animation

You can specify the Animation properties for the Full-Width Block Slider.

slider-animation.gif

Element Animation in Slides

You can also animate Elements added to Slides of the Slider Element.

adding-element-animation.gif

You can use the Animation on all Elements.

slide-animation-property.png

Slider in Mobile Views

You can modify each Element in the slide size and position for each Mobile View.

slider-responsive.png

Swipe For Sliders

You can use the swipe for Sliders on mobile devices.

swipe-slider-mobile-devices.gif

## Summary - Overview - Video Lesson - Add Slider - Add New Slide - Add Elements To Slide - Slider Resize - Slider Properties - Slider Animation - Slider in Mobile Views - Swipe For Sliders ## Overview Use the Slider Element to present your content as slides in a Block. Unlike the Full-Width Block Slider, the Slider Element is usually smaller and is only a component in a Block, similar to sliding cards, for example, Testimonials. !slider.jpg! ## Video Lesson <iframe style="width: 600px; aspect-ratio: 16 / 9;" src="https://www.youtube.com/embed/PjKDCSy8C18" title="Nicepage Lessons: Slider Element" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> ## Add Slider You can add the Slider Element from the Add Elements list in the Top Bar. !adding-slider.png! ## Add New Slide You can add a new empty Slide in the Slider Element or duplicate any existing one. !adding-new-slide.png! ## Add Elements To Slide You can include any Element in a slide, not only Images or Text. Each Slide can have different combinations of Elements. !adding-element-to-slide.png! ## Slider Resize You can modify the Size of the Slider to be unequal to the Block size. !slider-resize.gif! ## Slide Order You can change the Slide Order by dragging the Slide Bar at the top of a Slide. !slide-reorder.gif! ## Slider Properties For the Slider Element, you can customize properties, including the Animation, Arrows, and Indicators. !slider-properties.png! ## Slider Indicators You can choose the Shape for the Slider Indicators. The Indicators can be linear or circular. !circle-slider-indicators.png! ### Change Slide with Arrows (Editor) You can click the Slider Arrows to change Slides. When you click the Slider Arrow in the Preview, you will see the Animation while switching Slides. !slider-arrows.gif! ## Slider Arrows You can modify the Icon Style for the Slider Arrows. You can adjust the Width and Height of the Arrows. !slider-arrow-width-height.png! You can also place the Slider Arrows outside the Slider. You can also drag the Arrows outside the boundaries of the Slider elements, which allows you to create interesting layouts used in modern web design. You can also move the Slide Indicators freely. !slider-arrows.png! ## Slider Animation You can specify the Animation properties for the Full-Width Block Slider. !slider-animation.gif! ## Element Animation in Slides You can also animate Elements added to Slides of the Slider Element. !adding-element-animation.gif! You can use the Animation on all Elements. !slide-animation-property.png! ## Slider in Mobile Views You can modify each Element in the slide size and position for each Mobile View. !slider-responsive.png! ## Swipe For Sliders You can use the swipe for Sliders on mobile devices. !swipe-slider-mobile-devices.gif! ##