Ferdinand McAvoy
01 / 05
Ferdinand McAvoy
CEO & PUBLISHER

Ferdinand joined us as CEO in 2014, and his vision is to make the company an indispensable partner, providing excellence. A true creative at heart, he loves what he does, especially working with talented people and producing great work.

“I get to work with an extremely accomplished designers all with a unique mix of talent and we get to tackle some fantastic projects together.”
Lara Madrigal
02 / 05
Lara Madrigal
DESIGNER

Lara has over 10 years’ experience in the design industry. During this time, she has developed skills across many areas including branding, illustration, UI design, print and web design. She loves to be challenged and to enhance her skillset.

“Being a member of such a talented team is constantly inspiring. We each bring our passion to the studio to make our company a very special creative hive.”
Deborah Barbosa
03 / 05
Deborah Barbosa
BRAND STRATEGIST

Deborah describes brand strategy as her perfect blend of critical thinking and collaborative research, one that encourages her natural love of questions and genuine interest in people.

“We are fortunate enough to get to work with many internationally recognised brands, on interesting projects, which makes working at our company an exciting place to be.”
Martijn Dragonjer
04 / 05
Martijn Dragonjer
PARTNER

Martijn joined the team in early 2015, after ten years working in the film industry. With a strong background for sales and marketing, Will was excited to bring a new perspective to the team.

“There is a constant buzz here, everyone is driven and focused on producing the best work possible for clients. It is a very rewarding place to work with fantastic clients .”
Dominik Doudny
05 / 05
Dominik Doudny
DEVELOPER

Dominik has a passion for developing sites with clean, beautiful code. Dominik’s love for full-stack web development makes him a great asset that can take on back-end code and front-end UI needs if necessary.

“What makes a good company enjoyable? Working with enthusiastic members of well-structured teams of engaging characters.”
Ferdinand McAvoy
Lara Madrigal
Deborah Barbosa
Martijn Dragonjer
Dominik Doudny
previous arrow
next arrow

Team Slider

💻 Settings | 🎓 Layers | 🎉 Animations | 🏗️ Layout | 📱 Responsive | Speed

Description: A team slider focuses on the members of your team. It gives personal touch to your company's website, and helps building trust in your hesitant customers.

Premium: Gain access to all slider templates with a single purchase.

Minimum version: 3.5.0.0

Tags:

Settings

A team slider is a kind of slider that focuses on the members of your team. It gives a nice, personal touch to your company’s website, and helps building trust in your hesitant customers. This slider allows navigating slide by slide in three ways. You can drag or swipe towards the right or left side, to switch to the next or previous slide. You can also use the white arrow on the blue background at the middle bottom. The third, and the most eye-catching is the thumbnail navigation.

We placed the thumbnails to the right side of the slider, aligned to the bottom of it. The thumbnails allow the visitor to see all your team members at once. Clicking any thumbnail switches to the slide with the person’s slide.

Thumbnail settings
Thumbnail settings

Layers

You can see heading, text and image layers on each slide, which are placed in rows and columns, and have different styles.

Smart Slider 3 has a cool feature, that allows you to rotate any layer, including rows and columns. At this slider we rotated a heading layer, which we use to show how many team slides are available, and which one is currently visible.

Rotate option at Smart Slider 3’s layer window
Rotate option at Smart Slider 3’s layer window

Animations

Smart Slider 3 has many cool effects you can use to make your sliders more interesting. We added some of the best effects to the Team Slider demo, to help you create a modern and responsive slider fast.

The most spectacular effect of the slider is the Reveal Animation. Reveal Animation is a cool and modern effect to introduce or remove layers from your slider.

Reveal layer animation
Reveal layer animation

Layout

The layers are placed in different rows and columns. The basic of the slider is a row with 2 columns. The left column contains 2 other rows: one on the top and one on the bottom. The top row has another row with the 3 image layers on it. On the column in the right side is only one image layer which displays a team member.

Structure of the slider
Structure of the slider

Responsive

When you check the slider in smaller devices, you can notice there are layers which are hidden on tablet and mobile. The hide option can help to make your slider smaller on mobile and tablet.

Hide on mobile option
Hide on mobile option

Core Web Vitals

PageSpeed Insights with Lighthouse analyzed this page on April 12, 2021. For the latest result analyze now!

100

Desktop

First Contentful Paint
0.4 s
Speed Index
0.9 s
Largest Contentful Paint
0.6 s
Time to Interactive
0.4 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0.039
98

Mobile

First Contentful Paint
1.1 s
Speed Index
2.2 s
Largest Contentful Paint
2.2 s
Time to Interactive
3 s
Total Blocking Time
140 ms
Cumulative Layout Shift
0

Related Post: 12 Beautiful Full Width Slider Examples

Related Post: Introducing Reveal Animation