How to integrate Piio and bx Slider together.

We know that the Slider is the first impact with the brand and it is a good "tool" to call the attention of your audience. But if you invest time choosing the correct images for the slider, and the images don't load correctly, the users will never see them. Follow the steps to integrate Piio and bx Slider on your website and achieve an optimized Slider.

Following this steps, you could take advantage of the lazy loading feature and defer offscreen images load, which represents an improvement on your website performance. Lazy loading is a technique used to delay the loading of the objects, when the user scrolls down, until they objects are needed. In other words, it works "on demand".

Define a class

The first thing you need to do is to define a class in your CSS. This allow you to hide elements that aren’t within the slider viewport. Let’s call it lazy:

.lazy { display:none }

Then, you are going to set this class lazy to the images you want to work with lazy loading. As you don’t need to defer the load of the first image, then excepts adding the lazy class to it.

Remember to set your image URL as data-src value (excepting the first image) and set a blank image at src to avoid the broken image icon the first time every image tag is loaded.

The result should be like this:

If you load your site at this point, you are going to see only the first slide image, while the others are hidden. That’s exactly what you wanted until now.

Make the images visible

The last step is to make the images visible once each slide is shown. You need to get the next slide and remove its lazy class. Set the original image URL as the value of the data-piio attribute.

To achieve that, you just need to add the following code to your bx Slider initialization.

onSlideBefore: function($slideElement, oldIndex, newIndex) { var $lazy = $slideElement.find(".lazy"); var $load = $lazy.attr("data-src"); $lazy.attr("data-piio", $load); $lazy.removeClass("lazy"); }

Getting as the final result:

('.bxSlider').bxSlider({ onSlideBefore: function(slideElement, oldIndex, newIndex) { var $lazy = $slideElement.find(".lazy"); var $load = $lazy.attr("data-src"); $lazy.attr("data-piio", $load); $lazy.removeClass("lazy"); } ... });

In this piece of code, you are not only removing the lazy class, but also you are going to set the data-piio attribute to allow Piio to make the optimization magic!

The Result: Bx Slider

Now, when you load your site, only the first slide image is loaded. The other images are going to be loaded as needed when each slide is shown.

Hoping this brief guide helps you enhance your website performance and give a better user experience.

If you want to learn more about how image optimization works, continue reading here! We recommend to improve the entire Web Performance.