Slide 1
Giant Tomato

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.

$4/Kilogram

Slide 2
Sweet Mandarin

Suspendisse efficitur eros ligula, eget dapibus ex pellentesque quis. In nec quam auctor. Cras nec odio sit amet erat tristique malesuada nec non libero. Mauris laoreet rhoncus tempor.

$3/Kilogram

Slide 3
Fresh Potato

Suspendisse efficitur eros ligula, eget dapibus ex pellentesque quis. In nec quam auctor. Cras nec odio sit amet erat tristique malesuada nec non libero. Mauris laoreet rhoncus tempor.

$2/Kilogram

Slide 1
Slide 2
Slide 3
previous arrow
next arrow

Organic Food

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

Description: The Organic Food slider combines trendy animations like the Ken Burns Effect and mouse based layer parallax to help you create an outstanding website.

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

Minimum version: 3.4.0

Tags:


Settings

The most common sliders you can see on websites display a single slide at a time. The Organic Food slider is similar to these popular sliders. In Smart Slider, we call these traditional sliders Simple type sliders. They display a single slide, which can fill its container, the full width of the page, or the full width and height of it. This Organic Food template takes up the full width of the page. Full width sliders give plenty of space to display content. As a result, they help showcasing gorgeous images.

The slider doesn’t have arrows for navigation, but it has thumbnail images. They’re located at the bottom of the slider. What makes them looks special is that they look like half of them is on the slider, and half of them below. This happens, because of the size and position of the thumbnails.

Thumbnail control settings of the Organic Food slider

Layers

The most special layer on this slider is a Highlighted heading layer. This layer draws a special shape around the highlighted text, which helps drawing attention to it.

The white layer on the left is a row, which has 500px maximum width. This limits the space the row can take up, which allows seeing bigger part of the slide background image.

Animations

There are three cool animations on the slider. First, the most noticeable animation is the Ken Burns effect. The Ken Burns effect is a zooming and panning effect, which came to the web from video editing. In this slider, the effect slowly scales down the images. In fact, web designers love using the Ken Burns effect because it’s subtle yet elegant. So, it helps making the images stand out.

The second animation is a Main animation. The Main animation is the effect, that can affect both layers and slide backgrounds. At this slider the Main animation is a simple fading animation. It fades out the background images, and also the layers. Since the layers have an incoming animation, the Main animation doesn’t fade them in. Instead, the layer’s incoming animation makes the layers appear on the slide.

The last effect on the Organic Food slider is the most fun one. It’s the layer parallax effect, which makes them react to the mouse movement. As a result, when the cursor moves to one direction, the layers move to the opposite direction.

Layout

The Organic Food slider uses both Default positioned and Absolute positioned layers. Default positioned layers are great to build content. They let you create a good looking, responsive slider super fast. In fact, Default positioned layers generally need little to no responsive adjustments. They’re marked with a blue color on the canvas.

Default (blue) and Absolute (purple) positioned layers

Absolute positioned layers, on the other hand, are great for creating decorative elements. Although their responsive behavior isn’t as great as Default layers’, you can place them anywhere on your slider. On the canvas they’re marked with a purple color.

Responsive

Like any slider you’ll create with Smart Slider 3, the Organic Food slider is responsive, too. This means that the slider is enjoyable even on the smallest screens. To help with this, we hid the Absolute positioned layers on mobile devices. As a result, they won’t cover the content.

The text sizes have been reduced, too, to make the highlighted heading fit better to the mobile screen. We also adjusted the padding on the Content layer, to make the slides look less crowded.

Default mobile look (left) and optimized mobile look (right)

Core Web Vitals

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

99

Desktop

First Contentful Paint
0.3 s
Speed Index
0.7 s
Largest Contentful Paint
1 s
Time to Interactive
0.3 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0.04
93

Mobile

First Contentful Paint
1.1 s
Speed Index
2.1 s
Largest Contentful Paint
3.2 s
Time to Interactive
2.7 s
Total Blocking Time
50 ms
Cumulative Layout Shift
0

Related Post: Use the Popular Ken Burns Effect on your Slider

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


Similar Sliders -

Full-width Thumbnail SliderTeam SliderAutoplaying Thumbnail SliderTestimonial Thumbnail