If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

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.

JS Animated. How to add link to Faded slider

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:

    JS_Animated_How_to_add_link_to_Faded_slider

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

    JS_Animated_How_to_add_link_to_Faded_slider_1

  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
    			});
    			});
    		

    JS_Animated_How_to_add_link_to_Faded_slider_2

  4. You should replace

    bigtarget: true, with bigtarget: false,

  5. Click Save button to save changes:

    JS_Animated_How_to_add_link_to_Faded_slider_3

  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:

    JS_Animated_How_to_add_link_to_Faded_slider_3

  9. Refresh your page to see changes.

Feel free to check the detailed video tutorial below:

JS Animated. How to add link to Faded slider