Silahkan Kunjungi rumah blog kami yang baru klik DISINI
untuk fotonya silahkan anda koment sendiri....ha...ha....

Senin, 23 Mei 2016

Membuat Slider Image


Amarajen (Gambar -1)
Amarajen (Gambar -2)
Amarajen (Gambar-3)
Amarajen (Gambar -4)
Amarajen (Gambar -5)
Amarajen (Gambar -6)
Amarajen (Gambar -7)


KODENYA ADALAH :
<html>
<head>
<style type="text/css">
.slider {display: inline-block;padding: 0px;border: 2px solid #333;margin:10px auto;height:auto}
.slider input {display: none}
.slider img {vertical-align: top}
.slider label {cursor: pointer}
.slider-window {
 position: relative;margin-bottom: 20px;
 box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.7) , 0 1px 4px rgba(0, 0, 0, 0.5) , 0 0 40px rgba(0, 0, 0, 0.2) inset}
.slider-window:hover figcaption {opacity: 1}
.slider-window>label {position: absolute;top: 0;bottom: 50px;left: 0;right: 0;display: none;z-index: 1}
.slider-window, .slider-preview {
 overflow: hidden;-webkit-transition: width 0.3s ease;-moz-transition: width 0.3s ease;
 -o-transition: width 0.3s ease;transition: width 0.3s ease}
.slider-images>figure {position: relative;display: inline-block;margin: 0}
.slider-images figcaption {
 position: absolute;padding-top: 13px;height: 40px;bottom: 0;left: 0;right: 0;color:#fff;background: rgba(204, 0, 0,.5);
 text-shadow: 1px 1px 3px #333;text-align:center;opacity: 0;-webkit-transition: opacity 0.3s ease;-moz-transition: opacity 0.3s ease;
 -o-transition: opacity 0.3s ease;transition: opacity 0.3s ease}
.slider-thumbnails img {
 margin: 0 2.5px 4px 0;box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.7);border:1px solid red;opacity: 0.75;
 -webkit-transition: opacity 0.3s ease;-moz-transition: opacity 0.3s ease;-o-transition: opacity 0.3s ease;transition: opacity 0.3s ease}
.slider-thumbnails img:hover {opacity: 1}
.slider-images, .slider-thumbnails {
 position: relative;white-space: nowrap;-webkit-transition: left 0.3s ease;-moz-transition: left 0.3s ease;-o-transition: left 0.3s ease;
 transition: left 0.3s ease}
#img01:checked~.slider-window:hover>label[for="img02"],
#img02:checked~.slider-window:hover>label[for="img03"],
#img03:checked~.slider-window:hover>label[for="img04"],
#img04:checked~.slider-window:hover>label[for="img05"],
#img05:checked~.slider-window:hover>label[for="img06"],
#img06:checked~.slider-window:hover>label[for="img07"] {left: 40%;display: block}
#img01:checked~.slider-window:hover>label[for="img02"]:hover:after,
#img02:checked~.slider-window:hover>label[for="img03"]:hover:after,
#img03:checked~.slider-window:hover>label[for="img04"]:hover:after,
#img04:checked~.slider-window:hover>label[for="img05"]:hover:after,
#img05:checked~.slider-window:hover>label[for="img06"]:hover:after,
#img06:checked~.slider-window:hover>label[for="img07"]:hover:after {
 content: "Next";position: absolute;right: 0;color:#fff;text-shadow:1px 2px 1px #333;top: 50px;display: block;
 padding: 10px 30px;border-radius: 22px 0 0 22px;background: #39f}

#img02:checked~.slider-window:hover>label[for="img01"],
#img03:checked~.slider-window:hover>label[for="img02"],
#img04:checked~.slider-window:hover>label[for="img03"],
#img05:checked~.slider-window:hover>label[for="img04"],
#img06:checked~.slider-window:hover>label[for="img05"],
#img07:checked~.slider-window:hover>label[for="img06"] {right: 40%;display: block}
#img02:checked~.slider-window:hover>label[for="img01"]:hover:after,
#img03:checked~.slider-window:hover>label[for="img02"]:hover:after,
#img04:checked~.slider-window:hover>label[for="img03"]:hover:after,
#img05:checked~.slider-window:hover>label[for="img04"]:hover:after,
#img06:checked~.slider-window:hover>label[for="img05"]:hover:after,
#img07:checked~.slider-window:hover>label[for="img06"]:hover:after {
 content: "Prev";position: absolute;left: 0;color:#fff;text-shadow:1px 2px 1px #333;top: 50px;display: block;padding: 10px 30px;
 border-radius: 0 22px 22px 0;background: #39f}

