Alat zoom slide ini digunakan untuk melompat ke bagian slide tertentu dari slide presentasi. Dengan slide zoom ini, Anda dapat membuat slide presentasi yang lebih menarik
Sekedar informasi, slide zoom ini hanya tersedia di powerpoint 2019 dan Office 365 terbaru
Di video ini saya menjelaskan langkah-langkah membuat slide zoom di powerpoint
Dapatkan lebih banyak template PowerPoint di saluran youtube "Sakkarupa PowerPoint"
Buka kategori PowerPoint untuk melihat semua postingan tentang powerpoint, seperti template dan tutorial "Buka kategori PowerPoint"
Tag
zoom powerpoint, slide zoom ppt, zoom slide powerpoint, efek zoom powerpoint, prezi ppt, slide pembelajaran, tutorial powerpoint, microsoft powerpoint, tutorial powerpoint, powerpoint, powerpoint tutorial lengkap, office 365, presentasi powerpoint zoom
Nah buat sobat yang sering bermasalah dengan jaringan internet yang lemot, bisa menggunakan aplikasi Zoom di smartphone kamu daripada menggunakan PC atau laptop untuk online meeting agar lebih lancar, tidak tersendat saat teleconference dan tentunya tidak membuat frustrasi selama pertemuan
Pada artikel sebelumnya kita telah diperkenalkan dengan slider yang apik dan dasar-dasar penggunaannya. Dimana slick slider merupakan library populer untuk membuat berbagai variasi web slider dengan mudah
Pada bagian 2 ini, kita akan memulai praktek studi kasus pembuatan slide show banner. Ini seperti spanduk di halaman depan situs e-niaga, seperti JD. Indo. Dimana promo ditampilkan secara bergantian, dan bisa di klik
Sebenarnya dokumentasi di situs slick slider cukup bagus dengan berbagai contoh dan referensi konfigurasi. Bagi yang sudah paham html, css dan js bisa langsung refer ke sana
Artikel ini ditujukan untuk panduan bagi pemula sampai mereka mengetahui langkah-langkahnya. Karena dijelaskan langkah demi langkah dengan mudah. Mulai dari html, CSS styling hingga script. File demo dan pelatihan juga tersedia per langkah, dapat diunduh di bagian akhir artikel
Spanduk yang ingin Anda buat
Spesifikasi/persyaratannya seperti ini
- setiap slide hanya berisi gambar yang memiliki tautan
- ada panah kiri dan kanan, mereka disembunyikan secara default dan hanya muncul saat mouse pengguna berada di atas spanduk (sedang diarahkan). Ini bagus dari segi UI/UX, karena panah kanan dan kiri berpotensi menutupi isi banner
- ada titik navigasi di bawah ini. Cukup berlebihan dengan tombol panah kiri dan kanan. Tapi ini bagus untuk mewakili jumlah spanduk yang tersedia. Jadi pengunjung bisa menghitung berapa banner promo yang ada
- Spanduk dapat digesek dengan jari, terutama untuk pengguna tablet/ponsel
- Semua dimensi ukuran gambar banner selalu sama, hal ini untuk memudahkan
- Terapkan desain responsif. Artinya, spanduk selalu terlihat utuh di berbagai ukuran perangkat. Baik desktop/laptop/tablet/smartphone. Sehingga proporsi lebar dan tinggi selalu tetap
Hasil akhirnya akan seperti ini
Prasyarat
Untuk mengikuti artikel ini diharapkan sudah mengetahui sedikit tentang html, css, dan JS. Hanya sedikit gpp
*Tolong beri saran jika presentasinya tidak bagus, misalnya terlalu mudah/dangkal, atau mungkin terlalu sulit dan membingungkan
Perangkat lunak yang diperlukan
- Editor teks. Apa pun. Notepad++, Visual Studio Code, atau Sublime Text adalah contoh yang bagus
- Peramban. Apapun yang menjadi favorit Anda. Misalnya Chrome
Oke, mari berkreasi
Mulai
Pertama, kita mulai dengan membuat halaman html sederhana. Nyalakan editor teks Anda dan buat file baru, misalnya bernama index. html
Framework html paling sederhana adalah seperti ini
Demo. indeks1. html
Wadah div adalah yang membungkus konten, (secara visual kita akan membuat bingkai kotak nanti)
Jalankan di browser, maka Anda akan mendapatkan halaman biasa
Ya tetap saja jelek karena tidak ada gaya sama sekali
Sekarang mari tambahkan gaya dan javascript. Pada saat yang sama, slider apik dan dependensi pustaka jquery
Untuk teksnya kita isi lorem ipsum saja, karena saya tidak tahu harus isi apa
Kami mengambil penggeser apik dari CDN agar praktis. https. // www. jsdeliver. com/ layanan gratis di mana mereka menyediakan JS libray2 populer di CDN mereka, kami hanya akan menunjukkannya kepada Anda
Misalnya jquery versi 3. 5. 1 ada di https. //cdnjs. cloudflare. com/ajax/libs/jquery/3. 5. 1/jquery. min. js
Jadi daripada download file js sendiri, lebih praktis merujuk ke salah satu layanan CDN seperti jsdelivr. Apalagi untuk kebutuhan tutorial seperti ini
Apa itu CDN?
CDN adalah jaringan pengiriman konten. Kira2 adalah kumpulan dari banyak server yang didistribusikan di berbagai lokasi di seluruh dunia. Selain lebih handal karena servernya banyak (jika 1 tidak jalan, masih banyak saran), juga lebih bisa diandalkan karena pengguna bisa mendapatkan file yang dibutuhkan dari lokasi server yang terdekat dengan tempatnya.
Oke jadi biar apik kita butuh 2 css dan 1 js seperti yang sudah dibahas di artikel sebelumnya
Untuk css kita pasang di bagian head, yaitu di dalam tag head
Kemudian kami juga menambahkan css sederhana kami di lokasi kepala juga
*agar artikel ini sederhana, kami tidak membuat script dan style di file terpisah (eksternal). Kecuali kita taruh di html langsung (internal)
Kami membuat latar belakang halaman web kami menjadi abu-abu #dedede
Dan fontnya adalah Verdana, serta beberapa font lainnya sebagai saran jika Verdana tidak tersedia
Wadah kita hias berbentuk kotak dengan background putih #fff
Max-width untuk membatasi lebar agar bagus
.slider .slick-slide { border: solid 1px #000; } .slider .slick-slide img { width: 100%; }
1 dan.slider .slick-slide { border: solid 1px #000; } .slider .slick-slide img { width: 100%; }
2 adalah trik umum untuk membuat wadah kita berada di tengahJavaScript
Kami taruh di bawah, sebelum penutup body tag
Tambahkan jquery dan pustaka apik dari jsdelivr cdn
Kemudian skrip kami ditempatkan di bawahnya
Di atas adalah template jquery umum, tempat kami menjalankan skrip setelah dokumen siap (alias dom sudah dimuat semua)
Sekedar intermezzo
*dalam hal ini tidak perlu menggunakan document ready, karena posisi script kita berada di paling bawah, sebelum penutupan tag /body. Jadi ketika script ini dijalankan, elemen html diatasnya harus sudah di render terlebih dahulu
Lengkapnya seperti ini
Hore sekarang terlihat cukup bagus
Demo. indeks2. html
Mari buat markup untuk slickSlick sangat mudah digunakan, pada dasarnya kita hanya menyiapkan parent element, kemudian didalamnya ada child element
Kalau ibu, begitu. Penggeser kita diperas, lalu berubah menjadi penggeser. Mudah dan sederhana
Untuk dasar cara kerja slick sudah dibahas di artikel sebelumnya. Bisa direview lagi kalau mau
Langsung saja, mari buat markup apik kita, yang berisi gambar tertaut
Karena saya tidak tahu harus link ke mana, jadi linknya saya kosongkan saja, set ke #, jadi kita tambahkan atribut href=”#”
Ya, setiap slide adalah tautan dengan gambar. Gambar saya ambil dari unsplash yang lisensinya gratis. (kredit sumber gambar ada di bawah artikel ini)
Mari kita lakukan peragaan slide, bukan?
Sangat mudah, cukup lakukan "slick" pada div class="slider
Perhatikan, dengan apik, parameternya adalah objek konfigurasi
{ autoplay: true, autoplaySpeed: 2500 }
Disini kita mengatur autoplay yang artinya banner akan otomatis meluncur setiap selang waktu tertentu
Dan kecepatannya kami atur menjadi 2500, dalam satuan milidetik, artinya 2,5 detik
Satu hal lagi, mari kita lakukan penataan terlebih dahulu
.slider .slick-slide { border: solid 1px #000; } .slider .slick-slide img { width: 100%; }
Cukup tambahkan batas ke seluruh penggeser. Dan atur lebar img menjadi 100%. Cukup membuatnya pas dengan lebar induknya, dan responsif
Oiya di awal kita pasang teks lorem ipsum. sekarang mari kita hapus untuk membuatnya bersih. Html lengkapnya bisa dilihat di demo index3. html
Jalankan, dan itu akan berubah menjadi tayangan slide gambar, lengkap dengan panah kanan dan kiri (default), remang-remang
Jika kita menggesek tayangan slide, itu sudah digesek
Coba ubah ukuran browser Anda. Kemudian gambar akan menyesuaikan dengan ukuran wadah. Dan slick akan menghitung ulang semuanya hingga tayangan slide tetap berjalan
Sangat mudah, bukan?. Secara default, slick sudah menangani banyak hal. jadi kamu tahu tidak apa-apa
Menambahkan navigasi titik
Sekarang mari tambahkan navigasi bertitik
Gampang, tinggal tambahkan
.slider .slick-slide { border: solid 1px #000; } .slider .slick-slide img { width: 100%; }
_3 di parameter objek config, langsung exit nav bertitik di bagian bawah$(document).ready(function(){ $('.slider').slick({ autoplay: true, autoplaySpeed: 2500, dots: true }); });
Demo. indeks4. html
Styling
Sekarang mari mempercantik slider kita
Yang perlu kita lakukan di sini adalah cukup memperhatikan markup/struktur kode html yang dihasilkan oleh slick
Karena kami memuat gaya apik, penggeser kami sudah memiliki gaya dasar. Nah, kita juga bisa merujuk ke file css untuk menimpa/menimpa bagian yang ingin kita ubah. Atau bahkan menggantinya sepenuhnya dengan CSS kita sendiri
File style default yang telah kita muat sebelumnya di bagian head adalah
- https. // cdn. jsdeliver. net/npm/slick-carousel@1. 8. 1/licin/licin. css
- https. // cdn. jsdeliver. net/npm/slick-carousel@1. 8. 1/slick/slick-theme. css
Mari kita coba gaya segera
Kiat Pro
Untuk jenis modifikasi gaya & inspeksi gaya ini, Anda dapat menggunakan alat dev browser. Tekan F12. dan klik tombol periksa di sudut kiri atas alat dev Anda
Mungkin kita akan membahas ini secara detail di artikel lain. Tetap disini
Untuk saat ini kita tidak memodifikasi 2 file default di atas, namun kita menambahkan CSS kita sendiri dengan menggunakan teknik override. Hingga css bawaan yang apik diganti dengan css kita sendiri
Buat tombol prev & next lebih besar
.slick-prev, .slick-next { width: 50px; height: 50px; z-index: 1; }
_Pindahkan posisi, sehingga tombol panah berada di area banner
.slick-prev { left: 5px; } .slick-next { right: 5px; }
Hitungan default & gambar panah kanan pada slick ternyata menggunakan font ikon, jadi pada dasarnya itu adalah font
Jika sebelumnya kita hanya memperbesar tombolnya, mari kita perbesar fontnya juga, agar simbolnya ikut membesar
Kami juga memberi bayangan, karena tombolnya berwarna putih, sehingga tetap jelas saat berada di gambar yang terang
.slick-prev:before, .slick-next:before { font-size: 40px; text-shadow: 0 0 10px rgba(0,0,0,0.5); }
Apa itu
.slider .slick-slide { border: solid 1px #000; } .slider .slick-slide img { width: 100%; }
4 &.slider .slick-slide { border: solid 1px #000; } .slider .slick-slide img { width: 100%; }
5?Jika Anda tidak terbiasa,
.slider .slick-slide { border: solid 1px #000; } .slider .slick-slide img { width: 100%; }
_6 dan.slider .slick-slide { border: solid 1px #000; } .slider .slick-slide img { width: 100%; }
7 adalah pseudo-elements. Teknik di css untuk menambahkan elemen semu, alias tidak benar-benar di elemen html/DOM, tetapi ada dan muncul di layar, karena ditambahkan melalui CSS. Dalam kasus di atas,.slider .slick-slide { border: solid 1px #000; } .slider .slick-slide img { width: 100%; }
8 dan.slider .slick-slide { border: solid 1px #000; } .slider .slick-slide img { width: 100%; }
9 menambahkan elemen semu berupa karakter panahMari pindahkan nav bertitik di bagian bawah, sehingga naik ke area penggeser
/* move dotted nav position */ .slick-dots { bottom: 15px; }
Ubah ukuran dan warnanya. Seperti panah, titik juga merupakan font
Warna standar kami putih, warna aktif kami abu-abu. juga menambahkan 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; }
Hore lebih enak
Demo. Indeks5. html
Kiat Pro
*dalam artikel ini, kami mengacu pada 2 file css yang dimiliki oleh slick library, serta menambahkan gaya kami. Jadi ada 3 lokasi gaya berbeda hanya untuk penggeser. Ini tidak ideal dan bukan praktik terbaik
Untuk yang paling optimal, idealnya Anda perlu menggabungkan semua CSS yang apik menjadi 1 file dengan gaya Anda sendiri, sehingga halaman hanya perlu meminta file 1 kali.
*Kode sumber apik di github, menyediakan css dalam bentuk file LESS dan SCSS (sass), Ideal untuk mereka yang menggunakan preprosesor css. Kapan kita akan membahas preprocessor sass ini
Nah sekarang yang terakhir, kita ingin panah kiri dan kanan tidak muncul secara default, dan hanya muncul saat mouse diarahkan ke area banner?
Sangat mudah dengan hanya CSS
Cukup tambahkan aturan
$(document).ready(function(){ $('.slider').slick({ autoplay: true, autoplaySpeed: 2500, dots: true }); });
0 ke$(document).ready(function(){ $('.slider').slick({ autoplay: true, autoplaySpeed: 2500, dots: true }); });
1, dan opacity nol, sebagai berikut/* hide dots and arrow buttons when slider is not hovered */ .slider:not(:hover) .slick-arrow, .slider:not(:hover) .slick-dots { opacity: 0; }
Biar lebih baik, itu disebut efek transisi
/* transition effects for opacity */ .slick-arrow, .slick-dots { transition: opacity 0.5s ease-out; }
Demo. indeks6. html
Efek transisi saat meluncurSecara default, efek yang digunakan saat banner berubah adalah slide
Slick juga memberikan efek transisi lainnya berupa fades
Cukup tambahkan
$(document).ready(function(){ $('.slider').slick({ autoplay: true, autoplaySpeed: 2500, dots: true }); });
_2 ke konfigurasi.slider .slick-slide { border: solid 1px #000; } .slider .slick-slide img { width: 100%; }
0Memang efek bawaan yang disediakan terbatas pada slide dan fade, tapi kita juga bisa membuat efek transisi dengan CSS. Mungkin kita akan membahas kapan