Add multiple image to the same layer with animation
Flip images 3d in a WordPress slider
Gym
Opening Hours
6AM - 12PM
Call us
+357 5488 6688
write us
energym.com
Yoga

Balance your Life

Yoga designed to help achieve a more positive outlook on life and a focused, permanent sense of serenity and peace.

Price
$50
Intensity
Easy
Duration
40-80 min
Trx

Your Body Your Machine

TRX is a form of suspension training that uses body weight exercises to develop strength, balance, flexibility and core stability simultaneously.

Price
$40
Intensity
Medium
Duration
60 min
Tabata

Torch Fat With Tabata

Tabata is a form of HIIT that alternates between 20 seconds of intense bursts of work and 10 seconds of rest in four-minute rounds.

Price
$20
Intensity
Easy
Duration
45 min
Gym

Build Muscles Today

Learn to increase muscle and stamina today! Build endurance with our specialized Kettlebell courses focused on conditioning.

Price
$5/$28
Intensity
Medium
Duration
60 min
Massage

Swedish Massage Therapy

Learn to increase muscle and stamina today! Build endurance with our specialized Kettlebell courses focused on conditioning.

Price
$40
Intensity
-
Duration
60 min
Cardio

Feel the Burn

Cardio exercise is physical exercise of low to high intensity that depends primarily on the aerobic energy-generating process.

Price
$100
Intensity
Hard
Duration
60 min
previous arrow
previous arrow
next arrow
next arrow

Gym Slider

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

Description: This slider is a clean and modern way to introduce your fitness club, health center or beauty salon. But don’t worry you can change anything easily if you have any other project.

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

Minimum version: 3.4.1.6

Tags:

Settings

The Gym slider uses a boxed layout, so the slider can be as big as the container it’s in. You can navigate in 4 ways in the slider: you can drag, use the arrow control in the left and right, use the bullets on the bottom, or you can click on the transition images on the right side of the slider. They have a link action which you can navigate to another slide.

Layers

Sometimes you don’t need complex animations on your images, you don’t even need the image to move, just to be replaced by another image when the mouse is over it. Transition layer is the perfect choice to achieve this. The usage is extremely simple: put the transition layer, select the two images you would like to use (the first one will be shown at first, when there is no user interaction on the image, the second one will be shown when the visitor’s mouse is over the first image), choose the animation that will be played when the images are changing and you are done.

Transition layer
Transition layer

You can select from three animation types that will be used at the Transition layer. One of them is the simple Fade which will fade out the first image, and fade in the second one. The other two animations work the same way: images flipped in 3D vertically or horizontally.

Animations

Image transition animations are used to catch the visitor’s attention and make them interested in your story. Usually they are complex, they move constantly, making the user focus on the events that are happening in front of their eyes.

Also the layers also have a layer animation, when you load the slider, you will notice the ongoing animations. You can use the timeline to set the animation duration and the delay, and it can help you to synchronize them.

Visual timeline
Visual timeline

Layout

The first slide has a special layout, it has a tile layout. It stays from more rows. The basic of the layout is a row with two columns. The left column contains the image and the textual content, and you can see more rows in the right side.

Layout of the first slide
Layout of the first slide

Responsive

The slider is fully responsive, and looks good on mobile and tablet. If you check it on mobile, you will notice that the whole right basic column is missing, because it is hidden on mobile. It can save space on your page, but the visitors can see there are more slides thanks to the bullets on the bottom.

Hidden column in mobile
Hidden column in mobile

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

Mobile

First Contentful Paint
1.2 s
Speed Index
1.6 s
Largest Contentful Paint
3 s
Time to Interactive
2.8 s
Total Blocking Time
230 ms
Cumulative Layout Shift
0

Related Post: Create a Unique Layer Slider with Smart Slider 3


Similar Sliders -

Autoplaying Thumbnail SliderVertical ThumbnailWordPress carousel post sliderTestimonial Thumbnail