View from the window to Norway fjord
A Motorcycle Ride to Nowhere
Cycling from England to Russia
previous arrowprevious arrow
next arrownext arrow
Slider

Ligthbox Slider

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: 3.3.0

Tags:

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


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 -

Joomla Article SliderHorizontal Accordion SliderThumbnail sliderHow to create block with video background for WordPress