NEW version of Horizontal Slider

As an improvement to the original Horizontal slider posted HERE, I’ve now given it some additional functionality and made it simpler to add your own images. The instructions for embedding into your own Blocs project are exactly the same as detailed in the original post - just copy and paste the head and body code from the horizontaSliderv2.html file and paste the head code to the head of your blocs page and paste the body code into an html widget.

The difference in this version is the addition of a responsive lightbox. Clicking on an image will open a lightbox that acts like an infinite carousel gallery - when you reach the last image, it automatically starts back at the first image.

When replacing images in the resource folder, you still have to use the same image names. However, there is no need to also add a 2x version of your images. You also have greater flexibility in the size of your images. In fact, the size of images you upload will determine the size and proportions of the lightbox. Just be aware, that the images in the slider are essentially placeholder slots of a fixed 6:9 ratio. Therefore, if your images differ from this ratio too much, they may look squeezed or stretched in the slider.

Just to reiterate from the original post, the slider can be set at the full width of the block it is displayed in, or the full width of your screen.

You can see a demo of how it works HERE.

The zip file containing the slider can be downloaded from the demo page. There is also a link to download the original Hype source file if you would like to tinker with it yourself (Hype 3 Pro required)

Enjoy.

3 Likes

Wow that is really cool :+1: Thank you very much

great thank you :+1:

Hi @hendon52

Thank you very much, it’s a very good thing for the Blocs community.
Hugely grateful! :raising_hand_man: