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
.js .slider img
incss
part not apply, in given code.slider
not in elementhaving .js class
. change.slider img
..js .slider img:first-child
.slider a:first-child img
- you need put
<img> tag
in side<a> tag
enable hyper link. - you need replace selector
$('.slider :first-child')
insetinterval function
$('.slider :first')
. - image load take time can put code in
$(window).load(function() {});
Comments
Post a Comment