Black Friday Sale! We are excited to offer a discount of 30% on every Smart Slider plans. Get yours until 29th November!

Buy Now
Sport
- Sport -

Charlie Gouse

Catch. Run. Touch Down.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ornare enim convallis nec mauris. Nisi nisl est, ut sodales. Eget nunc quam morbi amet facilisis. Dignissim id sollicitudin amet cras id feugiat.

Eu mollis turpis cursus nullam fermentum arcu. Purus nunc sit suspendisse neque diam. Vulputate lobortis quam.

Posuere odio facilisis vitae ac. Ipsum hendrerit suscipit accumsan et praesent mattis. Faucibus pellentesque ut id.

Music
- Music -

Lil Я€Đ#00Đ

Beware the Big Bad Wolf.

Tristique neque ut viverra sit ut duis. Luctus vivamus elementum duis aliquet suspendisse leo donec sit. Pharetra aliquam, morbi aliquam velit sed amet condimentum mauris. Rutrum dolor magna.

Ultrices sed faucibus molestie in. Eget rhoncus aliquam aliquam venenatis. Nulla at vitae morbi id parturient ac.

Commodo amet nunc et eu pharetra risus. Eget in ut blandit tincidunt consectetur. Tortor habitant viverra.

Travel
- Travel -

Aram Sarkisian

Bushwalk the whole world.

Dis id nulla ornare nibh dictum. Augue et egestas nunc odio mauris. Lacus posuere lectus eget fringilla quis. Consequat sed amet faucibus a, gravida sollicitudin. Penatibus a nisl mauris felis tellus.

Aliquet mattis urna amet, ante purus aliquet vitae et ullamcorper. Ullamcorper ac pharetra pulvinar.

Purus nunc, dolor felis elementum ullamcorper enim, mattis malesuada hac. Mattis at nulla amet nec, mattis.

Fashion
- Fashion -

Marilyn Aminoff

Ding-dong, Darling. Marvelous!

In vivamus diam vulputate egestas at sit elit. Nunc at ut egestas facilisi nulla. Risus accumsan, integer duis sed. Interdum diam interdum vehicula auctor semper aliquam sapien. Amet a et.

Ut scelerisque ipsum nec non vulputate sapien. Amet at diam elementum tellus consequat. Dui cras faucibus.

Elit nec, sit gravida cras massa sagittis non egestas elit. Aliquet velit erat dictum quisque volutpat. Arcu lacinia.

previous arrow
next arrow

Masterclass

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

Description: The Masterclass template is a gorgeous and colorful slider to use on your site. It has a unique layout which your visitors will love.

Free: Give Smart Slider 3 a try for free. Download now!

Minimum version: 3.5.1.9

Tags:

Slider Settings

The Masterclass template uses the simple slider type. This slider displays one slide at a time and it’s the most common slider type you can see on the web. Displaying a single slide at a time helps the visitor focus on a single message only. Additionally, the template is full width, which means it fills the browser horizontally.

The Masterclass template uses arrows for navigation, but they only appear on desktop. For smaller screen navigation bullets are available instead. Bullets are useful for navigation as they allow the visitor to pick and choose the slide they want to see. Additionally, they also help indicate how many slides there are to see. However, arrows can only be used to navigate one slide at a time forward or backward.

Arrows, hidden on tablet and mobile and bullets, hidden on desktop
Arrows, hidden on tablet and mobile and bullets, hidden on desktop

Layers

You can find the most basic layers on this template. There are headings to display the main headlines: the occupation, name and signature line of each person. There’s a text layer that you can use for a longer description. Additionally, there’s a CTA button on each slide to call the visitors to action. Also, we used an image layer to display each person’s picture.

Animations

The only animation you can find on the Masterclass template is the Main Animation. The Main Animation can move both the backgrounds and layers when the slides change. We used a horizontal effect which looks perfect for a slider like this.

Layout

The Masterclass template uses lots of interesting layout solutions. Specifically, it uses lots of negative margins to break some layers out of the grid. For instance, the main picture and the two boxes have negative margins. The result is quite spectacular and interesting to view.

Negative margin on the big image layer
Negative margin on the big image layer

Responsive

Smart Slider is a responsive slider, which offers tons of responsive settings to fine tune your sliders for small screens. For example, you can reduce the size of the texts using the Font Resizer. Or you can hide layers you don’t want to show on small screens.

There are some responsive settings which the slider does for you automatically. For instance, if you use a row, it automatically wraps its columns into new lines on mobile. This way the content has more space to display.

Mobile look without Wrap (left) and mobile look with Wrap (right)
Mobile look without Wrap (left) and mobile look with Wrap (right)

Core Web Vitals

PageSpeed Insights with Lighthouse analyzed this page on September 21, 2022. For the latest result analyze now!

97

Desktop

First Contentful Paint
0.3 s
Speed Index
1.2 s
Largest Contentful Paint
1.2 s
Time to Interactive
0.9 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0
96

Mobile

First Contentful Paint
1 s
Speed Index
3.8 s
Largest Contentful Paint
2.3 s
Time to Interactive
2.8 s
Total Blocking Time
40 ms
Cumulative Layout Shift
0

Related Post: Are you looking for a Free Slider Revolution Alternative?

Related Post: 15 Beautiful Full Width Slider Examples


Similar Sliders -

Free Caption SliderFree Full WidthFull Width Post SliderFree layer slider