Categories

Featured templates

JS Animated. How to add link to Faded slider

Kate Daniels October 29, 2015
Rating: 5.0. From 2 votes.
Please wait...

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
This entry was posted in JS Animated tutorials and tagged Faded, HTML, link, slider. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket

Live Chat
We help you to choose the right product.