Membuat Slider Responsive Dengan CSS

Membuat Slider Responsive Dengan CSS

Membuat Slider Responsive Dengan CSS – Selamat datang kembali di tutorial web design dari www.malasngoding.com. pada tutorial ini kita akan belajar tentang cara membuat slider responsive dengan css. slider atau carousel merupakan sebuah element yang penting pada sebuah website.

Dengan adanya Image Slider atau carousel, website akan menjadi lebih elegan dan lebih terlihat modern. apalagi dengan adanya efek animasi pada gambar slider. yang membuat desain slider menjadi menarik.

Nah lalu apa kegunaan dan kelebihan jika kita menggunakan slider. dan apa kekurangan dari kita menggunakan slider. yuk simak penjelasan kelebihan dan kekurangan menggunakan slider atau carousel pada website.

Kegunaan/Kelebihan dan Kekurangan Menggunakan Slider Pada Website

Adapun kegunaan dari slider adalah sebagai berikut :

• Membuat website menjadi lebih menarik
• Bisa digunakan untuk menginformasikan promo, produk dan informasi-informasi yang ingin ditonjolkan publikasinya. misalnya pada website sekolah, kita bisa membuat informasi pendaftaran siswa baru pada slider, atau menampilkan foto-foto kegiatan sekolah. begitu juga dengan website perusahaan.
• Dan ada banyak lagi kelebihan dari menggunakan slider, bisa teman-teman ringkas sendiri setelah penggunaannya.

Kekurangan Menggunakan slider menurut saya hanya 1. yaitu :

• Loading website menjadi agak lambat karena banyaknya gambar yang di load pada saat website kita di akses. apalagi jika gambar yang kita pasang pada slider adalah gambar yang berukuran HD.

Oh ya, sebelumnya kita juga telah belajar tentang cara membuat slider atau carousel pada bootsrap. silahkan teman-teman baca tutorial nya pada link berikut untuk belajar membuat slider dengan bootstrap.

• Tutorial Bootstrap Part 14 : Membuat Slider Dengan Bootstrap

Membuat Slider Responsive Dengan CSS

Langsung saja kita masuk ke tahap cara membuat slider dengan css. Tahap pertama yang harus kita siapkan adalah beberapa gambar yang ingin kita tampilkan pada slider.

Project membuat slider ini akan saya buat dalam folder “slider“.

dan gambar-gambar yang ingin di tampilkan pada slider saya letakkan dalam folder “gambar“. seperti pada gambar berikut.

Membuat Slider Dengan CSS

Kemudian buat 2 buah file, yaitu index.html dan style.css.

Membuat Slider Responsive Dengan CSS

Pada file index.html akan kita tampilkan gambar slidernya, dan pada file style.css nya akan kita buat animasi slider. perhatikan coding slider css berikut.

index.html

style.css

dan coba kita lihat hasilnya.

Membuat slider responsive dengan css

Oke, slider kita pun selesai, untuk syntax css yang kita buat di atas sudah pernah di jelaskan pada tutorial sebelumnya di malasngoding.com.

Membuat Slider Responsive Dengan CSS

Silahkan baca juga Tutorial CSS3 Dasar dan Lengkap yang terkait dengan tutorial ini. agar lebih memberikan pemahaman yang bagus.

Terima kasih sudah membaca tutorial Membuat Slider Responsive Dengan CSS. semoga dapat bermanfaat. dan jangan lupa juga untuk membaca tutorial web design lainnya di www.malasngoding.com. ada banyak tutorial web design yang sudah saya buat di www.malasngoding.com.

Sampai jumpa pada tutorial selanjutnya di www.malasngoding.com.

DEMO

DOWNLOAD