#img01:checked~.slider-window>.slider-images {left:0px}
#img01:checked~.slider-window, #img01:checked~.slider-preview {width:600px}
#img02:checked~.slider-window>.slider-images {left:-600px}
#img02:checked~.slider-window, #img02:checked~.slider-preview {width:600px}
#img03:checked~.slider-window>.slider-images {left:-1200px}
#img03:checked~.slider-window, #img03:checked~.slider-preview {width:600px}
#img04:checked~.slider-window>.slider-images {left:-1800px}
#img04:checked~.slider-window, #img04:checked~.slider-preview {width:600px}
#img05:checked~.slider-window>.slider-images {left:-2400px}
#img05:checked~.slider-window, #img05:checked~.slider-preview {width:600px}
#img06:checked~.slider-window>.slider-images {left:-3000px}
#img06:checked~.slider-window, #img06:checked~.slider-preview {width:600px}
#img07:checked~.slider-window>.slider-images {left:-3600px}
#img07:checked~.slider-window, #img07:checked~.slider-preview {width:600px}
#img01:checked~.slider-preview>.slider-thumbnails {left:0px}
#img02:checked~.slider-preview>.slider-thumbnails {left:-120px}
#img03:checked~.slider-preview>.slider-thumbnails {left:-241px}
#img04:checked~.slider-preview>.slider-thumbnails {left:-361px}
#img05:checked~.slider-preview>.slider-thumbnails {left:-482px}
#img06:checked~.slider-preview>.slider-thumbnails {left:-602px}
#img07:checked~.slider-preview>.slider-thumbnails {left:-723px}
</style>
</head>
<body>
<br />
<form class="slider">
<input type="radio" id="img01" name="img" checked="checked"/>
<input type="radio" id="img02" name="img"/>
<input type="radio" id="img03" name="img"/>
<input type="radio" id="img04" name="img"/>
<input type="radio" id="img05" name="img"/>
<input type="radio" id="img06" name="img"/>
<input type="radio" id="img07" name="img"/>
<div class="slider-window"><label for="img01"></label>
<label for="img02"></label><label for="img03"></label>
<label for="img04"></label><label for="img05"></label>
<label for="img06"></label><label for="img07"></label>
<div class="slider-images">
<figure>
<figcaption>Amarajen (Gambar -1)</figcaption>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBkGk-QdBLBS8VkXvK5dRIjH2cgx8FkD7xuKwoCgmaHHQr4gBRI5nzuBmy4KcsYC6xpHAAsW8ZLiJSHApH7puAq2tnxbh0MmbjET-3RCBShF9r8zNwGYzt1c0RQ89R-nsMD6l9rX0lbHM/s1600/pic1.jpg" alt=""/></figure>
<figure><figcaption>Amarajen (Gambar -2)</figcaption>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz24KOpqio00pjmTA-DPa5DpgDIhOSVincGLSexWpO2oT6-pX_ZLXAY2E8PxEKSOz3WIAmoY3i172K1dVpvgmP1luut29HL70v7uoa2y4IDkg2ky5GBkp37DIShUxr2tnnR9hqwWySwyk/s1600/pic2.jpg" alt=""/></figure>
<figure><figcaption>Amarajen (Gambar-3)</figcaption>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhblL-N2kvWD4pHVzCZZLUWSxJFPRA7J3XhrC_qXYTk-5_HLUL-NAWdaiKGtzg0sYlI0qhtIaunG4l5Pb93QmvWk0bs9UI4JDFCpigdHMFJV0swPPylhvUH5PGzZrCLdbfHd5VwokZnk6Q/s1600/pic3.jpg" alt=""/></figure>
<figure><figcaption>Amarajen (Gambar -4)</figcaption>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS9Reav0IJ5NZpi8JA12P8gRhCjL_wvYXe71LH4RN4OfVsgLb_xgLEOR0m-aEB1x0xtuGPpR57EBOEj6w_gulozEmEwrviib68qpSxsSOf6qwKmOHbAETNa4_MJO8AgiIfg25gD29aqBE/s1600/pic4.jpg" alt=""/></figure>
<figure><figcaption>Amarajen (Gambar -5)</figcaption>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio4x6Hls10ipB2Y8NJs7hPcMwhSiQR97U4Lbfxzzy7rRDoW7mEdfPUV_5gJ7QDPPV_VTlHnIWwgIP9v9xpM-o4h9bCxU7xRYPClaSEcrBL_u3qr4HBUpYZgPHHFViVG8nvIiESuUngSZo/s1600/pic5.jpg" alt=""/></figure>
<figure><figcaption>Amarajen (Gambar -6)</figcaption>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3V0Nxt-vOoiDtSqpvZJdmPn4Q_RiJhQ37NDOVEsEpK-eMZVaSPf78fHxs9gjfAMPEt4Iu0BR9WqD9wQqanytoCVin-HEYyKCvQLFRaMnqA97vASq6sExh9nDAUBFcls1wrEGfCDnO1tU/s1600/pic6.jpg" alt=""/></figure>
<figure><figcaption>Amarajen (Gambar -7)</figcaption>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDqiRhXR9lbvmuJoodUfQ1ernvU-4TGPJA1fBrU8R8IYHYEnBDG4nUkZYAS_SuNdwwGGFQREb5zECSGda5ClFxxAGrl24et2Yc6AVD_njmN6PZccs8tth9uXbReAiFO_Rp-TP3225UvgM/s1600/pic7.jpg" alt=""/></figure>
<br />
</div></div><div class="slider-preview">
<div class="slider-thumbnails">
<label for="img01"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBkGk-QdBLBS8VkXvK5dRIjH2cgx8FkD7xuKwoCgmaHHQr4gBRI5nzuBmy4KcsYC6xpHAAsW8ZLiJSHApH7puAq2tnxbh0MmbjET-3RCBShF9r8zNwGYzt1c0RQ89R-nsMD6l9rX0lbHM/s1600/pic1.jpg" width="116" height="75" alt=""></label>
<label for="img02"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz24KOpqio00pjmTA-DPa5DpgDIhOSVincGLSexWpO2oT6-pX_ZLXAY2E8PxEKSOz3WIAmoY3i172K1dVpvgmP1luut29HL70v7uoa2y4IDkg2ky5GBkp37DIShUxr2tnnR9hqwWySwyk/s1600/pic2.jpg" width="116" height="75" alt=""></label>
<label for="img03"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhblL-N2kvWD4pHVzCZZLUWSxJFPRA7J3XhrC_qXYTk-5_HLUL-NAWdaiKGtzg0sYlI0qhtIaunG4l5Pb93QmvWk0bs9UI4JDFCpigdHMFJV0swPPylhvUH5PGzZrCLdbfHd5VwokZnk6Q/s1600/pic3.jpg" width="116" height="75" alt=""></label>
<label for="img04"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS9Reav0IJ5NZpi8JA12P8gRhCjL_wvYXe71LH4RN4OfVsgLb_xgLEOR0m-aEB1x0xtuGPpR57EBOEj6w_gulozEmEwrviib68qpSxsSOf6qwKmOHbAETNa4_MJO8AgiIfg25gD29aqBE/s1600/pic4.jpg" width="116" height="75" alt=""></label>
<label for="img05"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio4x6Hls10ipB2Y8NJs7hPcMwhSiQR97U4Lbfxzzy7rRDoW7mEdfPUV_5gJ7QDPPV_VTlHnIWwgIP9v9xpM-o4h9bCxU7xRYPClaSEcrBL_u3qr4HBUpYZgPHHFViVG8nvIiESuUngSZo/s1600/pic5.jpg" width="116" height="75" alt=""></label>
<label for="img06"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3V0Nxt-vOoiDtSqpvZJdmPn4Q_RiJhQ37NDOVEsEpK-eMZVaSPf78fHxs9gjfAMPEt4Iu0BR9WqD9wQqanytoCVin-HEYyKCvQLFRaMnqA97vASq6sExh9nDAUBFcls1wrEGfCDnO1tU/s1600/pic6.jpg" width="116" height="75" alt=""></label>
<label for="img07"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDqiRhXR9lbvmuJoodUfQ1ernvU-4TGPJA1fBrU8R8IYHYEnBDG4nUkZYAS_SuNdwwGGFQREb5zECSGda5ClFxxAGrl24et2Yc6AVD_njmN6PZccs8tth9uXbReAiFO_Rp-TP3225UvgM/s1600/pic7.jpg" width="116" height="75" alt=""></label>
</div></div></form>
</body>
</html>
Artikel Terkait

A M A R A J E N

Diposting oleh di 12.44
Label:

0   komentar

Posting Komentar

Cancel Reply
Langganan: Posting Komentar ( Atom )
A M A R A J E N
Blog ini didirikan hanya untuk kalangan sendiri, Terima kasih telah singgah.. Semoga kita berjumpa kembali.....!