Komponen penting dalam suatu website adalah slideshow, baik itu berupa gambar / video. slideshow ini biasanya diletakan pada tampilan awal sebuah website yang berfungsi untuk menampilkan artikel pilihan ataupun konten yang dapat menarik pengunjung website anda.
Berikut akan saya jelaskan cara Membuat Image Slideshow atau Carousel Dengan CSS dan Javascript :
1. File HTML
Ubah isi pada <img src="url_gambar$"> menjadi url gambar anda.
<div class="headline">
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img src="pictures/1.jpg" style="width:100%">
<div class="text">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img src="pictures/2.jpg" style="width:100%">
<div class="text">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="pictures/3.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="pictures/3.jpg" style="width:100%">
<div class="text">Caption 4</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div id="thumbnail-container">
<div class="thumbnail">
<img src="url_gambar1" onclick="currentSlide(1)" class="dot" >
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="thumbnail">
<img src="url_gambar2" onclick="currentSlide(2)" class="dot" >
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="thumbnail">
<img src="url_gambar3" onclick="currentSlide(3)" class="dot" >
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="thumbnail">
<img src="url_gambar4" onclick="currentSlide(4)" class="dot" >
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</div>
</div>
2. CSS
script ini untuk memberikan tampilan tombol next dan mengatur besaran image maupun thumbnail
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}
.mySlides {display:none}
.headline {
max-width: 727px;
background-color:#000000;
}
/* Slideshow container */
.slideshow-container {
max-width: 727px;
position: relative;
margin: auto;
background-color:#000000;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #ffffff;
font-size: 24px;
padding: 8px 50px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: left;
background-color: rgba(0,0,0,0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #ffffff;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 100px;
width: 100px;
margin: 0 2px;
background-color: #bbb;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
#thumbnail-container {
background-color:#000000;
}
.thumbnail {
width:25%;
float:left;
font-size:12px;
padding:10px;
background-color:#000000;
color:#ffffff;
}
.thumbnail img {
width:100%;
height:auto;
}
3. Javascript
script javascript ini yang berfungsi mengatur jalannya slideshow, biasanya diletakan pada bagian akhir / bawah
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
Demikian sudah script Membuat Image Slideshow dan thumbnail Dengan CSS dan Javascript, berikut source lengkapnya
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}
.mySlides {display:none}
.headline {
max-width: 727px;
background-color:#000000;
}
/* Slideshow container */
.slideshow-container {
max-width: 727px;
position: relative;
margin: auto;
background-color:#000000;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #ffffff;
font-size: 24px;
padding: 8px 50px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: left;
background-color: rgba(0,0,0,0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #ffffff;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor:pointer;
height: 100px;
width: 100px;
margin: 0 2px;
background-color: #bbb;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #ffffff;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 2.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
#thumbnail-container {
background-color:#000000;
}
.thumbnail {
width:25%;
float:left;
font-size:12px;
padding:10px;
background-color:#000000;
color:#ffffff;
}
.thumbnail img {
width:100%;
height:auto;
}
</style>
</head>
<body>
<div class="headline">
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img src="pictures/1.jpg" style="width:100%">
<div class="text">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img src="pictures/2.jpg" style="width:100%">
<div class="text">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="pictures/3.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="pictures/3.jpg" style="width:100%">
<div class="text">Caption 4</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div id="thumbnail-container">
<div class="thumbnail">
<img src="url_gambar1" onclick="currentSlide(1)" class="dot" >
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="thumbnail">
<img src="url_gambar2" onclick="currentSlide(2)" class="dot" >
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="thumbnail">
<img src="url_gambar3" onclick="currentSlide(3)" class="dot" >
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="thumbnail">
<img src="url_gambar4" onclick="currentSlide(4)" class="dot" >
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</div>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
</body>
</html>
