Create slideshow with HTML: There are these variants
If creating your own slideshow in Javascript and HTML is too complicated for you, you can also create stylish presentations using plugins. In this article, we present various external slideshows that you can integrate into your website.
Lightbox 2 - simple pop-up slideshow
Many websites use the Lightbox plugin to display pictures and picture galleries. You can integrate Lightbox into any website. Lightbox can be downloaded for free from the developer's website.
- After unpacking and uploading the files to your web server, you can easily integrate the plugin into your website. To do this, set two references in the head area of your page to the Javascript files contained - if you have already integrated jQuery, you only have to include the "lightbox.min.js". The embed code works like this:
- So that the pop-up window also looks good, you have to include the CSS file from Lightbox - this also happens in the header:
- Images can now be easily combined into groups using a link with the attribute data-lightbox, which are then played back when a picture is called up in a slideshow. To assign images to a group, they simply have to have the same data-lightbox attribute: Image # 1
SlidesJS - touch-optimized slider with quick integration
SlidesJS is another way to quickly add picture galleries to your website. The tool is integrated into the website in a similar way to Lightbox 2, but in contrast, as a DIV container, it is always displayed on the website as a slider. The plugin is therefore also suitable for chic headers or information boxes.
- Various examples are presented on the website for quicker entry and for demonstration - here you will also find detailed instructions on how to integrate them. As with Lightbox, this is done by integrating various files in the head area of the page.
- SlidesJS works responsively, that is, regardless of the size of the user's screen, the images are displayed correctly - practical. If you can't get along with SlidesJS, there is a well-known alternative with the Nivo Slider.
Do you want to improve the slider graphically? With CSS and our practical tip on round corners of website images, it works.