() translation by (you can also view the original English article)
Dalam kursus saya, Optimalkan Situs Web Anda Tanpa AMP, saya menunjukkan Anda secara detail cara mengoptimalkan situs web Anda untuk kinerja secepat kilat tanpa menggunakan AMP Google.
Dalam vidio dari kursus ini, Anda akan belajar cara membuat komponen popular - carousel evolusi tweets - menggunakan script Siema ringan. Teknik yang Anda pelajari akan membuat Anda mencapai kinerja hebat tanpa menggunakan AMP.
Cara Membuat Carousel Twitter yang Dioptimalkan
Memperkenalkan Siema
Video ini mengambil dari pelajaran sebelumnya di kursus, di mana kami membuat situs web dengan tiga tweet tertanam di bagian bawah halaman. Anda dapat menemukan kode sumber lengkap untuk proyek di GitHub. Dalam pelajaran ini, kita akan mengubah ketiga tweets menjadi carousel.
Dalam versi AMP dari situs kami, yang dilakukan dengan elemen kustom amp-carousel . Tapi sebaliknya, kita akan menggunakan sedikit script yang keren yang di sebut Siema.
Siema menandai semua kotak yang kita cari dengan skrip kita:
- Ringan
- Ukuran file yang kecil
- Mudah
- Kita bisa membuatnya secara asynchronous.
- Tidak memiliki ketergantungan.
Kami sudah menambahkan Siema ke script index.min.js kami sebelumnya ketika kami mengatur file kami, dan itu sudah dimuat di file pagecontent.html, jadi siap untuk kami gunakan.
Buat Carousel Dasar
Yang perlu kita lakukan adalah menambahkan kode kecil di pagecontent.html untuk mengaktifkan script kita.
1 |
const mySiema = newSiema({
|
2 |
selector: '.slides' |
3 |
}); |
Screenshot di bawah ini menunjukkan di mana untuk memasukkannya:
Apa yang kami lakukan di sini adalah membuat constant, dan menamainya mySiema. Kami menetapkan bahwa constant sama dengan contoh baru Siema, dan kemudian kami menambahkan objek dengan beberapa parameter.
Di dalam kurung kurawal, kami menambahkan pemilih properti, dan kami mencalonkan pemilih yang Siema harus mencari untuk membuat korsel dari anak-anaknya. Sebelumnya kami menambahkan kelas .slide yang berisi tweet, jadi jika kami menargetkan ini dengan Siema, itu akan mengambil setiap tweet kami dan mengubahnya menjadi slide yang ada di korsel kami.
Jika Anda memeriksa situs sekarang., Anda akan melihat tweet pertama ditampilkan sebagai slide.
Ini tidak menampilkan yang lain, karena kita perlu menambahkan sedikit kode tambahan untuk membuat carousel otomatis bermain.
Jadikan Corausel Auto-Play
Untuk membuat permainan putar otomatis carousel, kami perlu memodifikasi kode kami sebagai berikut:
1 |
const mySiema = newSiema({
|
2 |
selector: '.slides', |
3 |
loop: true |
4 |
}); |
5 |
setInterval(() => mySiema.next(), 4000) |
Apa yang kami lakukan di sini adalah memberi tahu Siema dan kami ingin menunggu di antara setiap slide kami. Jadi pada baris terakhir, kita mengatur interval dengan setInterval, dan kemudian dari baris yang mentransfer Siema bahwa kita ingin interval antara setiap slide menjadi 4.000 milidetik, atau 4 detik.
Sementara kita melakukannya, kita juga perlu memveri tahu Siema bahwa kita ingin nengulangnya. Jadi kami melakukannya dengan garis loop: true .
Sekarang, carousal secara otomatis akan berpindah dari satu slide ke slide berikutnya, menunggu empat detik di antaranya, dan kemudian akan berputar kembali ke awal.
Tambahkan Tombol Navigasi
Masih ada hal yang lain; dan itu adalah beberapa tombol kecil yang dapat kita gunakan untuk maju atau kembali secara manual di korsel kami.
Jika untuk membentuk tombol kami, hal pertama yang perlu kami lakukan adalah menambahkan sedikit tambahan HTML di file yang sama dengan di-twitter-carousel, tetapi di dalam div slide, karena kami tidak ingin Siema memperlakukantombol ini sebagai slide yang perlu dimasukkan ke dalam karusel.
Kode hanya menambahkan dua bentuk SVG: segetiga kecil yang menunjuk ke kiri, dan segitiga kecil yang menunjuk ke kanan.
Karena kita tidak perlu memuat dalam gambar, itu memberi kita waktu buka yang lebih cepat, dan ukuran file dari kode kecil ini untuk mengatur bentuk SVG sangatlah kecil.
Anda dapat melihat bahwa kita punya nama kelas prev pada pertama tombol kami dan kemudian berikutnya pada satu detik. Dan itu adalah kelas yang akan kita targetkan dengan Siema, mengatakannya untuk memperlakukan tombol-tombol itu sebagai tombol ke depan dan ke belakang untuk komudi putar.
Kami akan menggnakan JavaScript kecil untuk menemukan elemen-elemen tersebut di kode kami. Di sinikah Anda mungkin telah terbiasa bekerja dengan jQuery, tetapi tentu saja kami menghindari penggunaan jQuery di situs kami sehingga kami tidak memiliki kode tambahan untuk dimuat. Sebagai gantinya, kita akan memodifikasi kode kita dengan menambahkan dua baris baru sehingga terlihat seperti ini:
Dalam kode ini, kami menambahkan pemilih kueri dokumen dan kemudian menentukan pemilih yang ingin kami cari, yang merupakan kelas prev . Kemudian kami menambahkan pendengar acara, dan acara yang ingin kami dengarkan adalah klik .
Jadi sekarang ketika seseorang mengklik tombol itu di sebelah kiri, kita akan memicu suatu tindakan, dan sisanya dari baris mengatur apa perilaku itu untuk tombol di sisi kiri.
Kemuduan, di baris berikutnya, kami melakukan hal yang sama dengan tombol di sisi kanan, hanya saja kali ini kami mengganti prev dengan next .
Dan sekarang, jika kami memeriksa situs kami, kami dapat melihat tombol sebelumnya dan selanjutnya, dan jika kami mengkliknya, kami dapat melanjutkan melaui carousel sesuka kami.
Buat Versi Fallback JavaSkript
Sekarang hanya ada sedikit kode tambahan yang perlu kami tambahkan. Dalam kursus, kami telah membuat versi situs untuk orang-orang yang menonaktifkan JavaScript di browser mereka. Tapi sekarang, jika kita mematikan JavaScript, kami memiliki kutipan blok kecik yang bagus sebagai fallback kami, tetapi kami memiliki tombol navigasi yang tidak berguna di sini sekarang.
Jadi kita bisa memperbaikinya dengan masuk ke syle sheet noscript.css jami dan menambahkan:
1 |
.carousel-button { |
2 |
display: none; |
3 |
}
|
Sekarang, ketika kami menyegarkan situs kami dengan JavaSkript dimatikan, kita akan melihat bahwa kami telah menyingkirkan tombol-tombol itu.
Tonton Kursus Lengkap
Dalam kursus lengkap, Optimalkan Situs Web Anda Tanpa AMP , Anda akan belajar cara mengambil situs berbasis AMP yang ada dan mengonversinya agar menggunakan padanan non-AMP. Kursus ini akan memberi Anda metode yang bermanfaat untuk membuat situs Anda berjalan secara cepat, tetapi dengan teknik pengoptimalan yang Anda putuskan sendiri.
Anda dapat mengambil kursus ini langsung dengan berlangganan Envato Elements . Dengan biaya bulanan yang rendah, Anda mendapatkan akses tidak hanya untuk kursus ini, tetapi juga untuk perputakaan kami yang berkembang lebih dari 1.000 program video dan eBook industri terkemuka Envato Tuts +
Plus Anda sekarang mendapatkan unduhan tak terbatas dari perpustakaan Envato Elements yang besar berisi 400.000 aset kreatif. Buat dengan font, foto, grafik dan templat yang unik, dan berikan proyek yang lebih baik dengan lebih cepat.
