Slide 1
01
Winter Collection
Denim Shirt

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Cum sociis natoque penatibus et .

02 - Sunglass Sale
Slide 2
02
Summer Collection
Sunglass Sale

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Cum sociis natoque penatibus et .

03 - Accessories
Slide 3
03
Men’s Essential
Accessories

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Cum sociis natoque penatibus et .

01 - Denim Shirts
previous arrow
next arrow

Fashion Slider

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

Description: Fashion slider is a stylish and modern slider to showcase the newest trends or hottest items of your webshop.

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

Minimum version: 3.5.0.0

Tags:

Best features of fashion slider

💡 Best features in this slider
  1. Arrow control
  2. Image layer in absolute position with layer parallax
  3. CTA button
  4. Row with link action
  5. Bullet control

Settings

The fashion slider example shows a simple but spectacular way of creating a trendy slider that shines on any modern website. It’s a stylish slider that looks wonderful for any webshop. The slider is a full page slider, it fills the full width and height of the browser. It stays from 3 slides, and there are more ways which you can navigate between them. You can simply drag, but you can use the arrow and bullets controls. If it isn’t enough each slide contains a row which you can navigate to the next slide.

Layers

The slides have the same structure, and same layers with different content. There is a row with 2 columns, the left column contains 2 image layers, and the content is on the right side. There are heading layers, text layer, button layer, and there is a row inside the other. This row is special because it has a link action on it, so when you click on the row, you can navigate to the next slide.

Link action on the row

Animations

We added the layer mouse parallax effect to add an extra touch to this modern slider. You can see this effect if you move your mouse above the slider. When you switch a slide, you can see the background animation. These slice background animations give a clean and modern look to your slider. They’re super eye-catching so your visitors will love them.

Background animation

Layout

Smart Slider has 2 positioning options: default and absolute. With default position you can create your layout easily, you can put your layers under each other, or with using rows and columns you can put them next to each other. The other positioning is the absolute which you can put your layers everywhere in the canvas, and you can put a layer above or below to others. We have used both in this slider.

Layers in default and absolute position

Responsive

The slider looks astonishing on mobile devices and tablets as well. If you check it on mobile, you can notice there are layers which aren’t visible. You can hide layers on different devices, which you can save space, and your visitor can focus on the important parts.

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.3 s
Speed Index
0.7 s
Largest Contentful Paint
0.6 s
Time to Interactive
0.4 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0
95

Mobile

First Contentful Paint
1.2 s
Speed Index
2 s
Largest Contentful Paint
2.6 s
Time to Interactive
3.5 s
Total Blocking Time
230 ms
Cumulative Layout Shift
0

Related Post: What is a Full Page Slider and How to Use it?

Related Post: Everything You Need to Know about the Parallax Effect


Similar Sliders -

Full Page PortfolioNextchatFullsize SliderFull Page Particle Slider