Jul - 2016

One by One Slider for Serif Webplus

one by one serif
HiĀ  guys this is a quick tutorial on how to add the One by One 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.   one by one serif  

[creativ_button url=”https://www.mixupmarket.com/serif/addons/one-by-one/” icon=”th-large” label=”View Demo” colour=”dark-gray” colour_custom=”” size=”medium” edge=”rounded” target=”_blank”]

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. Hereis the basic functions of the slider

easeType: 'random', // options: random, rollIn, fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight, fadeInRight, bounceIn, bounceInDown, bounceInUp, bounceInLeft, bounceInRight, rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight
width: 980,
height: 370,
slideShowDelay: 3500, // 3.5 seconds
slideShow: true

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 images

<a href="#"><img src="images/slider3_element_2.png" alt="img"

change the image file paths to your images files and then change the captions to what ever you want it to say the animations are controlled by the animate.css file and the jquery.onebyone.css file you will have to export to disk folder to modify these 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.

Item Price

Free file
  • Quality checked by Mixup Market
  • Future updates available

Previous Article

JFancy Tile Slider for Serif Webplus

Next Article

How to create a 404 error page with website x5

There are no comments.

Write a comment

All fields marked with an asterisk (*) are required.