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
2. Click on the Style button which you can customize the dots
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.
4. Set the active dot
After that you can customize the active dot: change the color and make it longer.
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;
Core Web Vitals
PageSpeed Insights with Lighthouse analyzed this page on April 12, 2021. For the latest result analyze now!
Desktop
Mobile
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
