/ in Serif Webplus Tutorials, Sliders / by
Last modified on:

Media Slider for Serif Webplus

Hi  guys this is a quick tutorial on how to add the Media slider addon to your serif webplus project, the instructions are simple to follow, so we hope you have fun with the serif webplus addons that we have created for you.

You do not need to touch any of the scripts.


media slider serif


  View Demo

The first thing you need to do is download the widget from our serif addons page or click on the link below this tutorial, unzip or unrar the file to a folder of your choosing, you the need to click on the assets tab on the left hand side of your serif webplus window (see the image below), click on open  and then add add it from the folder you saved our file in.

You then should see the red square with the name of the addon.

serif 1

Click on the addon and then put it into your project, you should have a html fragment like below

serif 2

Double click on the fragment to open it up this is where you will see the code so you can edit and make changes if you wish to do so.

serif 5

Please note that the image above is to show you an example of what the widget looks like.

Here are the basic functions of the Kenburns Panel slider

auto:true, // auto play slides
autoDelay: 4000, // time before next slide (4000 = 4 seconds)
easingCarousel: "swing", // slide effect
easingDetails: "easeOutBack",
durationCarousel: 800,
durationDetails: 500

Changing the default images for your own.

click on files you will see a list of files, all the files have there own custom folders, image files are stored in the images folder, highlight the images and the delete, click on browse and add your own images, then click on export,clickon the images folder and then click ok.

serif 9

Find the below code and change to your image locatons or add your video links for vimeo or youtube

<img src="images/banner1.jpg" height="341" width="704">

<iframe src="https://player.vimeo.com/video/4749536?color=ffffff" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" frameborder="0" height="340" width="704"></iframe>

<iframe src="https://www.youtube.com/embed/FG0fTKAqZ5g?rel=0" allowfullscreen="" frameborder="0" height="340" width="704"></iframe>

change the image file paths to your images oradddvimeo or youtube links, and change the captions at the side to whatever you want.

And that is it just save your project and preview it in a browser of your choice if your happy publish it to your domain.

Any problems let us know and we will try to help as much as we can.

Post preview

Kenburns Panel Slider for Serif Webplus

Hi  guys this is a quick tutorial on how to add the Kenburns Panel slider addon to your serif webplus…

Carousel Slider for Serif Webplus

Hi  guys this is a quick tutorial on how to add the Carousel slider addon to your serif webplus project,…

Leave a reply

Your email address will not be published. Required fields are marked *