Create Image Slideshow in Single Post
Mualtry - Slideshow image dapat di artikan sebagai sebuah cara menampilkan beberapa gambar dalam satu panel dan bisa kita geser baik secara manual mau
by
Mualtry
Penjelasan Slideshow Image
Mualtry - Slideshow image dapat di artikan sebagai sebuah cara menampilkan beberapa gambar dalam satu panel dan bisa kita geser baik secara manual maupun otomatis sehingga tampilan akan lebih ringkas dan juga bagus. Akan sedikit saya jelaskan mengenai update artikel kali ini, berawal dari saya ingin membuat image slideshow yang hanya berada pada Single Post saja, saya cari tutorial kemana-mana hasilnya berbeda dengan yang saya inginkan hingga saya menemukan artikel ini dari w3schools.
Kalau di tutorial lainya sobat harus mengedit source theme atau membuat widget yang nanti kemungkinan berefek pada struktur template, untuk cara yang saya share ini sobat cukup copy dan paste di HTML View pada saat sobat menulis artikel pada blogger.
Untuk contoh aplikasi nya sobat bisa kunjungi alamat di bawah, saya juga menggunakan tutorial ini untuk website pribadi karena memang perlu menampilkan beberapa Image agar lebih ringkas dan enak dilihat, tentunya lebih user friendly. Contoh Image Slideshow pada artikel website
Step 1 add HTML
Jika sobat ingin menambahkan gambar, tinggal modifikasi <!-- Full-width images with number and caption text --> dan juga <!-- The dots/circles -->. Sampai disini untuk penggunaanya hanya perlu mengedit source alamat Image dan juga Caption sesuai dengan yang sobat inginkan.
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlidesqq fadeqq">
<div class="numbertextqq">1 / 3</div>
<img src="img1.jpg"
style="width:100%">
<div class="textqq">Caption
Text</div>
</div>
<div class="mySlidesqq fadeqq">
<div class="numbertextqq">2 / 3</div>
<img src="img2.jpg"
style="width:100%">
<div class="textqq">Caption
Two</div>
</div>
<div class="mySlidesqq fadeqq">
<div class="numbertextqq">3 / 3</div>
<img src="img3.jpg"
style="width:100%">
<div class="textqq">Caption
Three</div>
</div>
<!-- Next and previous
buttons -->
<a class="prevqq" onclick="plusSlidesqq(-1)">❮</a>
<a class="nextqq" onclick="plusSlidesqq(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dotqq" onclick="currentSlideqq(1)"></span>
<span class="dotqq" onclick="currentSlideqq(2)"></span>
<span class="dotqq" onclick="currentSlideqq(3)"></span>
</div> code-box Step 2 add CSS
Untuk CSS pastekan tepat di bawah code HTML di atas, yang penting berada pada satu halaman, untuk code nya bisa sobat kreasikan sendiri agar menjadi sesuai apa yang sobat inginkan.
<style>
/* Slideshow container */
.slideshow-containerqq {
max-width: 100%;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlidesqq {
display: none;
}
/* Next & previous buttons */
.prevqq, .nextqq {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.nextqq {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prevqq:hover, .nextqq:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.textqq {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertextqq {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dotqq {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.activeqq, .dotqq:hover {
background-color: #717171;
}
/* Fading animation */
.fadeqq {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fadeqq {
from {opacity: .4}
to {opacity: 1}
}
</style> code-boxStep 3 add JavaScript Manual Function
Disini ada 2 fungsi standart Image Slide yaitu secara manual atau auto (pilih salah satu), saya sendiri menggunakan fitur manual untuk Image Slideshow di website ini. Sobat dapat mengkreasikan code Javascript sesuai apa yang di inginkan.
<script>
let slideIndex = 1;
showSlidesqq(slideIndex);
// Next/previous controls
function plusSlidesqq(n) {
showSlidesqq(slideIndex += n);
}
// Thumbnail image controls
function currentSlideqq(n) {
showSlidesqq(slideIndex = n);
}
function showSlidesqq(n) {
let i;
let slidesqq = document.getElementsByClassName("mySlidesqq");
let dots = document.getElementsByClassName("dotqq");
if (n > slidesqq.length) {slideIndex = 1}
if (n < 1) {slideIndex = slidesqq.length}
for (i = 0; i < slidesqq.length; i++) {
slidesqq[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" activeqq", "");
}
slidesqq[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " activeqq";
}
</script> code-box Step 4 add JavaScript Auto Function (Optional)
<script>
let slideIndex = 0;
showSlidesqq();
function showSlidesqq() {
let i;
let slidesqq = document.getElementsByClassName("mySlidesqq");
for (i = 0; i < slidesqq.length; i++) {
slidesqq[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slidesqq.length) {slideIndex = 1}
slidesqq[slideIndex-1].style.display = "block";
setTimeout(showSlidesqq, 3000); // Change image every 3 seconds
}
</script> code-box Sekian sedikit ulasan kembali tutorial simple cara membuat image slideshow pada single artikel website, disini saya hanya sekedar menshare ulang dengan maksud ingin berbagi karena dulu saya cukup kesusahan dalam mencari informasi sesuai dengan yang saya inginkan, pastikan sobat tunggu update berikutnya hanya di www.mualtry.com. Sekian post dari saya semoga bermanfaat terima kasih.
Mualtry
Blog pribadi tempat belajar jaringan dan automation system, diharapkan agar bisa saling berdiskusi terhadap suatu masalah agar dapat saling membantu
Malu bertanya sesat di jalan, kepo itu perlu baik untuk diri sendiri maupun orang lain
Comments