slide 1
Image Slide 2
White Brown Cow
Image Slide 1
Highland Cattle
Image Slide 3
Grizzly Bear
previous arrowprevious arrow
next arrownext arrow
Shadow

Image Slider

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

Description: A beautiful free image slider improves the visual appearance of your website.

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

Minimum version: 3.5.0.0

Tags:

Settings

Simple but elegant design elements are the future of web design. This applies to sliders and galleries, too. This simple Image Slider is a great way to display an image slider on any website. It’s a boxed slider, which makes it perfect to publish inside posts or any non-full width sections. The slider’s structure is quite simple, as it has three slides only. The visitor can go through every slide using the arrows, bullets, swiping or dragging.

Settings of the arrow control
Settings of the arrow control

Layers

Each slide has a short caption that describes the image of the slide. The font color of the caption is white, and there’s an opaque dark background behind it. This ensures that the text remains legible regardless of the image behind it. The font family is Raleway, which is easy to read, especially in such a big size.

Style of the heading
Style of the heading

Animations

When you switch a slide with a mouse drag or with the arrows, the next slide fades in. This fading effect is the main animation which you can customize at the Animations tab of the Slider settings. It can be a horizontal, a vertical animation, or you also can disable it if you don’t need that animation.

Fading main animation
Fading main animation

Layout

At the bottom of the slider there’s a dark shadow. It’s created by the Shadow control feature. There are seven predefined shadows, and in the Pro version it’s possible to upload a custom image. Just like every control, shadows can be hidden on desktop, tablet or mobile devices. Shadows are great to make the slider pop off the page giving the impression that visitors can physically interact with the slider. Shadows also help to state hierarchy between the slider and the rest of the page. They make the slider appear above the rest of the page content.

Shadow control
Shadow control

Responsive

Thanks to default positioning, the caption remains legible on mobile. The caption is positioned to the the bottom-left corner of the slide on big screens. But on small mobile screens, the caption is moved to the center of the slide. This small change improves the look of the slider on small screens.

Core Web Vitals

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

99

Desktop

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

Mobile

First Contentful Paint
0.9 s
Speed Index
0.9 s
Largest Contentful Paint
2.9 s
Time to Interactive
1 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0

Related Post: How to Create Beautiful Responsive Image Slider?


Similar Sliders -

Autoplaying Thumbnail SliderShowcase SimpleFlickr SliderThumbnail slider