Cara Membuat Slideshow Responsive di Blog dengan HTML, CSS, dan JavaScript

samuelpasaribu.com
23 Jun, 2022

Cara Membuat Slideshow Responsive di Blog Dengan menggunakan HTML, CSS, dan JavaScript, sekarang kita dapat membuat gambar slide berlanjut dengan klik di posting blog atau halaman lain. Presentasi visual menarik minat dan membuat ide lebih hidup.

Pada artikel sebelumnya kita telah berkenalan dengan Membuat Slideshow Otomatis dengan HTML dan CSS untuk membuat gambar berubah secara otomatis di html. Dimana slick slider merupakan library populer untuk membuat berbagai variasi web slider dengan mudah.

Pada postingan kali ini, kita akan memulai dengan studi kasus praktek pembuatan slide show banner. Gambarnya seperti banner di halaman depan sebuah situs e-commerce, misalnya di situs JD.id. Dimana promo ditampilkan secara bergantian dengan mengklik. Untuk itu anda bisa membaca panduan cara membuat galeri slide di html.


1. Kode HTML


Hal pertama yang harus Anda lakukan adalah membuat halaman dengan kode HTML. Di sini Anda dapat menggunakan dan membuka Text Editor agar lebih jelas untuk membuat file html.

Sekarang langsung saja buat file baru dan berinama index.html



Anda dapat menyalin kode html di atas untuk memulai dari dasar membuat halaman slideshow dari editor teks yang Anda gunakan.

Perintah div container digunakan untuk membungkus konten. Di sini kita akan membuat grid secara visual untuk membingkainya.

Sekarang mari kita mulai dengan menambahkan styling dan javascript. Ini pada saat yang sama sekaligus untuk dependensi library slick slider dan jquery.

Slider Slick bisa kita ambil dari CDN agar lebih praktis di https://www.jsdelivr.com. Layanan ini gratis di mana mereka menyediakan perpustakaan JS populer di CDN mereka.

Misalnya jquery versi 3.5.1 ada di https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js.

Jadi daripada mengunduh file js sendiri, lebih praktis untuk merujuk ke salah satu layanan CDN seperti jsdelivr. Khusus untuk keperluan tutorial seperti postingan ini.

2. Kode CSS


Sampai disini sekarang untuk slick kita membutuhkan 2 css dan 1 js, hal ini sama dengan yang telah dibahas pada artikel sebelumnya.

Jadi untuk bagian css ini kita bisa taruh di bagian head, yaitu di dalam tag head


Selain itu, di sini kami juga menambahkan kode css sederhana yang akan diletakkan di lokasi bagian head yang sama juga.


Untuk membuat artikel ini lebih sederhana, kami tidak dapat membuat skrip dan gaya di file terpisah (eksternal). Tapi langsung kita taruh di html (internal).

Di bagian latar belakang halaman web di sini kami membuat warna abu-abu untuk background: #dedede dan untuk font-family: kita gunakan dan pilih Verdana, serta beberapa font lain sebagai cadangan jika font Verdana tidak tersedia.

Untuk .container kita hias dalam bentuk kotak dengan background putih #fff dan max-width untuk membatasi lebar agar terlihat lebih bagus.

Admin
Admin June 23, 2022 at 04:20 AM
📢 Info margin-left: auto dan margin-right: auto adalah trik umum untuk membuat container kita berada di tengah.

3. Kode JavaScript


Sekarang di bagian ini kita membuat kode javascript. Dan disini kita bisa meletakkan kode javascript di bagian bawah sebelum tag <body>.

Tambahkan juga jquery dan slick library dari jsdelivr cdn seperti kode berikut.


Lalu untuk bagian script kita bisa letakkan di bawahnya.


Bagian kode di atas adalah template jquery umum, di mana kita dapat menjalankan skrip setelah dokumen siap, alias dom dimuat.

Dalam hal ini sebenarnya kita tidak perlu menggunakan document ready, karena script kita ada di bawah, sebelum tag penutup /body. Jadi ketika script ini dijalankan, tentunya elemen html di atas sudah dirender di awal.


Dari kode html, css, dan javascript diatas jika kita hubungkan secara keseluruhan maka hasilnya akan tampak seperti kode dibawah ini.



Sekarang Mari kita buat markup untuk slick. Jadi disini slick sangat mudah digunakan, kamu hanya perlu menyiapkan elemen parent, lalu di dalamnya ada elemen dari bagian child-nya seperti kode berikut.


Jika kita memikirkan induknya, yaitu .slider tinggal kita slick-in, maka itu berubah menjadi slider. Ini sangat mudah dan sederhana.

Sekarang langsung saja, mari kita buat markup slick disana, yang isinya adalah gambar yang ditautkan menjadi link.

