Slide 1
View from the window to Norway fjord
Slide 2
A Motorcycle Ride to Nowhere
Slide 3
Cycling from England to Russia
previous arrowprevious arrow
next arrownext arrow

Lightbox Slider

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

Description: At the Lightbox slider example you can encounter with a lot of Pro features together: split text animation, layer animation and Ken Burns effect.

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

Minimum version:


At the Lightbox slider example you can encounter with a lot of Pro features together. In spite of all these, you can see a really clear slider with a simple layout. But if you check it carefully, you will experience a lot of cool things. Firstly, you will see the split text animation on the Heading layer and the incoming layer animations. Besides that there is an effect on the background image which is a soft Ken Burns effect and makes your slider more powerful.

The buttons are also special because of their actions. If you click on the first button, a gallery appears in a lightbox, where you can display your images without crop and you can also save space on your webpage. On the second button there is a NextSlide action, so if you click on that, it will navigate you to the next slide. What is even more cool? The special unique bullets at the bottom.

How to create unique bullets on your slider?

Bullets are great navigation tools which can show how many slides are on the slider, and you can jump to any slide. In Smart Slider 3 Pro you can choose from a lot of different types of bullets, but you can customize every type. In the template above you can see a customized bullet. How can you achieve that?

1. Choose the square type bullet from the list

Bullets in Smart Slider 3

2. Click on the Style button which you can customize the dots

Customize dot

3. Set the normal dots

At the Normal tab of the Style manager you can change the background color of the non-active bullets, and you can change the padding as well. In this example the bullets will be rectangle instead of square, so the bottom-top and left-right padding will be different.
Normal dot

4. Set the active dot

After that you can customize the active dot: change the color and make it longer.
Active dot

5. Use transition

At the end of all these you can use a simple CSS to make the transition fine.
You can use this code:
transition: all 0.5s ease;
Extra CSS

Core Web Vitals

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



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


First Contentful Paint
1.1 s
Speed Index
1.5 s
Largest Contentful Paint
3.7 s
Time to Interactive
1.8 s
Total Blocking Time
10 ms
Cumulative Layout Shift

Related Post: Add Lightbox Slider to your WordPress site

Related Post: Configure Slider Autoplay and Create Automatically Rotating Slider

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

Similar Sliders -

Static testimonialAutoplaying Thumbnail SliderWordPress carousel post sliderWordPress Magazine Slider