hb-LogoSwiper
with automatic import of images from a directory,
external image descriptions and full screen

A modern 'mobile touch slider' with hardware accelerated transitions
for presenting images

English flag   German flag
Double click for Fullscreen
01_Piz_Boe.jpg

Piz Boe (Dolomites)

View from Piz Boe down into the valley. The Piz Boe (3152 m) is the highest peak of the Sella Group in the Dolomites. If you climb up the south side (some steeper sections are secured by wire ropes), you have this magnificent view down just before you reach the summit hut.
02_Passo_Stelvio.jpg

Stelvio Pass - Queen of the Alpine Passes

The Passo Stelvio (Stelvio Pass) is also known as the "Queen of the Alpine Passes" and is a special challenge for sports cyclists. After almost 26 km of ascent you reach the pass height of 2757 m. With two other passes in France, the Stelvio Pass is one of the three highest motorable passes in the Alps. - Here you can look back at the Hotel Franzenshöhe, which is 6 km before the top of the pass. In the last 6 kilometers there are the famous 48 hairpin bends that give the climb a terraced course.
03_Montafon.jpg Snow idyll in the Montafon ski area
05_flower.jpg Flowering on Easter Monday
09_Hopovo.jpg Hopovo Monastery in Serbia
06_Bad_Nauheim.jpg Art Nouveau baths in Bad Nauheim (Germany)
19_tealight.jpg This circle of fabric angels sits around a tealight.
13_cats.jpg Mimi and Fridolin on a discovery tour
14_Mimi.jpg This is Mimi
12_letter_scale.jpg What's going on here?
11_flower.jpg Framed picture with flower
11
11
01_Piz_Boe.jpg
02_Passo_Stelvio.jpg
03_Montafon.jpg
05_flower.jpg
06_Bad_Nauheim.jpg
09_Hopovo.jpg
11_flower.jpg
12_letter_scale.jpg
13_cats.jpg
14_Mimi.jpg
19_tealight.jpg

Download this example (single slider)

➔ Download example 1 (last updated: 2023-02-20)

 

Copy the downloaded files to a web space and call up 'index.php'.

Extensions

The freely usable 'Mobile Touch Slider' SWIPER ➔ https://swiperjs.com has been provided with four extensions.

Extension 1:

The HTML code for the individual images is generated automatically. A reference to the directory with the images is sufficient. In autoplay mode, an individual display time for each image is possible.

Extension 2:

Additional image descriptions are displayed outside the slider. They switch synchronously to the images. The image descriptions are automatically read from a simple text file (.txt). A reference to the text file is sufficient.

Extension 3:

A double click on the slider switches the full screen mode on and off. In full-screen mode, the pure images can be viewed without the image descriptions.

Extension 4:

A stationary mouse cursor over the image will be hidden.

Instructions

The slider is added to your own website with the following steps:

Step 1:

Upload the hbSlider folder to the web space.

Step 2:

In the <head> tag add the lines
<link rel="stylesheet" href="https://cdn.jsdelivr.net/ npm/swiper@9/swiper-bundle.min.css" />
<link rel="stylesheet" href="hbSwiper/css/swiper.css" />
<link rel="stylesheet" href="hbSwiper/css/mySwiper.css" />.

In the <body> tag add the line
<?php include "hbSwiper/php/hbSwiper_1.php"; ?>
at the desired position.
Add the line
<?php include "hbSwiper/php/scripts.php"; ?>
before the closing </body> tag.

Step 3:

Create a folder with the images and enter the path to this folder in the file named 'hbSwiper/php/init_1.php' in the '$imgFolder' variable.

Step 4:

Create a text file (.txt) with the image descriptions and enter the path to this file in the file named hbSwiper/php/init_1.php in the $textFile variable.

In the text file, each line begins with the filename of an image. After the file name follows a tab character as a separator for the image description and then the text of the image description. The image description ends with a line feed (ENTER key). The image description can also consist of HTML code. The order of the picture descriptions is arbitrary.

Step 5:

Make the settings for Swiper in the files named hbSwiper/script/init-swiper.js and hbSwiper/script/swiper_1.js.

Step 6:

Possibly adapt the styles in the files named hbSwiper/css/mySwiper.css and hbSwiper/css/swiper.css.

More information

If you want an individual display time for some images in autoplay mode, you can append two underlines and a number to the file name of the image in question, which indicates the display time in milliseconds. For example, change "birthday.jpg" to "birthday__5000.jpg". This addition may be missing in the text file with the image descriptions. So you don't have to change the image descriptions file every time you try out different display durations.

If no image descriptions are to be displayed, an empty string is assigned to the $textFile variable in the hbSwiper/php/init_1.php file. In the hbSwiper/css/mySwiper.css file, min-height=0 is set for the #myImgDescription_1 element.

If you generally do not use image descriptions, but want to import the images automatically from a directory, you can download a slimmer version of the hbSwiper without the functionality for image descriptions:

➔ Download example without image descriptions (last updated: 2023-02-20)

Multiple sliders on one page

An example with two sliders on one page can be seen here:
➔ See example 2

Download example 2 - multiple sliders on one page

➔ Download example 2 (last updated: 2023-02-20)

 

Copy the downloaded files to a web space and call up 'index.php'.

To add a second slider on the same page, the following steps are required:

Step 1:

Create a second folder with images and a second text file for the image descriptions.

Step 2:

Add the line
<?php include "hbSwiper/php/hbSwiper_2.php"; ?>
in the index.php file at the desired location.

Step 3:

In the hbSwiper/php/ folder, create the files hbSwiper_2.php and init_2.php. In the hbSwiper/script/ folder, create the swiper_2.js file. Adjust all three files accordingly (see example 2).

Step 4:

Add the line
<script src="hbSwiper/script/swiper_2.js"></script>
in the hbSwiper/php/scripts.php file.

Step 5:

In the hbSwiper/css/mySwiper.css file, add styles for the #mySwiperContainer_2 and #myImgDescription_2 elements.

For questions and suggestions:

mail@hermann-baum.de