This slider is a clean, modern looking product showcase using pastel colors which fit perfectly into any kind of website. It features a photo app product but it can be used to feature any other product, or even your company itself. It is a full page slider which means that it fills the width and height of the browser in any screen size. (The size of the menu is excluded from the calculation, using the Vertical offset selectors option.)
Navigate between product showcase slides
There are several possible methods to navigate between the slides in this slider: on the right side, there is a bullet control, it is possible to switch slides using the arrow keys (down key to go to the next slide and up key to go back one slide), the slides can be dragged to the same direction. It is also allowed to scroll upwards or downwards to go from a slide to another one. Since the Carousel option is turned off, after the last slide is reached, the slider will allow to scroll further down the page without switching slides continuously, so the visitors can check your other content. The navigation is also possible by clicking on a “Scroll for more” button which takes to the next slide from slide one to slide three, and on the last slide, scrolls below the slider.
Photo App slider in depth
There are some interesting features set at the slider settings that would worth mentioning before we would talk about the slides individually. If you’ve checked the slider already, and you went back to a previously visited slide, you might have noticed that the layer animations are not playing again. It is happening because of the Play once setting, which was turned on for the Photo App Slider.
Now let’s take a look at the first slide. It’s a simple, clean slide, with a few layers (image, heading and text) and layer animation on all of them. It is a perfect and fancy way to introduce your product or your company.
Product showcase layer – animation with events
While the first slide was a simple but elegant one, the second slide is way more interesting. This slide has layer animations just like the first one, but most of these animations are tied strongly with the events: for example, the “Hover me” layer stays visible until you hover over the first transition layer (the one with the number 1 on it), but if you don’t hover over this layer, only the other two transition layers, it will stay right there. (Otherwise it will fade out immediately.) While you hover over any transition layer, you’ll notice that the image beside the mobile gets covered by another one that appears because the transition layer was hovered. Hover on the other transition layers, too, to see a different image appear beside the mobile each time. It looks fantastic, your visitors will love it!
Lightbox to display several pictures
Slide three starts with a simple IN layer animation which rotates the phone, and then the other images fall to their respective places. The result is pretty impressive. There is also a YouTube video in a lightbox for the visitors to watch. You’ll also find smaller icons created using the image layer.
Call to action button layer
In addition, the last slide has some remarkable layer animations. However, the part that’s worth mentioning the most is the nice-looking call to action button beside the large image. As mentioned before, the mouse scrolling will allow the visitors to go further down on the page and check other contents. There is a Scroll for more button, that will simply scroll below the slider, making faster and easier for the visitor to reach new content.
Core Web Vitals
PageSpeed Insights with Lighthouse analyzed this page on April 12, 2021. For the latest result analyze now!
Desktop
Mobile
Related Post: What is a Full Page Slider and How to Use it?
Related Documentation: Full page responsive mode
