Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
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
3 Jawaban:
img di selipin di <a> udah di coba belum ....
<a herf=""><img src="images/1.jpg" alt="Gambar Pertama"></a>
kasih tag anchor gan diantara tag img
<a href="link nya"><img src="images/1.jpg" alt="Gambar Pertama"></a>
