Person Slider Widget [ PRO ]

The Person Slider Widget is the best way to showcase your personnel on  About Me or Team Member pages, where you would like to highlight their bio. This widget brings together text, imagery, social media links and a smooth slider in a cohesive manner. Use the may settings provided to create unique designs.

DEMO


Admin Label : The name you add here will appear in the page builder under the widget name. This helps with easy identification of the contents of the widget.


Team

This is a repeater field. You can add as many as you like.

Name : The name of the person.

Person

Image : Select an image from the Media Library.

Designation : The designation/position of the person.

About : A brief summary about the person.

Social

Use this section to add links to social profiles.

Open link in : Choose to open the social link in the same tab or a new tab.

Profiles

Link : Input the URL of the social profile.

Icon : Select an icon.


Slider Settings

Adaptive Height : Changes the height of the slider with changes in the slider height.

Autoplay : Enables autoplay.

Autoplay Speed : The autoplay speed in milliseconds.

Pause Autoplay on Focus : Pauses autoplay on mouse hover.

Pause Autoplay on Hover : Pauses autoplay on slider focus.

Arrow Navigation : Enables arrow navigation.

Arrows only on hover : Displays arrow navigation only when mouse hovers over slider.

Previous Arrow : Icon for previous arrow.

Next Arrow : Icon for next arrow.

Dots Navigation : Enables dots navigation.

Pause Autoplay on Dots Hover : Pauses autoplay on dots hover.

Fade Transitions : Use fade effect while slides are changing. This setting is not functional with carousel sliders.

Infinite Loop : Infinite loop sliding.

Carousel : Display slider as a carousel.

Carousel item for xlarge screens : Specify the number of people to show on screens above 1440px.

Carousel item for large screens : Specify the number of people to show on screens between 1024px to 1440px.

Carousel item for medium screens : Specify the number of people to show on screens above 640px to 1024px.

Carousel item for small screens : Specify the number of people to show on screens below 640px.


Person Styling

Layout : Choose from Image AboveImage to the left and Image to the right.

Design : Choose from BasicIcon over image and About over image.

  • Basic: The elements are neatly arranged one below another.
  • Icon over image: Here the icons are placed above the person’s image and is visible on hover.
  • About over image: Here the about text is placed above the person’s image and is visible on hover.

Image Width : Uncheck to disable the fullwidth image.

Image Corners : Choose the shape of the person’s image.

Image Hover Overlay Color : Choose a overlay color for the person’s image. Leave blank for transparent. Will be most useful when icon or about sections are above the image.

Image Hover Opacity : Define the opacity of the overlay color. 0 is transparent & 100 is opaque.

Icon Color : Choose the color of the social icons.

Icon Hover Color : Choose the color of the social icons for mouse hover.

Content Background Color : Choose the background color for the content section. This is the portion below the image.

Padding above content section : Choose to place a gap above the content section.

Name Color : Choose the color for the name.

Designation Color : Choose the color for the name.

About Color : Choose the color for the about text.

Text Alignment : Set the alignment of the text. You can align it left, center or right. This applies for the name, designation, about and social icons.


Slider Styling

Slider Side Padding : Add a little space along the left and right edges of the slider. This is useful if you want to accommodate the navigation icons outside the slider. 

Icon Color : Arrow Navigation icon color.

Icon Size : Arrow Navigation icon size.

Icon Background : Arrow Navigation icon background.

Icon Border : Arrow Navigation icon border color.

Icon Border Width : Arrow Navigation icon border thickness.

Icon Padding : Distance around the arrow navigation icons. The background color will extend till here.

Icon Margin : Distance around the arrow navigation icons. Useful to create a gap between the slider and the slider edge.

Icon Border Shape : Arrow Navigation icon border radius.

Dots Color : Color of the dots navigation.

Dots Size : Size of the dots navigation.

Gap between carousel items : Adds a small gap between people when carousel is enabled.