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 -

spring cloud - How to configure SpringCloud Eureka instance to point to https on non standard port -

javascript - Bootstrap Popover: iOS Safari strange behaviour -