Cara menggunakan zoom slider html

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%;
}

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

JavaScript

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 slick

Slick 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%;
}

$(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%;
}

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

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

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

Mari 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
    });
});

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

/* 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 meluncur

Secara 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
    });
});

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

Memang efek bawaan yang disediakan terbatas pada slide dan fade, tapi kita juga bisa membuat efek transisi dengan CSS. Mungkin kita akan membahas kapan

Bagaimana cara menyesuaikan ukuran slide?

Apa itu slide zoom?

Bagaimana cara menampilkan presentasi secara zoom?

Bagaimana cara menambahkan penggeser baru?