<div class="slider">
            <div>
                <a href="#">
                    <img alt="Image 1" src="https://raw.githubusercontent.com/Tikseo/DesainLogo/main/img/Slide1.JPG" />
                </a>            
            </div>
            <div>
                <a href="#">
                    <img alt="Image 2" src="https://raw.githubusercontent.com/Tikseo/DesainLogo/main/img/Slide2.JPG" />
                </a>
            </div>
            <div>
                <a href="#">
                    <img alt="Image 3" src="https://raw.githubusercontent.com/Tikseo/DesainLogo/main/img/Slide3.JPG" />
                </a>            
            </div>
            <div>
                <a href="#">
                    <img alt="Image 4" src="https://raw.githubusercontent.com/Tikseo/DesainLogo/main/img/Slide4.JPG" />
                </a>
            </div>
            <div>
                <a href="#">
                    <img alt="Image 5" src="https://raw.githubusercontent.com/Tikseo/DesainLogo/main/img/Slide5.JPG" />
                </a>            
            </div>
            <div>
                <a href="#">
                    <img alt="Image 6" src="https://raw.githubusercontent.com/Tikseo/DesainLogo/main/img/Slide6.JPG" />
                </a>            
            </div>
            <div>
                <a href="#">
                    <img alt="Image 7" src="https://raw.githubusercontent.com/Tikseo/DesainLogo/main/img/Slide7.JPG" />
                </a>            
            </div>
        </div>

Pada kode di atas Anda dapat menambahkan atribut href dengan mengisi link gambar seperti link yang saya tandai dengan warna biru di atas.

Sekarang kita masih punya slide show, kan? Caranya juga cukup mudah yaitu dengan melakukan “slick” pada div class="slider" saja.


Coba perhatikan pada bagian slick, disana parameternya adalah obyek config seperti berikut

{
    autoplay: true,
    autoplaySpeed: 2500
}

Disini kita bisa mengatur bagian autoplay, artinya banner akan otomatis sliding tiap interval tertentu yang dimuat secara keseluruhan.

Dan untuk kecepatan yang dimuat kita bisa set ke 2500, dalam satuan milisecond, berarti 2,5 detik proses pemuataan slidernya.

Selain itu, kita juga bisa styling dikit terlebih dahulu bagiannya seperti ini.

.slider .slick-slide {
    border: solid 1px #000;
}
.slider .slick-slide img {
    width: 100%;
}

Metode ini digunakan hanya untuk menambahkan batas ke seluruh penggeser. Dan atur lebar img menjadi 100%. Cukup untuk membuatnya sesuai dengan lebar induknya, dan terlihat sangat responsive.

Sebelumnya di awal kita taruh teks lorem ipsum. Dan sekarang kita bisa hapus tulisannya biar bersih hasil tampilannya. Untuk hasil tampilan demo yang sekarang bisa Anda lihat dari tombol demo dibawah ini.


Kemudian Anda akan melihat hasil tampilan yang akan berubah menjadi gambar slideshow, lengkap dengan panah kanan dan kiri (default).

Dimana pada tampilan ini kita bisa swipe slideshow dan bisa scroll ke kanan dan kiri.

Selain itu anda dapat mencoba untuk menguji resize ukuran browser anda. Kemudian gambar akan menyesuaikan dengan ukuran wadah. Dan Slick akan menghitung ulang semuanya hingga slideshow tetap berjalan.

Sekarang kita akan menambah dot navigation. Untuk itu mari kita tambah dotted navigation.

Caranya juga mudah sekali cukup di parameter obyek config nya tambahkan dots: true, maka akan langsung keluar dotted nav di bagian bawah!

Caranya juga sangat mudah, cukup tambahkan pada parameter objek config: true, maka akan langsung keluar dotted nav di bagian bawah!

$(document).ready(function(){
    $('.slider').slick({
    autoplay: true,
    autoplaySpeed: 2500,
    dots: true
    });
});


Sekarang kita akan membuat Styling. Ini bertujuan untuk mempercantik slider yang akan kita buat.

Disini yang perlu kita lakukan adalah memperhatikan markup/struktur kode html yang dihasilkan oleh Slick.

Karena kita memuat gaya Slick, slider kita sudah memiliki gaya dasar. Sekarang kita juga bisa merujuk ke file css untuk mengoperride/menimpa bagian-bagian yang ingin kita ubah. Atau bahkan ganti sepenuhnya dengan CSS kita sendiri.

File style default yang telah  dimuat sebelumnya di bagian head adalah

https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css
https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css

Kalau begitu mari kita coba styling. Untuk saat ini kami tidak memodifikasi 2 file default di atas, tetapi kami menambahkan CSS kami sendiri menggunakan teknik override. Sehingga default slick css diganti dengan css yang kita buat sendiri.

Berikut ini adalah kode buat tombol prev & next untuk ukuran yang lebih besar.

.slick-prev, .slick-next {
    width: 50px;
    height: 50px;
    z-index: 1;
}

Untuk menggeser posisinya, supaya tombol panah berada di dalem area banner.

.slick-prev {
    left: 5px;
}
.slick-next {
    right: 5px;
}

