Bagaimana caranya menaru link (URL) di kode ini Image Slider ini biar bisa diklik dan tetap normal?

saya dapat kode ini dari <a href='http://www.bahasaprogram.com/2016/02/cara-membuat-image-slider-responsive.html '>http://www.bahasaprogram.com/2016/02/cara-membuat-image-slider-responsive.html </a> keren, dan sederhana terus tidak kodenya tidk terlalu panjang. tp bagaimana caranya agar foto yang terganti bisa diberi link sehingga saat diklik bisa ke halaman yang ditujuh. kalau pake <a herf:# ....> img dst... di depan gambar, slider-nya malah berantakan, nda bergerak lagi dan fotonya muncul semua.

Mohon bantuannya, terima kasih.

KODE

 <html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="content">
 <title>Responsive Image Slider</title>
 <script type="text/javascript" src="js/jQuery-2.1.4.min.js"></script>
 <script type="text/javascript" src="js/jquery.cycle2.min.js"></script>
<style type="text/css">
 * { margin: 0; padding: 0; }
 img { max-width: 100%; }
 .cycle-slideshow {
  width: 100%;
  max-width: 960px;
  display: block;
  position: relative;
  margin: 20px auto;
  overflow: hidden;
 }
 .cycle-prev, .cycle-next {
  font-size: 200%;
  color: #fff;
  display: block;
  position: absolute;
  top: 50%;
  z-index: 9999;
  cursor: pointer;
  margin-top: -16px;
 }
 .cycle-prev { left: 42px; }
 .cycle-next { right: 62px; }
 .cycle-pager {
  position: absolute;
  width: 100%;
  height: 10px;
  bottom: 10px;
  z-index: 9999;
  text-align: center;
 }
 .cycle-pager span {
  text-indent: 100%;
  top: 100px;
  width: 10px;
  height: 10px;
  display: inline-block;
  border: 1px solid #fff;
  border-radius: 50%;
  margin: 0 10px;
  white-space: nowrap;
  cursor: pointer;
 }
 .cycle-pager-active { background-color: #fff; }
</style>
</head>
<body>

<div class="cycle-slideshow">
 <span class="cycle-prev">〈</span> <!-- Untuk membuat tanda panah di kiri slider -->
 <span class="cycle-next">〉</span> <!-- Untuk membuat tanda panah di kanan slider -->
 <span class="cycle-pager"></span>  <!-- Untuk membuat tanda bulat atau link pada slider -->
 <img src="images/1.jpg" alt="Gambar Pertama">
 <img src="images/2.jpg" alt="Gambar Kedua">
 <img src="images/3.jpg" alt="Gambar Ketiga">
 <img src="images/4.jpg" alt="Gambar Keempat">
</div>

</body>
</html>
Sangat sederhana bukan.? Nah begitulah

css jquery

@kasman

17 Kontribusi 0 Poin

Diperbarui 2 tahun yang lalu

3 Jawaban:

img di selipin di <a> udah di coba belum ....

 <a herf=""><img src="images/1.jpg" alt="Gambar Pertama"></a>

@wedev

86 Kontribusi 23 Poin

Dipost 7 tahun yang lalu

kasih tag anchor gan diantara tag img

 <a href="link nya"><img src="images/1.jpg" alt="Gambar Pertama"></a>

@Dagimal

275 Kontribusi 24 Poin

Dipost 7 tahun yang lalu

taruh tag nya diantara tag gan :)

@Dagimal

275 Kontribusi 24 Poin

Dipost 7 tahun yang lalu

Kelas Premium! Belajar bikin website dari nol sekarang

Bagaimana caranya menaru link (URL) di kode ini Image Slider ini biar bisa diklik dan tetap normal?

Kelas Premium!
Belajar bikin website dari nol sekarang