javascript - JS slider - is it possible to hyperlink my images? -


i've found code simple img slider can't seem hyperlink images.

$(function() {    $('.slider :first-child').appendto('.slider').show();    setinterval(function() {      $('.slider :first-child').hide().appendto('.slider').fadein(1000);    }, 3000);  });
.js .slider img { display: none; }  .js .slider img:first-child { display: block; }    .slider {  	position:relative;  }    .slider img {  	max-width: 980px;  	position:absolute;  	left:0;  	top:0;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <div class="slider">    <a href="https://www.google.co.uk" target="_blank"><img src="http://unsplash.it/375/150"></a>    <img src="http://unsplash.it/375/148">    <img src="http://unsplash.it/375/149">    <img src="http://unsplash.it/375/152">    <img src="http://unsplash.it/375/151">  </div>

i've tried didn't work:

<a href="https://www.google.co.uk" target="_blank"><img src="../files/images/banners/01.png"></a> 

also, less importantly, first image seems take ages (about 10 seconds) move next 1 change every 3 seconds after that. can see wrong code make first 1 hang?

oh, , know little js :)

thanks in advance.

you have following issues in code

  1. .js .slider img in css part not apply, in given code .slider not in element having .js class. change .slider img. .js .slider img:first-child .slider a:first-child img
  2. you need put <img> tag in side <a> tag enable hyper link.
  3. you need replace selector $('.slider :first-child') in setinterval function $('.slider :first').
  4. image load take time can put code in $(window).load(function() {});

demo


Comments

Popular posts from this blog

Magento/PHP - Get phones on all members in a customer group -

php - .htaccess mod_rewrite for dynamic url which has domain names -

Website Login Issue developed in magento -