Panah kiri & kanan default pada Slick ternyata adalah font ikon, jadi pada dasarnya adalah font.

Jika sebelumnya kita hanya memperbesar tombol, mari kita perbesar fontnya juga, agar simbolnya juga membesar.

Kami juga memberikan bayangan, karena tombolnya berwarna putih, agar tetap jelas saat di gambar cerah.

.slick-prev:before, 
.slick-next:before {
    font-size: 40px;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

Beberapa mungkin bertanya apa itu :before & :after?

Jika Anda tidak terbiasa, before dan after adalah pseudo-element (elemen semu). Sebuah teknik dalam css untuk menambahkan elemen semu, alias sebenarnya tidak di elemen html/DOM, tetapi ada dan muncul di layar, karena ditambahkan melalui CSS. Pada kasus di atas, .slick-prev dan .slick-next menambahkan pseudoelement berupa karakter panah.

Sekarang Mari kita pindahkan dotted nav pada bagian bawah, supaya naik masuk area slider

/* move dotted nav position */
.slick-dots {
    bottom: 15px;
}

Anda dapat mengubah ukuran dan warna. Seperti panah, titik juga merupakan font. Kami mengubah warna default menjadi putih, kami mengubah warna aktif menjadi abu-abu. Dan juga menambahkan efek bayangan.

/* enlarge dots and change their colors */
.slick-dots li button:before {
    font-size: 12px;
    color: #fff;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
    opacity: 1;
}
.slick-dots li.slick-active button:before {
    color: #dedede;
}

Nah sekarang yang terakhir, jika kita ingin supaya panah kiri kanan tidak muncul by default, dan hanya muncul ketika mouse menghover area banner. Caranya juga cukup mudah dengan menggunakan CSS-only.

Disini kita bisa menambahkan rule :not(:hover) pada bagian .slider, dan kita bisa nol kan opacity, seperti berikut ini.

/* hide dots and arrow buttons when slider is not hovered */
.slider:not(:hover) .slick-arrow,
.slider:not(:hover) .slick-dots {
    opacity: 0;
}

Agar lebih menarik dan lebih bagus lagi kita bisa menambahkan dan kasih efek transisi seperti kode berikut ini.

/* transition effects for opacity */
.slick-arrow,
.slick-dots {
    transition: opacity 0.5s ease-out;
}

Menggunakan efek transisi saat sliding. Secara default, efek yang digunakan saat spanduk berubah adalah slide. Dan disini Slick juga memberikan efek transisi lain berupa fade.

Untuk itu Anda cukup tambahkan fade: true pada config

$('.slider').slick({
    autoplay: true,
    autoplaySpeed: 2500,
    dots: true,
    fade: true
});

Harap dicatat bahwa efek bawaan terbatas pada slide dan fade, tetapi kami juga dapat membuat efek transisi dengan CSS. Mungkin akan kita bahas di postingan selanjutnya.


Hasil Tampilan


Berikut ini adalah hasil tampilan image slider html css

Download Source Code

Bagaimana hasilnya? cukup memuaskan bukan? Dengan membuat slideshow responsive ini kita dapat belajar banyak hal dari pengkodean seperti html, css, dan javascript.

Bagaimana cara membuat slider di blogger?

Jika Anda ingin membuat slideshow di postingan blog caranya juga cukup mudah. Bagi Anda yang ingin memasang slider di postingan blog bisa lanjut mengikuti postingan ini sampai selesai tentang cara membuat slider di blogger.


Cara Membuat Slideshow Postingan di Blog


Berikut ini cara membuat slideshow di postingan blogger:

  1. Pertama Anda bisa login ke Blogger.com
  2. Selanjutnya Buat Postingan atau Halaman Baru
  3. Lalu buat Judul sesuai yang diinginkan
  4. Pada halaman postingan pilih Tampilan HTML
  5. Salin dan tempelkan kode di bawah ini ke postingan blog pada Tampilan HTML


6. Terakhir klik tombol Publikasikan Postingan dan lihat hasilnya.


Kesimpulan


Slideshow ini memiliki desain yang bersih dan sederhana. Pengunjung dapat berpindah antar gambar dengan mengklik dan menggeser ke kiri atau kanan. Slider html responsif dan bisa kita terapkan dengan membuat slider otomatis di blog.

Demikian posting kali tentang Cara Membuat Slideshow Responsive di Blog dengan HTML, CSS, dan JavaScript. Semoga artikel ini bermanfaat dan dapat membantu Anda. Yuk share artikel ini untuk membantu teman-teman yang lain. Terima kasih!
samuelpasaribu.com

samuelpasaribu.com

samuelpasaribu.com working in the Search Engine Optimization field since 2019. And worked on many successful projects since then. He shares the real-life experience of best SEO practices with his followers on samuelpasaribu.com. You also can learn Advance level SEO for WordPress, Blogger, or any other blogging platform. Stay tuned.

Next Post Previous Post
No Comment
Add Comment
comment url