Use the Glider WPBakery addons to add Slider

The Glider is a set of two WPBakery Page Builder addons for a slide and slideset creation. These are easy to use and flexible elements that can make your site more engaging and interactive. Clear settings allow you to configure the slider and get the desired result in a short time.

The Glider plugin provides two slider elements with different types of displays to suit all your needs and wishes.

For further work, you need the WPBakery to be installed on your site. You can download from wordpress.org

Open or create a page using WPBakery to start using the Glider or Glider SlideSet WPBakery addons. You will find the widgets on the Content section:

Glider addons on the Content tab

Glider addon Settings

Click on the name or icon of the addon to add it to the page. Each of the tabs presented a specific group of settings:

General

  • Small – select the number of slides to displayed per screen for phones. Affects device widths of 640px and larger.
  • Medium – select the number of slides to display per screen for tablets. Affects device widths of 960px and larger.
  • Large – select the number of slides to display per screen for desktop. Affects device widths of 1200px and larger.
  • Item gutter – select spacing for the items of the slider.
  • Center Mode – when the option is enabled, the active item is centered.
  • Enable Infinite Scrolling – when the option is enabled, items are looped and you can scroll endlessly.
  • Fullscreen mode – enable to make each slide stretches to 100% the height of the viewport.
  • Autoplay – enable automatic item switching.
  • Autoplay Interval – defines the timespan between switching slider items, in milliseconds.
  • Pause on hover – enable pause for autoplay when hovering a slider.

Navigation

  • Show next and previous – The option to enable/disable the display of navigation buttons for switching sliders.
  • Position – Select one of the available positions to display navigation: Default, Bottom Left, Bottom Center, Bottom Right. The option is available if the navigation display is enabled in “Show next and previous”
  • Prev Icon – select icon for the previous nav button from the available library. The option is available if the navigation display is enabled in “Show next and previous”
  • Next Icon – select icon for the next nav button from the available library. The option is available if the navigation display is enabled in “Show next and previous”
  • Icon Size – specify the size of the navigation icons. The option is available if the navigation display is enabled in “Show next and previous”
  • Icon color – specify the color of the navigation icons using the color picker. The option is available if the navigation display is enabled in “Show next and previous”

Style

  • Border color – specify the color of the slider border using the color picker.
  • Border style – select one of the available border styles(Solid, Dotted, Dashed, Hidden, Double, Groove, Ridge, Inset, Outset, Initial, Inherit). Select None to disable the border.
  • Border radius – the option allows you to adjust the border radius for the slider.
  • Background – choose a color or image for the slider background and select the background display mode.

Glider SlideSet addon Settings

General

  • Small – select the number of slides to displayed per screen for phones. Affects device widths of 640px and larger.
  • Medium – select the number of slides to display per screen for tablets. Affects device widths of 960px and larger.
  • Large – select the number of slides to display per screen for desktop. Affects device widths of 1200px and larger.
  • Gutter – select horizontal spacing between columns.
  • Vertical Align – select vertical spacing between sliders.
  • Animation – select one of the available animations to apply for switching between items.
  • Duration of animation – defines the transition duration in milliseconds.
  • Autoplay – enable automatic item switching.
  • Center Mode – when the option is enabled, the active item is centered.
  • Autoplay Interval – defines the timespan between switching slider items, in milliseconds.
  • Pause on hover – enable pause for autoplay when hovering a slider.

Navigation

  • Show next and previous – The option to enable/disable the display of navigation buttons for switching sliders.
  • Position – Select one of the available positions to display navigation: Default, Bottom Left, Bottom Center, Bottom Right. The option is available if the navigation display is enabled in “Show next and previous”
  • Prev Icon – select icon for the previous nav button from the available library. The option is available if the navigation display is enabled in “Show next and previous”
  • Next Icon – select icon for the next nav button from the available library. The option is available if the navigation display is enabled in “Show next and previous”
  • Icon Size – specify the size of the navigation icons. The option is available if the navigation display is enabled in “Show next and previous”
  • Icon color – specify the color of the navigation icons using the color picker. The option is available if the navigation display is enabled in “Show next and previous”
  • Show Dotnav – enable dot navigation with a horizontal layout to navigate through slideset.
  • Dotnav Size – specify the size of the dotnav navigation. The option is available if the navigation display is enabled in “Show Dotnav”
  • Dotnav color – specify the color of the dotnav navigation using the color picker. The option is available if the navigation display is enabled in “Dotnav color”

Style

  • Border color – specify the color of the slider border using the color picker.
  • Border style – select one of the available border styles(Solid, Dotted, Dashed, Hidden, Double, Groove, Ridge, Inset, Outset, Initial, Inherit). Select None to disable the border.
  • Border radius – the option allows you to adjust the border radius for the slider.
  • Background – choose a color or image for the slider background and select the background display mode.

How to add new slides for the Glider slider

Once you have added the Glider or Glider SlideSet element to the page and set up general settings, you can start adding slides.

1.Click on the plus icon in the Glider WPBakery element area.

Add a new slider

2. Select the appropriate item.

Glider Slide

3. Add the necessary content for the current slide.

Slider Content

Hosting for Elementor websites

Fast and reliable hosting is significant for any WordPress site. We recommend all our customers use SiteGround WordPress Hosting. Many unique settings and features make this hosting the number 1 for WordPress: Free Website Transfer, Staging Tools, Free SSL, CDN, and much more for 3.95/mo.

Was this article helpful to you?