The swiper module is a gallery of images, you can set different animations as transitions such as a cube, slide, fade and coverflow. The swiper can be used in any type of format, and any device (highly recommended on touch devices).
The swiper is mainly a container with 2 or more slides which contain background images and may contain animations, text elements, on-top images, and video. The transition between slides can be set to 5 different effects:
Make sure that the scripts are within the HTML file, and that the function to create the slider (createSlider) is being called in the correct .html file.
To add the swiper to your creation please do the following:
- Download the attached ZIP file (swiper.zip).
- Add the following stylesheets and script to your format in de <head> after the other scripts:
- Add createSwiper(); to your HTML file when your document in ready.
- Add this div tag to your body:
Set positioning within the CSS part referring to the same div ID
- Replace the images (slide#.jpg) and video files (weborama_video.mp4) with your own, or adjust the file names below in the array. Note. If you are making use of video, please make sure that your video poster is renamed to 'video_poster_~slidenumber~'. For example, you have your video on slide 2, name your video poster 'video_poster_2.jpg'.
- Please follow the instructions within the swiper.js file for further adjustments to the slider, such as width, height, effect.
- Note. Do not forget to upload all files within the folder to the Weborama Previewer together with your other files.