The slider will automatically scale to fit within any block it’s placed in. In this example, it’s been placed in a full width structure bloc.
In this example, it’s been placed in a full width structure bloc set for full screen width.
Download the zip file and decompress. Open the folder named horizontaSliderv2.hyperesources Inside you will see 20 image files. Each of these images have a 6:9 ratio. The sample images vary slightly in size so you can see how the slider works when using images of different sizes and aspect ratios. Our example images are all around 1280 x 853 px. The dimensions of the images will dictate the size and shape of the lightbox that opens when images are clicked.
Repalce these images with your own, but be sure to keep the file names the same. If you vary the aspect ratio too much, your images may squeeze or stretch when viewed in the slider. However, they will display without distortion in the lightbox.
In the zip file there is an HTML document that includes the two peices of code needed to add to your blocs project. The document is named horizontaSliderv2.html Open this in a plain text or code editor and look for the clearly marked head and body code.
Start by copying the head code and add it to the head of your blocs page. You do this by clicking on the settings icon next to your page name at the top-right of the Blocs interface. From the settings dialog, click Add Code and paste to the head of your document.
Next, copy the body code and add an HTML Widget bric where you want your slider to appear. With the widget selected on the page, click the Edit Code Button in the blocs sidebar. Paste your code into the dialog that opens.
If your version of Blocs is 2.5.3 or above, you can add the resouce folder to your project through the Asset Manager. If you have a version of blocs below 2.5.3, you will have to export your web page and then add the resources folder to the export folder.
You can now preview your site in your local browser. If all is well, just upload your site with any ftp application.
The slider uses its own lightbox code. This will conflict with the lightbox feature built into blocs. Therefore, you should avoid using the blocs lightbox feature on any page where the slider is used. If you do, blocs will display a “+” symbol over the top of your slider images when scrolling.
The slider was built with Tumult Hype. If you have a copy of Hype and would like the original project file, click the link below to download it.
You will need Hype 3 Pro.
By having the project file, you will be able to fully customise the slider by reducing or increasing the number of images, or replacing
all or some images with text containers.
Big Thanks to the guys over at the Temult Hype forums for their invaluable assitance in getting this slider working.
All Images in the demo are courtesy of Pixabay