Slide 1
Make the Perfect Creamy
Lemon Pie
Like a Chef
TIME
20 mins
LEVEL
Medium
BUDGET
Under $30
NEXT RECIPE
Homemade Spice
Slide 2
Basic Formulas for Making
Homemade Spice
TIME
5 mins
LEVEL
Easy
BUDGET
Under $10
NEXT RECIPE
Breakfast Recipes
Slide 3
Breakfast Recipes
You Can Use Everyday
TIME
5 mins
LEVEL
Easy
BUDGET
Under $10
NEXT RECIPE
Lemon Pie

Cooking Slider

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

Description: The Cooking demo helps you create a nice hero slider for your gastronomy blog.

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

Minimum version: 3.5.0.0

Tags:

Best features of the slider

Settings

The Cooking sample is a fresh and modern slider for your food blog. This is a full width slider, so it fills the available horizontal width, so can be a great hero header.

Instead of using the standard arrows, we created a nice looking navigation box. The box contains an image, a title and a description with a nice looking next arrow. If you click on it, you can switch to the next slide with a link action. Also, you can switch slides with the bullet control on the bottom or with a simple mouse drag.

Bullet control

Layers

You can meet with a lot of interesting layers in this slider. The most noticeable layer is the highlighted heading. This highlight is different on each slide, but always calls the visitors attention. The most used layer is the image box in this slider. We have used it 5 times with the left layout, so the image is on the left, and the text is on the right side. The first image box contains a link, and if you click on it, a video opens in a lightbox. The last one also has a link, it uses a link action, and navigates the visitor to the next slide.

Lightbox on the image box

Animations

The slider features the highlighted heading layer which you can use to center your visitors attention. It highlights your heading with a nice animation. After this the animation box comes in with a layer animation. If you click on it, you can switch to the next slide. When you switch slides you can see the new slice background animation, giving a nice touch to the slider.

Background animation

Layout

The slider has a special structure, the layers are in rows and columns. With using rows you can put layers next to each other. The Content layer has a maximum width, so the whole content will be in the left side of the slider.

Maximum width on the content

Responsive

If you check the slider on mobile, you can see there are layers which aren’t visible. They are hidden and with that you can save space, and your slider won’t be too tall.

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.7 s
Largest Contentful Paint
0.9 s
Time to Interactive
0.3 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0.022
93

Mobile

First Contentful Paint
1.1 s
Speed Index
1.4 s
Largest Contentful Paint
3.1 s
Time to Interactive
2.6 s
Total Blocking Time
110 ms
Cumulative Layout Shift
0

Related Post: 12 Beautiful Full Width Slider Examples

Related Post: Introduction of the Brand New Highlighted Heading Layer


Similar Sliders -

Rotating SliderHero SliderStatic Text SliderOrganic Food