JS Animated. How to add link to Faded slider

This tutorial will show you how to add a link to Faded slider in JS Animated templates.

As a rule, clicking an image is set to switch to next image without having an option to use custom links instead.

1. Log into your hosting cPanel and navigate to File manager:

   

2. Open your root folder and find index.html file, click Edit icon:

   

3. Scroll to the end of the file and find this code:

   			$(function(){
   			$("#faded").faded({
   			speed: 1200,
   			crossfade: true,
   			bigtarget: true,
   			autoplay: 4800,
   			autorestart: 1200,
   			autopagination: true
   			});
   			});
   		

   

4. You should replace

   bigtarget: true, with bigtarget: false,

5. Click Save button to save changes:

   

6. Then you should find the code with faded slider in the same file, here is an example of code:

   			<div id="faded">
   			<div class="rap">
   			<img src="images/img1.jpg" alt="" width="675" height="400" />
   			<img src="images/img2.jpg" alt="" width="675" height="400" />
   			<img src="images/img3.jpg" alt="" width="675" height="400" />
   			<img src="images/img4.jpg" alt="" width="675" height="400" />
   			<img src="images/img5.jpg" alt="" width="675" height="400" />
   			</div> 
   			</div>
   		

7. Let’s add a link to the first slider image. Link should be added by using href tag, for example:

   			<a href="http://google.com/"><img src="images/img1.jpg" alt="" width="675" height="400" />
   			</a>
   		

8. Enter the desired link for slider image and click Save button to save changes. The links for other images should be added the same way:

   

9. Refresh your page to see changes.

Feel free to check the detailed video tutorial below: