JS Animated. How to manage Camera slideshow

This tutorial will show you how to manage Camera slideshow in JS animated template.

Editing existing slides:

1. Open the JS Animated template folder and go to the site folder. Depending on a template structure you can see several index.html files (index.html, index-1.html, index-2.html, etc.) or a single one. In any case open index.html file with your HTML editor like Adobe Dreamweaver or Notepad:

   

2. Find the slider section where you can see part of code for every separate slide. So there you can change the slider title or the button title:

   

3. In order to change the slide image, go to the /images/ folder and replace one of the slider images with a new slide image. You have to name your image the same way as the default slide image:

   

Adding a new slide.

1. Open index.html file and copy part of code that defines one slide and paste it at the very bottom after the code for the last slide:

   

2. In that code you will see the path to the slide image, so rename it and paste the image with the same name to the images folder. The new slide with the image will appear:

   

Deleting slide.

1. Open index.html file and define part of code that refer to the needed slide.

2. Delete that code and save the changes.

Changing slides order.

1. Open index.html file and select part of code for the slide which order needs to be changed.

2. Cut the code and paste it after that slides code after which you want to show a slide on your site. If you want slide 1 goes after slide 2, then code for the slide 1 has to be placed after the code for the slide 2:

   

3. Save the changes and slides order will be changed.

Feel free to check the detailed video tutorial below: