Halo teman-teman semua, selamat datang kembali di channel WPU bersama saya Sandika Gali. Dan di video kali ini, kita akan kembali masuk ke playlist yang sudah lama nggak kita jalankan, yaitu playlist Ngobar alias Ngoding bareng, teman-teman. Pasti udah pada kangen ya. Jadi sebetulnya beberapa hari yang lalu, itu saya nggak sengaja lagi buka-buka YouTube, itu ketemu tiba-tiba di beranda saya ada sebuah tutorial pembuatan slider dengan animasi yang keren banget. Terus saya pikir ini kayaknya bisa kita recreate untuk bikin versi kita sendiri teman-teman.
Nah jadi di video kali ini kita akan coba membuat sebuah animasi slider sederhana ya. Karena hanya menggunakan HTML, CSS, dan JavaScript saja. Bahkan tanpa framework, tanpa library.
Jadi saya sebutnya vanilla atau polosan aja. Nah penasaran seperti apa hasil akhirnya? Mari kita lihat sama-sama teman-teman.
Nah jadi ini dia kita punya slider dengan tema game Dota 2. Nah mari kita coba dari sini yang suka. main game Dota 2 ya. Walaupun saya juga udah bukan player lagi.
Udah lama pensiun tapi sampai saat ini saya masih ngikutin perkembangan yang masih ngikutin turnamennya walaupun udah gak main lagi. Jadi kita coba refresh sekali lagi. Jadi slidernya itu menampilkan 5 hero dari game Dota 2. Dimana hero ini bisa kita pilih dengan cara menekan tombol next atau previous disini untuk ngegeser ke hero berikutnya. Nah lihat nih. Jadi saya punya 5 hero yang ada penjelasan singkatnya.
Seperti ini Dan ada loading bar di atas Serta animasi pergerakan dari tiap-tiap perpindahan hero-nya Kita bisa maju Terus kita juga bisa mundur Ya keren banget teman-teman ya Dan ini udah saya tambahkan juga responsifnya Jadi kalau halaman kita kecilin Ini tidak akan mengganggu tampilannya Jadi tetap masih bisa terlihat dengan cukup rapih lah ya Kalau kita geser Animasinya masih tetap jalan Next dan previous. Dan bahkan kalau kita biarin. Ini slidernya autoplay teman-teman. Jadi dia akan jalan sendiri setelah beberapa detik.
Jadi dia akan next, next, next terus. Dan looping gak berhenti gitu. Oke teman-teman ya.
Jadi ini dia hasil akhir dari slider yang akan kita buat. Mudah-mudahan teman-teman tertarik nih. Nah nanti silahkan teman-teman modifikasi sendiri, temanya mau seperti apa, nggak perlu sama seperti saya menggunakan Dota 2. Ya teman-teman bisa pakai game kesukaan teman-teman masing-masing ya, mau pakai Mobile Legends, mau pakai Valorant.
Silahkan pilih hero-heronya atau karakter-karakternya, atau teman-teman mau pilih misalnya band favoritnya, idola favoritnya, atau apapun yang bisa menampilkan beberapa item atau karakter gitu ya. Jadi silahkan. Nah dan untuk mengikuti modding bareng kali ini, ada beberapa hal yang harus teman-teman siapkan.
Yang pertama jelas kita akan menggunakan kode editor yang namanya VS Code atau Visual Studio Code. Silahkan teman-teman install dulu kalau belum punya. Terus nanti akan ada beberapa extension yang harus di-install ke dalam VS Code-nya.
Tapi nanti akan kita install atau kita lihat bareng-bareng ketika kita mulai masuk ke materinya. Jadi jangan khawatir. Nah terus yang kedua, untuk materinya sendiri ada beberapa hal yang harus teman-teman pahami terlebih dahulu sebelum bisa ngikutin seri ini dengan lancar.
Yang pertama jelas teman-teman harus paham mengenai HTML. Struktur HTML. Tag yang digunakan, atribut pada tag-nya Itu harus teman-teman pahami dulu Terus yang kedua, teman-teman harus belajar CSS CSS-nya mulai dari CSS dasar Belajar mengenai selektor, property Lalu CSS layouting Ya nanti kita banyak menggunakan display Kita banyak menggunakan position Terus teman-teman harus paham juga mengenai flexbox Dan juga transisi dan animation Karena banyak banget animasi yang akan kita gunakan di dalam website kita Dan terakhir, teman-teman harus paham mengenai javascript Javascriptnya harus paham sampai ke DOM, Dokumen Object Model Gimana nanti kita melakukan seleksi pada elemen DOM dan memanipulasi DOMnya Jadi kalau misalkan belum paham, boleh teman-teman buka-buka dulu playlist yang ada di channel WPU ini Mengenai HTML dasar, CSS dasar, dan juga Javascript Jadi kalau sudah siap, tanpa berlama-lama lagi, mari kita mulai modding bareng episode kita kali ini Baik teman-teman, jadi langsung saja di bagian pertama, seperti biasa kita persiapan dulu Mari kita sama-sama mulai dari membuat folder dulu di dalam desktop kita aja ya biar gampang ya Silahkan teman-teman klik kanan di desktopnya kita pilih new folder Kita kasih nama aja ini sebenarnya namanya bebas ya teman-teman Cuman saya mau kasih namanya WPU animated slider gitu ya Oke sekarang kita buka folder ini di visual studio code kita Silahkan teman-teman buka visual studio codenya Kita cari Visual Studio Code, kita buka.
Saya biasanya bukanya run as administrator. Tapi kalau teman-teman mau buka sebagai user biasa pun nggak masalah ya. Oke, sekarang kita ke file. Terus kita open folder. Nah, kita cari tadi folder yang ada di desktop.
Kita select. Sudah ya, sekarang kita sudah ada di dalam foldernya. Kita akan membuat beberapa file dan folder teman-teman ya. Yang pertama jelas kita akan bikin file index.html. Ini saya perbesar dulu sedikit.
Yang kedua. Untuk CSS-nya kita kasih nama style.css. Yang ketiga untuk JavaScript-nya kita kasih script.js. Kita akan bikin pakai vanilla. Vanilla itu artinya polosan saja.
Tidak ada framework, tidak ada library yang akan kita pakai. Sudah. Dan terakhir kita butuh sebuah folder buat menyimpan gambar kita.
Jadi kita bikin saja folder baru. Pilih icon new folder ini. Lalu bikin folder namanya img.
Sip. Sekarang sebelum kita mulai. Kita butuh aset dulu teman-teman Jadi teman-teman butuh gambar yang akan kita jadikan sebagai wallpaper Syaratnya adalah cari gambar yang cukup besar Tapi jangan terlalu besar nanti berat ya Secukupnya aja Karena saya pengennya Full HD Maka saya akan cari gambarnya 1920x1080 ya Nah karena kebetulan tema kita hari ini adalah Dota 2 Sekali lagi teman-teman boleh pilih temanya silahkan ya Mau game favorit teman-teman Mau band favorit teman-teman Mau idola teman-teman silahkan ya tema kita dota. Nah kebetulan saya sudah menemukan sebuah website yang biasanya memberi kita wallpaper ya. Kayaknya cocok untuk jadi background dari website kita.
Karena ukuran wallpaper itu biasanya pas. Kalau full HD kita carinya yang 1920x1080. Dan ini udah temanya dota.
Kalau teman-teman mau cari yang lain seperti biasa silahkan. Nah tapi gini karena tadi di contoh teman-teman lihat bahwa kita akan memberi informasi pada website kita di sebelah kiri ya jadi teman-teman cari gambarnya, ini syarat berikutnya ya cari gambarnya, jangan yang fokusnya ada di tengah atau di kiri nah jangan yang kayak gini, jangan juga yang seperti ini, nah ini cocok nih si Templar Assassin-nya di sebelah kanan saya nanti mau tulisnya nama dia terus detail yang lainnya itu ada di sebelah kiri, jadi ini cocok, ini gak cocok nih Sven ini gak cocok karena dia di sebelah kiri, kita mau naruh gambar disini, nanti kehalang Gambar utamanya. Jadi sekali lagi silahkan cari gambar yang sesuai ya.
Kalau teman-teman stylenya mau sama dengan saya. Tapi kalau mau dibedain juga boleh aja ya. Kita cari salah satu contohnya aja ya.
Nah kalau teman-teman menemukan seperti ini nih misalnya. Wah ini cocok nih. Atau teman-teman suka karakternya.
Nah tapi dia ada di sebelah kiri. Nah ini bisa kita flip ya. Nah ini teman-teman flip aja. Kita download. Ini salah satu contohnya ya.
Download. Kita download. Kita masukkan ke dalam folder kita. Nah ini biar gampang teman-teman kasih namanya.
Angka 1 aja. Biar nanti kita manggilnya nggak perlu pusing-pusing lagi. 1, 2, 3, 4, 5 ya. Saya save jadi 1. Kita buka.
Sekarang saya udah punya gambarnya. Kita bisa buka gambarnya. Terus kita edit. Ini kalau pakai Windows ya. Saya yakin teman-teman caranya pasti tau lah.
Masing-masing dari kalian pasti udah tau. Ini ada di bawah. Tanda panah kiri kanan. Flip image horizontally.
Jadi klik. Nah kalau sudah. Save. Pilih yang save.
Udah sekarang gambarnya. Kalau kita lihat. Sudah nge-flip. Harusnya ini aman.
Oke ya teman-teman ya. Jadi itu dia contoh gambarnya. Silahkan cari yang lain.
Nah yang kedua kita butuh konten dari websitenya. Saya butuh tulisannya. Supaya nggak perlu mikir.
Saya mau cari di websitenya. Kalau Dota itu ada yang namanya Liquipedia teman-teman. Nanti semua linknya ada di deskripsi video. Silahkan dilihat aja.
Ada Liquipedia.net. Di mana kita bisa melihat informasi dari hero-heronya gitu ya. Nah tadi yang saya pilih adalah centaur ya. Jadi kalau teman-teman lihat di sini.
Ada si centaur. Yang ini nih ya. Di dalam centaur nanti kita ambil namanya.
Terus kita ambil deskripsinya. Yang mau saya butuhin adalah di bagian lore. Ada di lore. Nah ini saya butuh icon ini. Supaya nanti bisa kita pakai juga di bawah dari nama dia ya.
Caranya kita klik kanan. Buka di tab baru. Nah ini kita save aja.
Kita ctrl S. Kita masukkan ke folder image. Tapi saya mau bikin folder baru.
Misalkan ini namanya avatar gitu. Atau namanya mau icon boleh. Mau thumbnail juga boleh Saya putuskan namanya avatar Kita pasangkan dengan nama file dari wallpapernya Jadi kalau tadi centaurnya 1 Maka si avatar ini 1 Oke Kalau teman-teman mau pakai yang lain Game lain atau topik lain Silahkan cari padanannya Avatar itu apa Oke Sip ya Sudah Itu kita punya asetnya Silahkan teman-teman cari 5 aja ya Kalau mau lebih juga boleh Cuma kita nanti pakenya 5 Oke teman-teman sekarang saya udah punya 5 ya Jadi ini Mau temen-temen lihat Ada 1 centaur 2 saya pilih ini Karena dia sebelah kanan ya Dragon knight nya Lalu ada ember spirit Kosong sebelah kiri Jadi aman keliatannya Ada phantom lancer Dan terakhir ada shadow shaman Nah ini enak nih Naro gambarnya disini Aman Sip udah ada 5 Termasuk juga avatar nya Ada 5 Oke itu dia Aset yang kita butuhin Ya boleh di close aja Ini nanti tetep kita buka Yang wallpaper kayaknya udah selesai Karena nanti saya butuh Beberapa Nah informasi ya, contohnya ini nih, ada rulesnya nanti mau saya copy juga, sama penjelasannya lah ya, oke sekarang kita kembali lagi ke kode editor kita ya untuk yang script kita close dulu yang style kita close dulu, belum butuh dan sidebar nya di close dulu, silahkan temen-temen pencet ctrl B ya Nah sebelum kita lanjut, jangan lupa teman-teman biar sama ya kita sama-sama pastikan dulu extension di dalam VS Code-nya sudah terinstall.
Yang pertama jelas kita butuh yang namanya pre-tier. Teman-teman install dulu, kalau belum diinstall silahkan cari di bagian extension namanya pre-tier. Supaya apa? Supaya kode kita nanti otomatis rapih ya.
Kalau di-save otomatis rapih. Kalau sudah di-install kita jalanin settingnya dulu. Ya teman-teman pencet ctrl, terus ketik aja format disini. Nanti disini ada format on save di checklist.
Jadi nanti setiap kita nge-save, otomatis kodenya dirapihin. Dan default formaternya ini pastiin yang terpilih adalah prettier. Oke, itu yang pertama. Terus yang kedua yang nanti mau kita coba adalah live server dan live preview.
Ya, dua-duanya install aja. Supaya nanti kita bisa lihat dengan mudah di halaman ini. Kalau nggak cukup, kita pindah ke live server. Oke, sip.
Itu ya. Kita kembali lagi. Ini di close aja Sekarang kita mulai Buat struktur HTML nya teman-teman Di dalam file index.html Teman-teman mencet tanda seru Terus tab Supaya keluar struktur HTML nya Title nya kita kasih aja WPU animated slider gitu Sudah Di dalam bodinya Nah ini Supaya terlihat seperti website Kita butuh navbar ya Di bagian headernya Maka kita butuh Element header Yang di dalamnya ada element nav Yang dalamnya kita bikin simple aja. Gak usah pake list.
Kita langsung bikin pake tag A aja ya. Hrefnya kita kosongin dulu. Karena ini hanya dummy aja.
Ada home. Terus kita duplikat aja. Cet alt.
Shift bawah. Apa nih? Misalnya ini about gitu ya. Terus ini apa? Ini kontak gitu.
Oke. Sip. Sudah.
Ini kita kecilin sedikit. Kita buka live preview ya. Klik kanan. Kita show preview. Supaya keliatan di sebelah kanan nih.
Gitu ya. Karena kalau tadi terlalu besar. Ikutan besar dia. Sudah.
Cukup, ini bagian header. Ini nggak ada masalah ya. Style-nya belakangan ya. Berikutnya, ini yang paling utamanya nih.
Kita bikin struktur slidernya. Ini komponen yang cukup besar ya. Jadi kita bikin pakai div dengan kelas slider.
Titik slider. Yang di dalamnya nanti akan ada beberapa bagian. Yang pertama adalah bagian background utamanya. Itu nanti kita kasih nama list aja ya.
Titik list begini. Jadi daftar dari backgroundnya. Terus nanti di bawah sini kita punya...
thumbnail. Jadi kita kasih titik thumbnail. Jadi ada dua.
Ada list buat naro background besar beserta informasi dan thumbnail buat yang kecilnya. Oke. Nanti di bawah thumbnail tuh masih ada beberapa tapi kita fokus di dua ini dulu aja ya. Kita mulai dari yang list teman-teman.
Pertama kita butuh gambar. Ya. Bikin tag img aja. Kita ambil dulu gambar pertama ya.
Ambil dari folder img ambil file pertama. Oke. Nanti ada gambarnya.
Ya. Punya saya sih. Sentor dulu. Ini kita kasih nama, boleh langsung nama hero-nya atau biar generic ya. Kita kasih gini aja ya, image 1 gitu ya.
Sudah, ini untuk background utama. Nah, di dalamnya atau di bawahnya, kita butuh div dengan kelas detail. Untuk ngasih detailnya, namanya siapa, terus karakteristiknya gimana, ada tombol. Nantinya kita arahkan ke read more misalnya, gitu ya.
Pertama, kita bikin dulu judul ya. Ini judul dari si section-nya atau judul halamannya. Kita kasih div dengan kelas title. Misalnya ini kita tulis Dota 2 gitu ya Silahkan kalian mau Mobile Legends misalnya ya Mau JKT48 boleh ya Twice boleh ya Baru dibawahnya kita kasih name Buat si nama hero nya Atau nama orang nya lah ya Mau ditulis langsung boleh ya Kita kasih Centaur Atau biar gak salah kita copy aja ini Itu Silahkan kalian siapkan detailnya Nah berikutnya kita butuh buat nyimpan Si ini ya tadi ya Ini Icon nya Jadi ada dua ada icon dan tulisan. Biasanya saya simpan ke dalam sebuah tag namanya figure.
Karena dalam figure udah ada dua ada image. Ya ini buat nyimpen IMG. Terus apa avatar 1 gitu ya.
Ini avatar 1 gitu. Biar sama. Dan ada captionnya. Nah biasanya pake fig caption. Ini untuk nyimpen ini.
Ya kalian cari padanannya ya. Nah ini nih. Ini bisa kita copy aja. Cepet ya. Copy ke sini.
Nah ini duplikat. Kita hapus aja. Satu.
Ganti dengan tanda slash. Ini tuh kalau teman-teman yang main Dota. Tipe hero nya apa. Dia tipe hero yang durable.
Seorang inisiator. Dia disabler juga. Sip. Ini ada di bawah ya.
Masih belum kita style. Yang penting kita tulis dulu aja. Udah kalian untuk thumbnail belakangan ya.
Dan ini kita bikin untuk satu hero dulu. Ah ada yang lupa nih. Kita lupa nyimpen. Ke dalam sebuah item. Nah ini list ini untuk nyimpen semua hero nya Nah ada yang lupa Mumpung ingat kita bikin disini item Gini ya tutupnya Pindahin ke akhir sini Jadi nanti Kita akan punya 5 item di dalam listnya.
Karena kita mau bikin 5 hero ya. Nah jadi sekarang ini dulu. 1 hero dulu. Baru kita kasih style. Oke ya.
Sip. Teman-teman boleh save dulu. Sekarang kita buka style kita teman-teman. Masuk ke style.
Tutup lagi ctrl B. Sebelum kita mulai. Biasain kita reset dulu ya.
Nah kalau biasanya itu kan saya gampang aja reset tuh kayak gini ya. Margin 0 gitu. Terus padding 0. Nah tapi sekarang saya mau bikin resetnya lebih rapih ya.
Caranya gini, kita googling aja teman-teman Kita buka browser, terus kita tulis CSS Reset 2024 Biar baru nih Kebetulan ada dari laser00 ya Atau teman-teman sekali lagi klik di deskripsi ya Ada disini di bagian CSS Reset Ya, kita copy aja lah ya Ini ada copy raw file Nah, tapi sekarang kita copy-nya ke file baru aja ya Kita bikin file baru Kita kasih nama Reset CSS. Nah kita simpen disini. Ctrl V. Save.
Udah. Gak usah diutak-atik lagi. Kita close aja.
Nah sekarang kita panggil ya. Tadi kita lupa panggil ternyata. Tutup dulu.
Ke index lagi. Kita panggil dulu. Di headnya kita panggil si resetnya. Pakai tag link. Terus reset.
Jangan lupa juga link style ya. Nah untuk javascriptnya biasanya saya simpennya di bawah sebelum tutup body ya. Panggil tagnya script. Pilih yang ada src nya. Kita arahkan ke script.js.
Oke. Nah ini udah kereset tuh semuanya. Udah hilang margin dan padding nya. Baru sekarang kita mulai buka style.
Ngapain nih? Kita ganti font nya dulu kali ya. Nah daripada kita pake font yang ada.
Mending kita cari di google fonts. Biar bagus-bagus. Balik lagi ke browser.
Kita cari ini udah gak dibutuhin ya. Kita ganti jadi fonts.google.com. Nah kita pake apa?
Ini aja yang paling sering dipake ya. Roboto, ya kalau teman-teman punya font lain Yang lebih bagus atau favorit Silahkan, saya mau pakai Roboto Klik Roboto, ini saya baru tahu Ternyata tampilan Google Fonts Berubah ya, nah kalau sudah ketemu Saya akan pilih beberapa ketebalan, nanti diingat-ingat Aja ukuran ketebalannya ya Ini caranya, gimana ini agak beda UI-nya Kayaknya get font, nah betul Klik get font, terus Teman-teman pilih ini Get embed code, ya Klik Nah sekarang kita bisa pilih ketebalannya ya. Pilih dulu disini change styles. Ini matiin dulu semuanya.
Saya mau pilih yang tipis. Italic nya boleh deh ya. Jadi tipis 100 beserta italic nya. Regular 400 beserta italic nya. Terus kita mau pilih yang black kali ya.
Yang paling bold nih. Sudah. Sip sudah dapat.
Tinggal kita copy disini. Yang embed code nya ya. Klik copy.
Kita kembali ke web kita. Di index-nya, sebelum kita panggil style-nya. Di sini aja ya. Kita panggil dulu si font-nya. Jadi sekarang kita bisa pakai di dalam style-nya.
Oke, sudah. Sekarang masuk ke style. Kita mulai dari body dulu ya. Style body-nya, kita ganti semua font family-nya.
Memastikan language mode-nya di bawah itu CSS ya. Supaya ada bantuannya seperti ini. Kita pilih si Roboto. Roboto.
Nah, sudah berubah semua. Kalau Roboto gak ada Kita ganti jadi apa Alvetica kali ya Nah gini Sip Terus kita kasih tebelnya yang regular ya Jadi font weight Yang 400 tadi Terus saya pengen semuanya Backgroundnya hitam Background halamannya Udah Dan saya pengen semua tulisannya putih Kebalikannya ya Gini Jadi 000 itu hitam FFF itu putih Terus saya pengen semua font size nya agak besar Secara defaultnya Kita kasih 1,2 rem ya 1 rem itu defaultnya 16px berarti kalau 1,2 itu tinggal dikali aja 16 kalau pengen tau detailnya sebenernya temen-temen bisa kesini ke index, klik kanan terus kita pilih yang open with live server kan udah di install tadi ya nanti dibuka di browser, terus kita klik kanan inspect, nah temen-temen liatnya di bagian computed, nih disini di elements, computed liat font size cari font size Jadinya 19,2 defaultnya. Oke, kembali lagi.
Nanti kita pakai yang browsernya belakangan aja. Kita lihat dari sini dulu masih cukup ya. Dah, balik ke style lagi. Satu-satu, sekarang kita akan style bagian headernya dulu. Supaya warnanya putih dan nge-blend dengan backgroundnya.
Oke, kita ke sini, kita kasih header. Kita kasih lebarnya 1200px. Terus kita kasih max widthnya 80%.
Terus supaya di tengah. Ini supaya ada... Margin kiri kanan ya.
Supaya di tengah kita kasih margin auto. Nah supaya jadi ada jarak ya di kiri dan kanannya. Terus berikutnya kita kasih height tingginya 50px. Nah supaya ada di tengah-tengah secara vertikal. Kita butuh bikin dia jadi display flex biar gampang ya.
Terus apa? Align item center. Nah jadi dia di tengah-tengah tuh. Nggak nempel ke atas lagi. Nah, terus supaya dia berada di depan yang lain, kita butuh kasih dia position relative dan z-index yang sangat besar.
Misalnya gitu ya. Nah, cukup untuk headernya. Berikutnya kita ke navbar ya.
Dia ada di header nav. Ini kita kasih display flex. Kenapa?
Karena saya pengen bikin dia jaraknya renggang tanpa ngasih margin ya. Supaya kita bisa kasih gap di sini. Gapnya kita kasih 2 rem aja ya. 16 x 2, 32 pixel. Ya, oke.
Next adalah A-nya. Tadi kita bikin header udah, nav udah, sekarang A-nya. Jadi kita ke header, nav, A.
Saya mau dia, pertama nggak ada garis bawahnya dulu. Text decoration, none. Terus kita bikin hurufnya jadi capital semua ya. Jadi text transform, uppercase.
Terus color-nya white. Nah, begini. Paling saya mau kasih jarak ya.
Antar huruf. Kita kasih letter spacing 0,1 rem. Nah gitu. Tulisannya kegedean nggak?
Coba kita lihatnya di sini. Nggak ya. Kayaknya cukup ya. Sip cukup. Sekarang kita turun ke bagian slider ya.
Ini dia nih. Kita bikin slider. Kita mulai dulu dari si slidernya. Komponen atau container terbesarnya. Kita bikin supaya ukurannya memenuhi layar ya.
Jadi widthnya itu 100 viewport width ya. Jadi lebarnya penuh. Heightnya juga sama.
100 VH ya. Jadi dia akan memenuhi layar. Kalau bablas kita kasih hidden. Jadi ini akan penuh. Ini kebetulan gambarnya full ya.
Nanti kalau gambarnya sebetulnya kecil. Ini dia akan ngecilin tuh. Tapi nanti kita akan benerin. Oke. Nah sekarang supaya dia naik ke atas.
Kita kasih margin topnya. Minus aja ya. Tadi kita tau tinggi dari headernya 50px. Berarti kita kasih minus 50px.
Supaya naik tuh. Kita kasih position relative. Karena nanti isinya ada yang mau kita bikin absolute.
Supaya ke kunci ya. Next, kita butuh berikutnya apa? Slider udah. List nggak akan kita kasih style, karena list nanti kepake ketika kita mau ngambil elemennya pake javascript. Sekarang kita langsung style si itemnya aja ya.
Pembungkus dari tiap-tiap hero-nya kalau disini. Oke, jadi caranya kita langsung panggil selektornya gini. Titik slider, titik list, titik item. Item yang ada di dalam list, yang ada di dalam slider.
Nah, ini akan kita bikin posisinya. Absolute Supaya apa? Supaya kita bisa penuhin layarnya Nah ini caranya kan sebenernya Ada Temen-temen tau gini ya Bisa top, bottom Jadi ditarik gitu Ditarik ke atas Ditarik ke bawah Ditarik ke kiri Ditarik ke kanan Gini Nah tapi ini ada cara gampang ya temen-temen Daripada pake ini Kita bisa pake insert Ya Right, bottom, left Sama aja Jadi mau 4 baris begini Atau mau 1 baris begini Boleh ya Sip kita hapus aja yang 4 baris Berikutnya Turun lagi ke image. Ini udah sekarang kesini.
Nah image ya mau kita bikin penuh. Karena kita udah bikin wadahnya tuh penuh. Nah ini kan gampang ya. Jadi tinggal kita copy aja.
Spasi img. Ini tinggal kita kasih widthnya 100%. Nah ini ikut 100% karena dia image juga disini ya. Nah ini kita benerin ya.
Kita selesaikan dulu. Widthnya 100%. Heightnya 100%.
Terus kita kasih. Object Fit Cover. Nah, jadi ini udah penuh. Dan ini kerennya kalau kita kecilin. Tidak akan mengganggu ukurannya lagi ya.
Oke. Image-nya sudah. Sekarang kita ke detail.
Untuk nampung yang lain ya. Kita copy lagi. Spasi.detail.
Oke. Saya scroll ke atas. Kita mulai dari position-nya.
Absolute. Terus top-nya 20%. Nah, supaya nanti dia... Ada di atas ini ya.
Nah ini kenapa ikut besar? Tadi karena kita kasih selektornya kan begini ya. Spasi. Spasi itu di dalam. Jadi image yang ada di dalam item.
Semua image. Kalau kalian pengennya image yang persis setelah item. Nah kita bisa kasih tanda lebih besar dari.
Ini namanya direct descendant. Anak pertama lah gitu ya. Jadi cucunya nggak kena. Ini kan cucunya nih. Kalau pengen dapetin.
persis anak pertamanya kasih lebih besar dari, jadi ini gak kena sip, ini top 20% supaya semuanya naik ke atas terus widthnya kita fullin ya 1200px, tapi kita kasih max widthnya 80% supaya gak terlalu full terus kita kasih margin auto juga, tapi saya mau tarik ke tengah ini kan kalau kita kasih background color ya, kita kasih background color red dulu deh, nah kan segitu ya saya pengennya sejajar nih disini Jadi biasanya saya tarik dulu, left-nya 50%, jadi kedorong ke kanan. Sekarang kita tarik kembali ke kiri. Pakai transform. Translate. X. Minus.
50%. Tuh. Jadi sekarang pas disini.
Oke. Sip ya. Ini dihapus lagi.
Nah supaya nanti tulisannya punya bayangan. Kita kasih text shadow. Misalkan saya pengen 0. 5 pixel.
10 pixel. Terus warnanya. Hitam aja ya.
Nah gini aja. Kalau kalian gak cocok dengan bayangannya. Ya silahkan diutak-atik lagi ini ya. Oke ini untuk semua ya. Sekarang kita masuk ke satu-satu.
Detail udah. Sekarang kita mulai di title-nya dulu. Kita copy. Spasi titik title.
Oke untuk title-nya. Kita kasih font-weight-nya. Atau kita balikin dulu deh. Font-size-nya kita kecilin ya.
Font-size-nya 1 rem. Pake kecil. Terus font-weight-nya kita bikin yang paling tebel tadi ya.
Tinggal kita kasih margin bottom. Marbot. 0,8 rem aja.
Oke. Nah tapi sekarang saya mau kasih warna nih ya. Saya mau kasih warnanya pake gradasi temen-temen.
Nah biasanya kalo gradasi saya butuh contekan ya. Ini saya biasanya carinya di colors temen-temen. Cari di colors.
Terus cari bagian ini. Browse gradients. Nah ini dia. Kita cari yang warna orange. Nah ini ya.
Ini terlalu pucat. Nah ini kayaknya nih. Saya mau bilang ini aja deh. Ya. Caranya adalah.
Teman-teman bisa kasih. Background. Terus kita kasih. Linear gradient. Ini dari warna apa.
Ke warna apa. Tinggal kita masukin tadi ya. Dari yang.
Cerah dulu. Kasih tanda pagar. Koma.
Baru sebelahnya. Ini warnanya bebas. Sekali lagi ya.
Gak usah sama juga gak apa-apa. Jadi merah ke bawah. Tapi kan ini. Gak bagus ya. Kita butuh.
Bikin dia nge-clip. Jadi kita kasih background clip. Nah kita tulis text disini.
Jadi dia nge-clip masuk ke dalamnya. Tapi kok gak keliatan pak? Gak keliatan karena kita masih ngasih warna putih. Kita harus bikin tulisannya transparan.
Sebenernya kita kalau mau kasih transparan gini bisa ya. Tapi jadinya agak aneh. Ada kusam begini kenapa?
Karena kita kasih tadi. Ingat gak? Text shadow ya disini.
Kita timpa lagi deh text shadow-nya. Jadi none. Nah gitu ya. Jadi sayangnya gak bisa kita kasih shadow iya, gradient iya gitu.
Tapi gak apa-apa lah ya. Oke lanjut lagi. Ini untuk namenya sudah.
Berikutnya kita ke bagian bawah. Ini tuh figure ya. Nih dua ini. Ada figure image sama figure caption.
Oke. Berarti ini kita copy lagi detail figure ya. Disini kita kasih figure.
Ini kita kasih displaynya flex. Supaya sejajar dulu. Oke.
Baru kita kasih align item center. Udah. Tinggal kita kasih jaraknya itu terlalu nempel tuh.
Gapnya setengah rem aja. 0,5 rem. Nah gitu.
Nanti kita kecilin tulisannya. Oke. Coba dilihat di halaman yang besar. Nah oke juga ya. Sip.
Nah ini tinggal ini kita benerin. Oke. Balik lagi ke sini. Sekarang kita butuh image-nya. Kita copy.
Kita copy. Kita figure spasi img. Untuk avatar-nya. Lebarnya kita benerin.
Lebarnya kita kasih 2,4 rem. Biar agak gede sedikit. Berikutnya kita paste lagi. Ini untuk fig caption. Ya.
Fig captionnya. Kita bikin tulisannya uppercase. Terus kecilin ya.
Font size 0,8 rem aja. Terus ukurannya kita agak tebelin ya. Jadi font weight.
Ini kan defaultnya 400 ya. Kita bikin 600. Oh enggak. Kita nggak bawa yang 600 ya.
Jadi kita lupa bawa yang 600. Oh nggak ada ya kita lupa bawa yang 500 ya udah kita copy aja nih 500 ya kita copy ya kita bawa ke sini 400, 500. Kita kasih koma disini. Jadi kita bisa tulis 500. Nah gitu. Oke.
Tinggal kita kasih letter spacing 0,1. 2 rem. 0,1 aja. 0,1.
Udah ya cukup ya. Kita lihat lagi disini. Ya aman ya.
Kayaknya aman nih. Oke sudah ini untuk detail. Tadi kita udah sampai detail. Oh harusnya di bawah sini kita kasih deskripsi ya. Ya kita tambahin dulu deh.
Kita tambahin deskripsi singkat dari si hero-nya. Dan tombol ceritanya. Kalau misalkan mau melihat lebih detail.
Ya teman-teman balik ke index-nya dulu. Ternyata kita belum nambahin. Di bawah figure-nya di sini ya. Kita kasih dia titik dash gitu aja ya.
Buat description. Sama di bawahnya kita bikin A. Reflect.
Kita kasih pagar. Ini ke apa nih? Misalkan kita kasih kelas more gitu ya.
Ini untuk more details. Kita kasih panah 2 ya. Caranya kasih dan right arrow quotation.
Supaya jadi panah 2 begini. Nah descriptionnya ini saya mau contek dulu deh dari sini ya. Cari bisa dari overview, bisa dari lore.
Ini saya mau ngambil yang ini nih. Pesin aja. Supaya ada ceritanya.
Mau lorem juga boleh ya teman-teman. Kasih lorem gitu boleh. Dah.
Balik lagi ke style. kita benerin copy sampai detail simpen kita sekarang butuh apa detail spasi desk ya gini nah ini mulai kita kasih margin top aja deh margin top satu rem biar turun dia terus nah ini tipis banget tulisannya font weight 100 nah kan kita punya yang 100 tadi font size kita kecilin satu rem aja nah tapi ini jangan terlalu panjang ini kayaknya kalau di halaman yang besar dia panjang tuh saya pengennya disini nih Berarti kita butuh apa? Marks Width ya.
Marks Width-nya. Misalnya 40 rem gitu. Biar nggak terlalu panjang.
Nah. Segini cukup lah. Udah.
Terus. Ini kayaknya cukup ya. Shadow-nya. Ya oke lah. Nggak apa-apa ya.
Mungkin nanti kalau kita lihat di gambar hero lain. Kalau tulisannya terlalu putih. Bisa kita benerin belakangan lah. Sekarang terakhir.
Di tombol ya. Ini kita copy. Ini kita kasih spasi titik more ya. tadi kita kasih nama tombolnya more pertama bikin dulu displaynya inline block supaya bisa kita atur paddingnya kita kasih margin top dulu 1,4 rem supaya turun kita kasih background colornya putih atau FFF ya ini kita kasih tulisannya dulu ya color 0,0,0 udah kita kasih padding oh itu shadownya masih ke bawah ya paddingnya 0,6 atas bawahnya Kiri kanannya 0,8. Oh kita ilangin dulu ininya.
Text decoration ya. Text decoration none. Paling kita kasih sudut tumpul ya. Border radius 0,3 rem.
Sip. Nah kita timpa aja deh. Text shadow nya ya.
Kayaknya kurang bagus nih. Text shadow 1px, 1px, 1px. Atau kita kasih none aja ya. Nah gini aja deh.
Coba lihat disini. Udah ya tapi kegedean tulisan nih. Kita kecilin.
Font size 1 rem. Oke. Sip ya. Sekali lagi sebenarnya ini selera aja teman-teman. Mau beda pun gak masalah ya.
Karena kan tujuan kita mau bikin slidernya. Ini masih panjang perjalanannya untuk ke slidernya. Kita hias halamannya dulu. Oke paling ini biar lebih bagus pada saat kita sorot.
Kita flip gambarnya ya. Ini kita copy. Atau warnanya ya. Over.
Colournya kita balik jadi putih. background color nya kita balik jadi hitam itu jika disorot nah gitu atau jadi merah ya kita jadi merah tadi tuh kita punya warna merah mana nah ini dia nah gitu aja ya Oke bagian pertama sudah beres kita ngatur slider dan juga detailnya kita masuk ke bagian berikutnya yaitu bikin thumbnail nih dibawahnya Oke mulai dari HTML dulu kita balik sini digeser dulu dikit ya Nah ini kita thumbnail Kita bikin ini langsung itemnya nih. Kalau ini nggak usah bikin list lagi. Karena thumbnail itu sama aja dengan list ya. Isinya item.
Oke. Dan ini baru satu ya teman-teman ya itemnya. Nanti silahkan teman-teman diduplikat itemnya.
Kalau mau bikin ada dua. Atau itu dulu deh. Ya itu dulu teman-teman.
Sebelum ke thumbnail. Biar ceritanya kita punya dua dulu. Walaupun nggak akan kelihatan ya sekarang. Kalau kita copy simpen di bawah.
Sekarang ada dua tapi numpuk. Nggak kelihatan. Ini itemnya kedua kita ganti ya. kamu di copy nih item kedua kita ganti jadi dua tuh ini numpuk ya ini kita ganti jadi Coba kita contek ya.
Kita contek disini. Ini kita ganti aja deh. Karena saya tau ini adalah Dragon Knight ya. Nah ini kita copy. Namanya kita copy.
Avatar nya juga 2. Udah ganti tuh ya. Terus. Nah ini juga beda nih.
Saya copy aja gini. Ini garis miring. Slash. Slash.
Slash. Slash. Udah. Terus ini kita copy satu baris aja.
Begini. Kita ganti. Nah ini nih kehalang nih.
Nggak bagus nih. Ini berarti harus kita benerin si text shadownya. Coba kita lihat di sini.
Tuh. Tulisannya nggak kelihatan karena pedang dia warnanya terlalu cerah ya. Oke deh itu dulu.
Kita benerin tadi. Ini nih kita copy text shadow. Dia ada di description-nya ini nih.
Kita kasih text shadow. 1 pixel, 1 pixel, 1 pixel, hitam aja. Nah gitu.
Supaya minimal. Atau ini 2? Ah nggak deh, 1 bener.
Minimal ada hitamnya ya. Sip, gambarnya udah 2. Jadi yang tadi si sentornya numpuk di belakang. Itu akan kita manipulasi belakangan.
Udah ya. Selesai, kita balik ke index. Sekarang kita baru kerjain yang thumbnail-nya. Kembali ke sini, ke struktur thumbnail-nya. Sekarang kita mau bikin item disini ya.
Satu dulu kita selesain. Mulai dari gambar. Kita ambil juga gambarnya. Pakai gambar yang sama. Ya ini kasih aja thumbnail satu gitu.
Terus di dalamnya juga ada detail sama ya. Cuman ini detailnya gini. Detailnya simple aja. Cuman ada nama gitu.
Dan satu lagi quotesnya. Jadi ceritanya dia ngomong apa tuh. Biasanya pakai block quote.
Nah ini saya ngambilnya dari sini. Dari response. Kalau di Dota tuh kita bisa lihat kalau dia ngapain ngomong apa gitu ya.
Misalnya pas nge-kill orang. Nah ini nih. Ada banyak ya.
Saya ambil aja nih quotesnya yang ini. Kasih kutip. Kutip lagi. Dah.
Jadi masih belum kelihatan karena umpet di belakang ya. Dah yang penting udah ditulis dulu. Oh bukan yang pertama tuh si Centaur ya. Salah teman-teman.
Centaur War Runner ya. Berarti quotesnya juga salah. Quotesnya harusnya ngambil dari si Centaur.
kita kasih response, cari ini aja, kita taruh disini, nah baru item yang kedua ini kita copy kita copy, simpen dibawahnya, baru ini kasih 2, thumbnail 2, ini baru, Dragon Knight nah kita copy yang tadi, kita masuk Dragon Knight, kita ke responses, kita copy oke itu kita punya 2, sekarang kita bikin CSS nya, balik ke CSS kita kasih nama aja sini ya, thumbnail selectornya pertama kita bikin positionnya absolute dulu, supaya nongol ya, walaupun masih ngaco ini jadinya numpuk dua begini, kasih bottomnya 50px supaya ada di bawah leftnya 50%, widthnya max content, jadi penuh gitu kita bikin dia di paling depan, z-index, displaynya flex, gapnya 20px Jadi antara, ini ada di sebelah kanan ya, antara satu gambar dengan gambar yang lain, nanti ada gap-nya. Ini baru wadahnya teman-teman, wadah si thumbnail, sekarang kita masuk ke item-nya. Jadi kalau masih ngaco gini, nggak apa-apa ya.
Kita masuk ke item-nya, thumbnail, item. Nah kita kasih ukuran yang fix aja ya. Width-nya 150px, height-nya tinggi, 220px. Oke, sekarang kita kasih flex, shrink, 0. Supaya dia kalau halaman yang ngecilin, nggak ikut ngecil gambarnya.
Terus kita kasih position relative. Sekarang kita masuk ke gambarnya. Kan dalam item ada dua.
Ada gambar, ada detail. Sekarang kita ke. Ini copyin aja. Ke gambarnya dulu.
Kita bikin gambarnya full ya. Widthnya 100%. Heightnya 100%. Jadi full. Cuman kan ketarik tuh.
Gimana solusinya kalau ketarik? Kita kasih object. Fit. Cover.
Nah. Jadi masuk tuh gambarnya. Terus kita kasih border radius. Border radius 20px. Kalau terlalu besar boleh dikecilin.
Sekarang 15 aja ya. 15. Udah. Sekarang kita masuk ke detailnya.
Copy lagi. Coba lihat lagi disini dulu ya. Nah disini nanti ngejajar.
Kalau kalian punya 5, punya 10. Ngejajar ke kanan terus bablas. Nggak usah khawatir. Jadi akan tembus ke sana. Item detail ya.
Titik detail. Positionnya absolute. Tadi kenapa kita kasih relatif?
Karena kita mau kasih absolute disini. Bottomnya 15 pixel. Supaya ada di paling bawah dari gambarnya. Terus leftnya 10 pixel.
Oke. Dan kita kecilin tulisannya. Kita ke name ya. Ini kita copy.
Titik name. Untuk font nama hero-nya kita bikin tebel ya. Font weight-nya 900. Tapi kecil. Font size-nya 1 rem.
Terus kita bikin dia rata kanan ya. Text align. Right. Dan margin bottom-nya kecil aja ya.
Mau pake rem atau pixel ya. Pixel aja gak apa-apa ya. 5 pixel.
Kasih lagi text shadow. 1 pixel, 1 pixel, 1 pixel. Hitam ya.
Gitu aja. Nah terakhir quotes-nya. Ini kita copy. Kita kasih block. quote karena dia tag gak perlu pake titik ini lebih kecil font size nya 0,7 rem font weight nya tipis 100 kita bikin dia rata kanan text align right juga sama juga kita kasih ini ya text shadow 1px 1px oh ini mepet kanan jadi ini kita harus kasih right 10px juga ya kita lihat nah itu ya centaur dragonite sip ya oke gimana tampilannya udah cukup oke lah ya Masih setengah perjalanan teman-teman.
Kita belum masuk ke slidernya bahkan. Gak apa-apa ya. Sambil nginget-inget CSS-nya lagi. Nah berikutnya kita butuh control buat ngendaliin slidernya.
Nanti kita mau bikin tombol lah disini ya. Tombol preview sama tombol next panah kiri panah kanan. Kalau panah kiri nanti geser ke kanan gambarnya.
Kalau panah kanan gambarnya geser ke kiri. Oke ya. Mulai dari HTML-nya dulu. Kita bikin di bawah thumbnail. Jangan salah disini.
Jadi saya biasanya tutup dulu disini thumbnail-nya. Biar gak salah div Simpen di bawah Ini buat kita nyimpen si arrows ya Ini Ada dua Bikin pake button aja ya Button Ini untuk previous Saya kasih panah kiri Jadi pake Done Less Than Gini ya Ini kita kasih ID aja deh ID nya Reviews Kita duplikat ALT Shift bawah Ini kita ganti jadi next Ini GT Greater than Lebih besar dari Dan lebih kecil dari Nah kita kasih Style Di bawah sini Ini Kita kasih buat arrows. Arrows. Positionnya absolute. Langsung kita atur aja ya.
Dari atas. Ini kan sekarang ada di atas nih. Disini ya.
Kita turunin 80%. Jadi top 80%. Dia nempel kesini.
Rightnya. Kita kasih 52%. Jadi dia akan selalu ada 52% dari halaman.
Terus kita kasih lebar 300px. Max widthnya 30%. kasih display nya flex, supaya nanti gampang ngatur nya dan align item center nah ngatur nya gimana?
oh kasih gap dulu, gap 10px untuk pake RAM boleh juga ya, mau berapa 0,8 RAM gitu udah itu buat wadah nya, sekarang kita masuk ke tombol nya kita ke arrows, button ya, karena kita bikin nya button tadi mulai dari ngatur dulu lebar dan tinggi nya, width nya 40, height nya 40, sama border Radiusnya bulet Jadi kalau bulet tuh 50% Gitu ya Ada bordernya itu Kita kasih border none Supaya hilang Mau dikasih box shadow nggak? Kalau dikasih box shadow bisa ya Box shadow Mau berapa? 2px, 2px, 2px Mau ketebelan ya 1px aja deh Seperti biasa ya 1px, 1px, 1px Hitam Gitu Udah backgroundnya putih aja Biarin Tapi kita ganti ya font familynya ya OnFamily nya jadi Monospace. Biar tipis.
Paling kita kasih warna panahnya. Itu orange lagi begini. Kita kasih kursornya pointer. Supaya kalau kita ngarahin ke sini. Dia jadi tangan ya.
Dan terakhir kita harus kasih Z-Index. Dia agak tinggi. Karena nanti pada saat kita mau jalanin animasi. Biar nggak ketimpa ya.
Kita kasih sekarang biar nggak bingung. Nah ini kalau teman-teman lihat. Nimpa ya.
Belakangnya nih nimpa. Nanti kita benerin ya. Kita benerin saat. di responsive ya belakangan.
Sekarang kita bikin kalau di hover warnanya berubah dulu. Kita kasih transition dulu biar sedikit ada animasinya. Kita kasih 0,3 detik.
Terus kita bikin apa nih? Kita copy dulu ya. Arrows button.
Kalau kita hover kita balikin warnanya. Background color-nya jadi merah. Color-nya putih ya. Nah gini.
Sip. Oke lah ya. Ini juga oke. Nanti lah kita benerin responsifnya belakangan, sekarang kita mau kasih animasi di awal dulu, biar keren aja nih, jadi ceritanya pas nanti kita masuk ke halaman, saya pengen semua informasi detail ini, itu datengnya ada animasinya, jadi dia animasi fade in, tapi naik ke atas gitu satu-satu, ngeblur dulu terus naik ke atas, biar keren lah ya kita bikin disini Kita kasih ini initial animation gitu ya. Atau starting animation.
Nah kita akan bikin si ini kan yang muncul adalah gambar kedua kan. Si Dragon Knight itu gambar kedua karena di dalam listnya. Ini kan list kita nih.
Item pertamanya itu centaur. Item keduanya Dragon Knight. Nah item yang ditulis belakangan itu kan pasti ada di atas kan. Padahal kita pengennya yang muncul pertama tuh si centaur kan. Karena dia paling depan kan ini ya.
Kita bikin dia maju dulu. Jadi caranya kita ambil si slider. List. Item.
Ini buat ngambil semua item. Kita ambil yang pertama. Caranya kita kasih sudo class.
And child. Ambil yang pertama. Terus kita kasih z indexnya lebih besar.
Nah kan. Jadi kan tadi saya bilang tumpukan nih. Kalau tumpukannya kita atur.
Dia jadi paling depan. Ya, saya pengen dia dulu di depan. Baru sekarang kita panggil satu-satu elemen di dalam item ini. Kita ambil mulai dari title-nya.
Urutin aja ini. Ada ini ya. Title, name, figure. Title, name, figure, description, more.
Nah, itu dia. Title. Semua kita kasih koma ya. Duplikat.
Terus name. Duplikat, figure. Duplikat itu alt shift bawah ya.
Alt shift bawah. Ini description. Satu lagi, more.
Tapi more jangan pakai koma. Awas, karena dia terakhir. Ini semuanya, koma, koma, koma, koma, koma.
Semuanya mau kita kasih transform. Translate sumbu Y. Sumbu Y itu sumbu vertikal.
Mulai dari 50 piksel. Jadi dia turun dulu ke bawah. Nanti transisinya naik ke atas. Terus kita mau kasih dia blur.
Yang agak besar ya, 50 piksel. Tuh, jadi ngeblur dulu. Jadi ngeblur sampai solid ke atas.
Kita kasih opacity juga. Jadi awalnya nggak ada, hilang. Oke? Nah, baru kita kasih animasinya.
Animation. Nah, kita bikin nanti animasinya. Animasinya kita kasih nama, apa misalnya, show detail.
Karena kita pengen munculin si detail tadi. Dalam waktu 0,5 detik, nunggu dulu 1 detik. Jadi kita kasih delay 1 detik secara linear.
Coba kita lihat ya. Kita bikin animasinya. Sekarang kan belum ada animasinya. Kita kasih keyframes.
Nanti kita bakalan banyak banget bikin animation dan keyframes. Kita kasih nama yang sama nih. Show detail. Awalnya ini.
Ini kan awalnya semua ya. Ke. Nah kita kasih ke gitu.
To. Apa to-nya? Nah ini semua kita copy. Tiga ini. Kita translasikan ke posisi awal.
Jadi kita balikin ke 0. Blurnya kita bikin ilang. Jadi nggak ngeblur. Opacity-nya kita bikin solid.
Gini. Tuh jadi kayak gitu ya. Tapi karena kita nulisin linear, dia hilang lagi. Kalau pengen 1 kali, teman-teman tambahin 1 di sini. Kalau pengen diem, kita kasih 4 words.
Jadi ini cuma sekali aja. Nah, gitu tuh. Keren ya? Ini kalau di-refresh, datang.
Kita lihat, itu kalau pertama kayak gitu. Nah, supaya lebih keren lagi, gimana kalau kita bikin mereka datangnya satu-satu. Jadi kita kasih delay dikit-dikit.
Oke? Jadi satu-satu ini, yang ini kita tulisin. Semua. Jadi ini harus di copy nih. Copy.
Terpaksa ya kita bikin satu-satu. Tapi biar bagus gak apa-apa. Semua komanya nanti kita ganti dengan kurung kurawal buka. Ini kita kasih animation delay.
Waktunya mulai dari sedetik dulu. Jadi kita nunggu baru keluar. Karena kan kita kasih delay nih biar bareng.
Dia keluar pertama. Disini kita copy. Ganti koma yang ini. Ini kita kasih tambahin 0,2 detik.
Jadi datangnya berurutan ya. Kita copy lagi. Kita ganti. Ini 1,4.
Tambahin 0,2 lagi. Yang ini 1,6. Dan terakhir yang ini 1,8. Kita lihat.
Nah kan. Datangnya satu-satu. Lihat yang sini. Refresh.
Hei. Keren ya. Sip. Jadi itu dia. Untuk animasi awal kita ya.
Sekarang kita masuk ke bagian berikutnya. Ini yang paling penting. Yaitu animasi.
Ketika kita ngeklik tombol. Next dan Previous. Jadi ingat teman-teman, ada dua hal yang akan kita lakukan.
Yang pertama adalah mengubah tumpukannya. Ketika kita pencet Next, saya pengennya tumpukannya berubah. Yang tadinya centaur berubah jadi dragon knight. Tapi mengubahnya mau saya bikin agak keren. Jadi pada saat Next, saya pengen seolah-olah gambar yang besar ini berubah menjadi thumbnail.
Jadi nanti kita animasikan supaya dia kayak menyusut gitu. Nah ini akan kita lakukan dengan cara memanipulasi kelas. yang ada di HTML nya nih jadi nanti kalau misalnya kalian ngeklik tombol next ini kan nextnya nanti kita akan tambahkan kelas next disini Tapi kita nambahin kelasnya nanti pakai javascript. Nah sebelum kita masuk ke javascript.
Kita mau simulasikan manual dulu di ketik manual. Kalau kita klik previous. Nanti kelasnya akan kita tambahin disini. Pref gitu.
Jadi nanti kita akan main-main dengan kelas. Kita bikin kelasnya. Kita tempelin dulu sekarang manual. Kalau udah beres baru kita lakukan itu pakai javascript.
Ya. Kita coba dulu untuk next ya. Ceritanya tombol next di klik gitu ya.
Apa yang akan terjadi. Kita akan bikin disini aksinya ya. Jadi misalnya kita kasih action next gitu ya. Jadi kayak gini, kalau slider ada nextnya, jangan pakai spasi teman-teman. Jadi ini artinya kalau elemen yang ada slidernya ada juga kelas nextnya, kayak gini, ada slider, ada next, tempel ya.
Maka kita akan ambil list di dalamnya, terus kita akan cari item ke satu. Kita cari item ke satu. Yang pertama akan kita ubah gambar besarnya dulu.
Gambar besarnya mau kita kecilin. Seolah-olah dia berubah menjadi thumbnail. Jadi si gambar yang ada di dalam item yang ini.
Seolah-olah kita akan ubah dulu jadi thumbnail. Jadi cara ngambilnya gimana? Kita kasih lebih besar dari IMG. Kita kecilin dulu sesuaikan dengan ukuran dari si thumbnailnya. Jadi widthnya 150px.
Heightnya berapa tadi? 220px ya. Positionnya absolute. Kita samain posisinya. Left-nya 50%.
Bottom-nya 50px. Lihat, dia pindah kan? Pas ke atasnya kan? Coba ya kita ulang lagi. Kalau ini kita matikan.
Pertama kan dia jadi kecil nih gambarnya kan? Tadinya kan full. Kalau ini kita hapus, dia full.
Jadi kecil. Kita bikin left-nya 50%. Pindah ke sini.
Kita bikin turun. Jadi awalnya dari sini. Terus kita kasih border radius.
Berapa tadi? 15px ya. Dah.
Tinggal kita kasih animasi. Nah. Animasinya ngegedein gambarnya. Misalnya kita kasih apa?
Grow image. 0,5 second. Ini gak usah pake delay. Kita kasih linear. 1x forward.
Oke. Baru kita bikin animationnya. Key frames.
Grow image. Nah. Kita kemana nih? Tuhnya.
Kita balikin ke keadaan awal. Width-nya 100%. Height-nya 100%.
Kita balikin lagi. Mulai dari left-nya 0. Terus bottom-nya 0. Jadi seolah-olah dia ngegedein tuh. Kita balikin lagi border radius-nya 0. Supaya dia jadi besar.
Coba kita lihat di sini. Kalau kita refresh. Jadi seolah-olah pada saat kita klik next.
Ceritanya dia lagi. Mau milih si centaur gitu ya. Refresh. Set. Nah, ngegedein.
Ini nggak usah khawatir dulu kenapa yang kepilihnya si centaur itu nanti akan jalan ketika kita pakai javascript. Ini animasinya dulu, teman-teman. Jadi dari sini ceritanya ngegedein.
Nah, berikutnya kita akan kasih animasi untuk thumbnail-nya dulu, teman-teman. Oke. Jadi kita ambil ketika slider ada next-nya. Si thumbnail.
Sekarang kita baru kesini ya. Ini kan udah. Sekarang ke thumbnail. Kita ambil item yang terakhir.
Yang ini. Nanti kalau kalian ada 5, ada 6 ya. Tetap yang diambil item terakhir.
Saya nulisnya gini. Item. Pseudoclass.
Endless child. Kita ngitung dari paling belakang. Kalau endless child 1 itu paling depan.
Kalau endless child 1. Ngitungnya dari paling belakang. Ini yang terakhir. Mulai dari kita ilangin dulu lebarnya.
Jadi nggak ada dimensinya. Ilang. Overflow nya hidden, opacity nya 0. Jadi hilang benar-benar.
Baru kita kasih animasi. Animation. Ini untuk memunculkan thumbnail. Misalnya kita kasih apa nih?
Show thumbnail. Ya sama aturan animasinya 0,5 linear 1 forwards. Kita bikin keyframes ya.
Keyframes, show thumbnail 2 ke posisi thumbnail awal. Width nya 150. opacity-nya 1. Jadi nanti thumbnail-nya muncul dari kanan. Kan tadinya gambarnya besar nih. Tadinya gambarnya besar.
Sekarang kita munculin ke belakang thumbnail-nya. Ini sekarang nggak kelihatan nih. Karena harus kita kasih animasi gesernya. Caranya gini. Kita kasih slider, next.
Kalau ada next-nya, si thumbnail-nya kita geser. Kita transform. Translate X.
150 piksel. Supaya geser ke kiri ya. Terus kita kasih animation.
Misalnya apa? Transform thumbnail. Ini kalau mengganggu kita close dulu ya.
Karena setiap saya ngetik dia auto refresh. 0,5 second. 1. Lalu linear.
Lalu 1. Forward. Nah sekarang kita bikin keyframesnya. Transform thumbnail to.
Kita balikin ke posisi awal. Transform. Translate.
X. 0. Nah sekarang kita coba. Kita kembali ke browser lewat sini aja. Kita refresh. Sudah berhasil ngegeser.
Ini kenapa yang sebelah kanannya hilang. Karena kita belum bikin yang previousnya. Tapi kalau mau coba langsung, teman-teman bisa cobanya di sini ya.
Kita mulai dari hilangkan. Bisa klik kanan, inspect. Terus kita hilangkan di sini, next-nya. Awalnya normal seperti ini.
Kalau kita kasih next, dia geser ke kiri. Yang tadinya thumbnail seolah-olah jadi besar. Nah, di belakang layar yang besar itu nanti jadi thumbnail ke sini.
Kita lanjutkan dulu sekarang untuk yang preview-nya. Supaya lengkap ya. Oke, di bawahnya. Kita kasih action untuk yang previous Kita bikin kalau slidernya sekarang dikasih pref Dan kalau ini next ya Sekarang kalau dikasih pref gimana? Kita akan ambil list Kita akan ambil item yang kedua sekarang Child yang kedua Terus kita ambil gambarnya Sama seperti tadi Kita kasih position absolute Ini logikanya mirip ya Bottomnya 0 Leftnya 0 Terus kita kasih animation Nah kalau ini kebalikannya Ini kebalikannya Dari besar ke kecil.
Waktu tadi kan grow image, sekarang shrink image. Ini kita kasih nama animasinya bebas ya. Supaya masuk akal aja.
Linear 1, forwards. Terus kita kasih, apa disini? Add keyframes, shrink image to ke ukuran thumbnail. Widthnya 150, heightnya 220. Border radiusnya 15 ya tadi ya. 15, leftnya 50%.
Apalagi bottom ya. Bottom 50px. Coba kita lihat. Kita kasih pref. Awalnya begini.
Sekarang kita kasih slidernya pref. Oh, kenapa nggak jalan? Kita preview dulu.
Coba di sini ya. List item. Ini item kedua, betul. Oh, karena dia masih ada di belakang ya. Kita lupa bikin dia ke depan dulu, teman-teman.
Ini kita kasih slider. Pref. List item.
nth child 2. Nah ini kita bikin dia maju dulu ya. Z index 2. Nah gitu. Sekarang kalau kita lihat di yang besarnya nih.
Kita refresh. Nah gitu. Jadi dia ngecilin. Udah bener tapi ini numpuk ya. Nanti kita benerin.
Ngecilin. Kita tinggal geser ke kanan sekarang. Ke arah kebalikannya.
Udah bener. Kalau kita coba next. Ngegedein. Kalau kita coba previous, ngacilin. Ya, betul.
Sip. Tinggal kita benerin dulu. Ini close lagi ya.
Tumpukannya atau kita benerin dulu thumbnailnya ya. Sekarang kita benerin thumbnailnya dulu. Kita ke slider.
Prev. Kalau kena previous, kita ambil thumbnailnya. Kita ambil yang pertama sekarang.
Item. Pokoknya kebalikan yang next ya. End child. Yang pertama. Kita kasih width-nya 0. Overflow nya hidden.
Supaya geser ke kanan sekarang. Opacity nya 0. Kita kasih animation. Ini kita pake yang lama aja ya. Show thumbnail.
Ya. 0,5 second. Linear 1. Forward.
Kita lihat. Nah sekarang gesernya ke kanan. Kalau next.
Nah itu kayaknya harus kita debug tuh. Kenapa tuh? Kalau preview sebenarnya tuh.
Nanti kita cari. Kita benerin dulu yang numpuknya ya. Yang numpuknya itu harus kita hilangin.
Sebenarnya ngilanginnya gampang. Tapi saya pengen ada animasinya. Jadi kita mau contek yang ini nih.
Nah ini nih. Teman-teman boleh copy semua ini. Sekarang kita mau kasih animasi untuk yang child kedua. Jadi ini copy ke bawah.
Sini. kita ganti ini child yang kedua ya atau gini dulu deh teman-teman taruh kursornya disini tahan tombol alt terus klik di setiap baris karena kita mau nambahin disini titik press dan geser kanan ganti satunya jadi dua gampangnya pencet Escape supaya kursornya kembali jadi satu kita mau kasih animation ini enggak usah semuanya kita mau kasih animation yang namanya high detail kebalikannya ini high detail setengah detik satu pakai delay nggak pake lah ya biar sama ya kita kasih keyframes namanya hide details ini kita ke 2 Transform. Sekarang kita pengen transformnya ke atas. Berarti kita kasih minus ya. Translate Y. Minus 150 pixel.
Terus jadi ngeblur. Ini kita kasih filter ya. Filter.
Blur 20 pixel. Dan opacity nya 0. Supaya melakukan kebalikannya. Nah gitu.
Jadi saat kita kasih. Awalnya kan begini. Kalau kita kasih pref.
Coba kita refresh. Nah gitu harusnya ya. Jadi saat kita refresh. Harusnya ngilang.
Ini geser. Tulisannya ngilang. Udah bener. Yang harus kita perbaiki adalah yang next nih. Yang nextnya ini kenapa ikut hilang.
Harusnya ini gak hilang nih. Coba kita debug dulu. Oke teman-teman ternyata kesalahannya adalah ini kurang S ya.
Nah itu dia. Jadi harusnya dia bergeser begitu ya. Ini kalau previous ke kiri. Mungkin tadi teman-teman juga udah ada yang lihat ya.
Oh sorry. Kalau next ke kiri. Kalau previous ke kanan.
Gitu. Next. Kiri.
Prev. Kanan. Dah. Sip.
Jadi ya. Animasinya udah beres. Kurang huruf S aja.
Dan sekarang sebelum kita lanjut ya. Saya pengen bikin gini. Ini kan kita akan jalaninnya ketika tombol next dan previous di klik.
Nah. Untuk bisa animasinya berjalan secara penuh itu kita butuh sekitar 2 detik. Jadi kayak gini ya.
Ini bergeser, tulisan muncul. Nah, saya nggak mau pada saat 2 detik itu kita bisa nge-click lagi. Jadi kita bisa nge-spam. Spam click gitu, itu nanti bisa membuat si animasinya jadi numpuk juga.
Nah itu nggak bagus. Nah gimana kalau kita bikin gini? Pada saat kita klik, kita bikin kita nunggu dulu 2 detik supaya tombol ini bisa di-click lagi.
Jadi kita matiin gitu fungsi tombolnya. Nah sekarang kita matiin dulu pakai CSS. Jadi kalau udah di-click nggak bisa di-click lagi.
Nanti kita balikin lagi fungsinya pakai JavaScript. Jadi caranya... Pakai CSS kita bisa kasih di bawah aja ya. Aksi untuk tombol slidernya.
Jadi kalau slidernya ada nextnya gitu ya. Maka arrows di dalamnya dan button di dalamnya itu nggak bisa di klik. Ini untuk yang next kita bikin juga untuk yang pref.
Hapus komanya. Kita kasih pointer events none. Jadi nggak bisa di klik.
Sampai kelas nextnya ini hilang. Tuh sekarang jadi nggak bisa di klik nih. Karena disini ada nextnya.
Kalau nextnya hilang, bisa di klik kayak gini harusnya. Bentar, kita close dulu. Nah, bisa tuh.
Tapi kalau ada next atau previous, sekarang kita coba previous. Oke, ini kita matiin dulu. Tuh, nggak bisa ya.
Nggak bisa. Kalau previousnya hilang, baru bisa. Nah, nanti 2 detiknya kita kasih di javascript.
Gitu, sip. Sama ini deh, biar keren saya mau kasih loader di atasnya. Jadi sambil nunggu, supaya user juga tahu, oh ini kenapa nggak bisa di klik.
Oh ada animasi yang harus kita tunggu. kita bikin loading bar di atas mulai dari html nya kita kasih di setelah arrows ya masih di dalam slider disini, kita bikin aja loader gitu, atau loading bar ya loading bar gitu di css nya kita kasih loading bar, awalnya tuh lebarnya 0 ya gini, terus height nya kita kasih 5px, background color nya kita kasih warna orange ya tapi ini terlalu orange, kita kasih orange nya ini aja deh, F8 kosong, nah orange nya gini position nya absolute kita bikin dia di depan ya, z index nya 999 top 0, left 0 oke, supaya mulai dari kiri ya nah sekarang kalau ada animasinya atau kalau tombol di klik ya, mau itu previous atau next, jadi kalau slidernya ada tombol next lalu loadernya ngapain Atau loading bar ya. Loading bar-nya ngapain?
Duplikat. Ini juga untuk yang previous. Kalau ada previous, komanya hapus. Kita mulai dari width-nya 100%.
Nanti kita mundurin. Jadi kalau nggak lagi di-click apa-apa, yaudah 0 aja. Kalau nggak lagi di-click apa-apa. Tapi ketika kita klik next atau previous, tiba-tiba jadi penuh. Nah, tapi kita kasih animasi nanti.
Selama 2 detik, dia habis gitu. Ya, kita kasih animation. misalnya apa loading time gitu ya 2 detik linear 1 kali aja forwards udah kita kasih keyframes loading time to width nya 0 nah kita coba ya balik sini kita refresh tuh 2 detik baru beres nanti ini jadinya bisa di klik lagi karena setelah 2 detik kita hilangkan kelas next atau kelas previous nya tapi sekarang udah ada tuh animasinya ya Ini kalau next, kalau previous harusnya ada juga.
Rev. Nah kalau pref gak ada nih. Kenapa? Oh gak ada harus kita tulis disini ternyata teman-teman.
Nyobanya gak bisa gitu tapi harus kita kasih pref. Save. Nah baru ada.
Udah berarti next bisa, pref bisa. Udah apakah kita sekarang siap untuk masuk ke javascript? Sebentar. Kita coba dulu kalau dibuka di mobile ya.
Jangan-jangan rusak lagi. Nah rusak ternyata teman-teman. Kegedehan tulisan centaurnya ya.
Kita benerin ya. Kita bikin dulu versi mobile ya. Ternyata responsifnya kurang oke ya.
Kita kasih disini mobile breakpoint. Kita bikin media query ya. Media. Kalau medianya screen. Dan max widthnya itu 678. Yang harus kita benerin.
Ini pertama padding ya. Tuh kayaknya paddingnya cukup deh. Hurufnya aja kita kecilin ya. Ini tuh slider.
Slider. Oh lupa saya bentar. slider list item detail name Oke slider list item detail name panjang juga ya font size 3 rem mobile itu gimana sih kita lihatnya di sini deh spek responsif ke iPhone kurangnya 2,8 2,8 rem nah cukup sama kita kecilin line height nya samain juga jadi line Hai hey 2,8 rem kok kegedean 2,8 rem ya Cukup lah ya Terus kalau mau kita kecilin description nya juga deh jadi ini slider list item detail desa gini kita kasih font size 0,8 kan tadinya satu rem ya Nah gini deh nggak papa ya sip tinggal kalau disini kita kasih next udah oke kalau kita kasih here Oke, mantap. Aman, teman-teman. Itu dia untuk HTML dan CSS-nya.
Kayaknya udah selesai. Sekarang, bagian terakhir nih. Bagian yang paling seru ya. Saatnya kita masuk ke JavaScript. Oke, silakan dibuka, teman-teman, JavaScript-nya.
Tutup lagi sidebarnya. Kita akan melakukan semuanya tadi secara dinamis. Nggak lagi nulis-nulis di sini.
Ini kita hapus. Ya, dah. Pemberian kelasnya akan dilakukan menggunakan JavaScript saat kita klik tombol next atau previous. Oke, pertama.
kita ambil dulu semua elemen yang kita butuhin di dalam DOM nya, mulai dari kita bikin variable untuk ngambil slidernya dulu, caranya kita ambil pake document.querySelector.slider javascript cariin elemen yang nama selektornya, kelas slider oke, berikutnya ada kita butuh list dari apa nih, ini ya list item ini ya kita kasih nama list aja ya list gini, document querySelector List. Kenapa kita ambil listnya? Karena kita mau ambil semua item di dalamnya.
Begitu pula dengan thumbnail. Ya. Kita kasih dokumen. Query selector. Thumbnail.
Karena kita mau ambil semua item di dalam thumbnail. Dah. Baru kita ambil tombolnya. Cons.
Next. Dokumen. Query selector.
Ini apa? ID ya. Ingat. Next.
Ini ada di sini. Tombol next. Tuh. Dia pakai ID.
Dan previous. Tinggal kita duplikat aja. Alt shift bawah. Klik.
Ctrl D. Ctrl D. Pref. Escape. Sudah. Semua elemen sudah kita tangkap.
Sekarang. Kita akan bikin sebuah event. Ketika tombol next di klik. Satu-satu dulu.
Next dulu aja ya. Ambil elemen next. Lalu ketika kita kasih add event listener.
Eventnya apa? Ketika tombolnya di klik. Kita akan jalankan sebuah function.
Kalian bisa pakai function declaration. Atau bisa pakai arrow function. Begini. Karena kita nggak butuh this.
Kita pakai arrow function aja. Yang nanti di dalam sini kita akan jalani sebuah function. Untuk menginisialisasi si slidernya.
Misalnya kita kasih nama fungsinya itu init slider. Ya kan kita kasih tau kalau kita lagi ngeklik tombol next. Kita kasih parameternya next gini.
Oke. Ini teman-teman ini. Titik koma opsional ya kalau di javascript. Tapi karena kalau WPU jangan lupa titik koma. Harus dipakai ya.
Sudah. Tinggal kita bikin sekarang function init slidernya. Kita pakai function expression aja ya.
Bikin const init slider. Yang butuh parameternya tipe. Ya tipe itu tombol apa yang lagi di klik. Kita kasih type.
Ini namanya bebas aja ya. Arrow function. Titik koma jangan lupa. Nah sekarang kita akan tangkap semua item di dalam slider. dan semua item di dalam thumbnail jadi kita bikin cons slider items ini kita akan scope kita akan ambil dari list ya jadi kita udah punya list Sekarang kita query selector lagi.
Query selector tapi all. Karena saya mau ngambilnya semua. Supaya jadi node list. Bukan single element.
Item. Nah jadi ini bacanya gini. Cari item. Semua item.
Yang ada di dalam list. List itu apa? List itu ini.
Element list. Nah begitu pula dengan thumbnail. Jadi saya mau tulis gini. Thumbnail items. Hati-hati huruf i-nya besar.
Ini juga ngambil dari thumbnail. Query selector all. Titik thumbnail. Oh item sorry.
Oke. Cari semua item yang ada di dalam thumbnail. Berarti ini. Satu.
Dua. Oke. Berikutnya apa? Berikutnya kita cek. Sekarang yang lagi di klik tombol apa.
Jadi jika tipe yang dikirim dari parameternya itu adalah next. Berarti yang lagi di klik tombol next. Apa yang akan kita lakukan?
Nah, kita akan menambahkan atau memindahkan elemen yang tadinya di depan. Kan kalau next itu dia gesernya ke kiri kan. Coba ya kalau kita kasih next.
Di sini kita kasih slider. Kita pindahin dulu gini. Next.
Nah, tadi kan geser ke kiri tuh. Yang kanan geser ke kiri. Saya mau pindahin si sentor ini ke belakang. Jadi dipindah.
Ya. Cara pindahinnya, kita tulis gini. List, pertama gambarnya dulu, sorry, gambarnya dulu ya. Ini thumbnail beda. Jadi gambarnya yang tadinya di depan, kita mau pindahin ke paling belakang tumpukannya.
Sama juga nanti thumbnail kita lakukan juga ya. Tapi kita bikin si gambarnya dulu. Berarti list kan, ini, list itu semua tumpukan gambar, mau kita append.
Nah, kita mau pindahin elemen yang mana? Elemen yang pertama. Ini yang ditangkap. Ini kan semua tumpukan nih.
Kita ambil yang pertama. Nah kan indexnya ke 0. Elemen pertama itu index ke 0. Oke jadi sekarang gambar udah pindah tuh ke paling belakang. Oke sekarang thumbnail. Sama juga.
Kan tadi geser ke kiri. Berarti kita pindahin elemen yang paling depan ke belakang. Karena cuma ada 2 ya ditukar aja.
Thumbnail append child sama. Sekarang thumbnail item. Yang paling pertama pindahin ke belakang. Ditukar. Sudah, ini nukernya.
Sekarang jangan lupa kita kasih slidernya. Nah, ini dia. Add. Oh, kelas list dulu. Add.
Nah, tambahin kelas baru yang namanya next. Inilah cara kita ngasih kelas secara dinamisnya. Oke. Coba kita kasih.
Sekarang kita klik next. Nah, geser ya. Mantap ya. Tapi sekarang ini nggak bisa diklik, teman-teman.
Selamanya nggak bisa diklik. Padahal kan kita cuma pengen nunggu 2 detik ya. Nah sekarang kita bikin fungsi buat nunggu 2 detik supaya kelas next ini hilang.
Tapi kita coba lagi sekali lagi ya. Kalau kita refresh, awalnya nggak ada next-nya. Sentor-nya di depan.
Kalau kita klik next, sentor pindah ke belakang. Ini ditukar, ada next-nya. Nah cuman saya pengen nunggu 2 detik baru next-nya hilang lagi. Caranya gimana? Kita bikin timeout aja di sini.
Kita bikin set timeout. Kita kasih arrow function. Gini.
Slider, class list Remove sekarang Kita remove si nextnya Nah tapi inget kita kasih disini Parameternya 2000 2000 millisecond, 2 detik Kita coba, sekarang Balik sini kita refresh, gak ada class next Sekarang kita klik tombol Gambarnya pindah, ada nextnya Tunggu 2 detik, hilang lagi Sekarang bisa di klik lagi Sip Mantap ya. Itu buat next teman-teman ya. Berikutnya apa?
Berikutnya buat previous. Yaudah mulai lagi dari awal ya. Kita copy eventnya.
Sekarang bukan next tapi apa? Prod, Ctrl D, Prev. Tombol previous kita kasih event klik. Jalanin init slider dengan parameternya prev. Prev masuk sini.
Belum ada pengecekannya. Kita tinggal kasih else aja. Karena kan cuma ada dua kemungkinan. Kalau nggak di klik next, previous. Oke?
Nah sekarang ini agak beda nih. Kalau tadi kan kita nge-append ya ke belakang. Jadi kita pindahin si sentore ke akhir. Bayangin ada 5. Berarti kan tadinya di urutan pertama dipindahin ke urutan kelima. Dengan menggunakan append kita nggak perlu ngitung ada berapa elemen.
Dia pasti akan nyimpen ke akhir. Sebelum si parentnya nutup. Jadi aman.
Nah yang susah kalau previous. Kalau previous itu kan kita harus tahu. Elemennya ada berapa. Itu caranya kita pakai prepend.
Prepend itu mindahin ke depan. Nah yang susah adalah kita cari tahu elemen terakhir. Mindahin ke depan.
Kalau dari sini geser kanan sih gampang ya. Tapi dari akhir ke depan tuh. Nah berarti kita harus tahu dulu.
Posisi terakhir dari sebuah item. Jadi misalkan kita bikin variable namanya last item position. Posisi yang paling terakhir itu urutan berapa.
Caranya kita tinggal ngitung si slider items. Ini ya. Hitung aja salah satu ya, karena ini pasti sama ya.
Mau ngitung tumpukannya atau mau ngitung thumbnailnya, pasti jumlahnya sama. Kita hitung panjangnya berapa. Misalnya ada 5, berarti ini ada 5 nih.
Nah, tapi ingat, jumlah item itu beda dengan index. Index itu selalu minus 1. Karena dimulai dari 0. Sedangkan length dimulai dari 1. Ada berapa gambar? Ada 2. Gambar terakhir, indexnya berapa?
Indexnya 1, karena 0 dan 1. Nah, karena kita udah tau. Posisi terakhir. Kita tinggal prepend.
Mulai dari si listnya dulu. Kita prepend. Apa yang di prepend? Elemen yang terakhir.
Jadi slider items. Index ke last item position. Ya.
Mudah-mudahan masuk akal nih. Berikutnya sama juga. Kayak gini.
Tapi kita prepend. Jadi thumbnail. Prepend. Thumbnail items. Index ke last item position.
Udah. Berikutnya apa? Jangan lupa. Tambahin kelas nextnya.
Slider. class list, add, oh pref sorry, tambahin class prefnya, dan jangan lupa juga setelah 2 detik, remove, ya, jadi gini, oh ini remove ya, remove, jadi next di remove, previous di remove, oke, ini kayaknya beres deh ya, coba kita lihat ya, kalau kita next, geser, oke, kalau kita previous, Geser kanan. Ya mantap ya. Nunggu dulu gak bisa di spam. Karena belum 2 detik.
Baru di klik. Lihat ini. Bisa previews.
Bisa next. Mantep banget teman-teman. Hampir jadi nih. Hampir jadi. Gimana kalau terakhir sebelum kita akhiri.
Kita bikin bisa autoplay kali ya. Jadi kalau dibiarin. Dia jalan gitu.
Caranya kita bikin set amount lagi. Tapi di luar fungsinya. di sini deh ya ini kita bikin buat auto play atau di atas lah di sini kita bikin buat auto play slider sekarang kita bikin sebuah variabel pakai led aja karena kita mau isi ulang di bawah ya run auto play misalnya gitu kita set time out arrow function gini nanti koma kita ambil tombol next terus kita klik kita kasih misalkan mau berapa detik kita kasih 7 detik aja ya 8 detik gitu boleh coba kita save, sekarang kita refresh kita tunggu, 1, 2 3, 4, 5 6, 7 8, ya kita tunggu lagi, 5, 6 7, 8 geser, nah cuman sekali, karena harus kita clear waktunya ya coba kita bikin 3 detik dulu deh biar cepet, kalau di awal Tunggu 3 detik, jalan.
Tapi ini waktunya harus kita reset. Nah, cara resetnya kita harus masukkan juga autoplay ini ke dalam fungsi initnya. Kayak gini, tapi ini nggak perlu pakai let lagi karena udah kita deklarasikan di atas. Ya, gunakan detik yang sama. Tapi sebelumnya kita harus menjalankan dulu clear timeout.
Jadi kita harus bersihkan dulu atau reset dulu timeoutnya untuk run autoplay. play, nah lihat ya sekarang kalau kita jalanin, refresh tunggu 3 detik 2, 3, aman ya 1, 2, 3 ini auto play, ini terlalu cepat, 3 detik teman-teman bisa ganti lagi ke 8000 atau ke 7000 ya, silahkan ini sekarang pasti udah aman, kalau kita biarin akan bergerak Secara otomatis. Nah tapi kalau kita mau geser.
Manual juga bisa. Tapi inget tunggu 2 detik sampai. Waktunya beres.
Itu dia teman-teman ya. Tinggal teman-teman tambahin ya. Ini kalau misalnya kamu ditambahin. Silahkan saya akan coba.
Tambahin dulu untuk 3 hero lagi. Supaya terlihat lebih keren ya. Nah ini ya. Jadi sekarang saya punya 5 hero. Yang bisa saya geser-geser.
Ini ada Amber Spirit. Ada Phantom Lancer. Dan ada shadow summon ya. Itu dia pembuatan slider hanya dengan menggunakan HTML, CSS, dan JavaScript saja. Oke teman-teman itu tadi.
Ngoading bareng kita membuat sebuah animasi slider sederhana menggunakan HTML, CSS, dan JavaScript. Gimana menurut kalian? Cukup oke lah ya.
Walaupun sepertinya masih banyak yang bisa di improve. Tapi setidaknya kita sudah bisa membuat sebuah... website yang bisa terlihat bagus di lebar layar desktop maupun handphone atau smartphone. Sekali lagi silahkan teman-teman boleh modifikasi menggunakan kasus teman-teman masing-masing.
Nggak perlu menggunakan kasus yang sama seperti saya menggunakan Dota 2. Silahkan menggunakan game favoritnya atau studi kasus yang lainnya. Nah jangan lupa juga pamerin hasilnya kalau teman-teman udah jadi. Silahkan seperti biasa boleh tunjukin ke saya dengan cara upload ke social media mau ke Instagram, mau ke TikTok, Twitter LinkedIn, ataupun Youtube Silahkan tag saya aja supaya nanti saya bisa lihat dan saya juga bisa pamerin ke teman-teman yang lain. Atau teman-teman bisa kumpulin proyeknya ke showcase proyek mingguan kita di Discord WPU. Jadi jangan lupa gabung Discordnya WPU, kirimin proyeknya supaya teman-teman yang lain bisa melihat dan terinspirasi juga.
Oke, jadi sekali lagi itu aja untuk episode modding bareng kita. Yang saya udah lupa episode keberapa bahkan ya. Terima kasih teman-teman sudah menonton.
Mudah-mudahan episode ini bermanfaat. Kita akan ketemu lagi di episode berikutnya. Saya Sandika Gali pamit dan seperti biasa teman-teman.
jangan lupa titik koma