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.
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <title>Membuat Slider Responsive Dengan CSS - www.malasngoding.com</title> <link rel="stylesheet" type="text/css" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <center> <h2>Membuat Slider Responsive Dengan CSS <br/> www.malasngoding.com</h2> </center> <div class=malasngoding-slider> <div class=isi-slider> <img src="gambar/gambar1.jpeg" alt="Gambar 1"> <img src="gambar/gambar2.jpeg" alt="Gambar 2"> <img src="gambar/gambar3.jpeg" alt="Gambar 3"> </div> </div> </body> </html> |
style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 |
h2{ font-family: sans-serif; font-weight: normal; } .malasngoding-slider { border: 10px solid #efefef; position: relative; overflow: hidden; background: #efefef; } .malasngoding-slider { margin:20px auto; width: 768px; height: 450px; } .isi-slider img { width: 768px; height: 450px; float: left; } .isi-slider { position: absolute; width:3900px; /*pengaturan durasi lama tampil gambar bisa di atur di bawah ini*/ animation-name:slider; animation-duration:16s; animation-timing-function: ease-in-out; animation-iteration-count:infinite; -webkit-animation-name:slider; -webkit-animation-duration:16s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count:infinite; -moz-animation-name:slider; -moz-animation-duration:16s; -moz-animation-timing-function: ease-in-out; -moz-animation-iteration-count:infinite; -o-animation-name:slider; -o-animation-duration:16s; -o-animation-timing-function: ease-in-out; -o-animation-iteration-count:infinite; } /*saat gambar di hover oleh cursor mouse maka berhenti slide*/ .isi-slider:hover { -webkit-animation-play-state:paused; -moz-animation-play-state:paused; -o-animation-play-state:paused; animation-play-state:paused; } } .isi-slider img { float: right; } .malasngoding-slider:after { font-size: 150px; position: absolute; z-index: 12; color: rgba(255,255,255, 0); left: 300px; top: 80px; -webkit-transition: 1s all ease-in-out; -moz-transition: 1s all ease-in-out; transition: 1s all ease-in-out; } .malasngoding-slider:hover:after { color: rgba(255,255,255, 0.6); } @-moz-keyframes slider { 0% { left: 0; opacity: 0; } 2% { opacity: 1; } 20% { left: 0; opacity: 1; } 21% { opacity: 0; } 24% { opacity: 0; } 25% { left: -768px; opacity: 1; } 45% { left: -768px; opacity: 1; } 46% { opacity: 0; } 48% { opacity: 0; } 50% { left: -1536px; opacity: 1; } 70% { left: -1536px; opacity: 1; } 72% { opacity: 0; } 74% { opacity: 0; } 75% { left: -2304px; opacity: 1; } 95% { left: -2304px; opacity: 1; } 97% { left: -2304px; opacity: 0; } 100% { left: 0; opacity: 0; } } @-webkit-keyframes slider { 0% { left: 0; opacity: 0; } 2% { opacity: 1; } 20% { left: 0; opacity: 1; } 21% { opacity: 0; } 24% { opacity: 0; } 25% { left: -768px; opacity: 1; } 45% { left: -768px; opacity: 1; } 46% { opacity: 0; } 48% { opacity: 0; } 50% { left: -1536px; opacity: 1; } 70% { left: -1536px; opacity: 1; } 72% { opacity: 0; } 74% { opacity: 0; } 75% { left: -2304px; opacity: 1; } 95% { left: -2304px; opacity: 1; } 97% { left: -2304px; opacity: 0; } 100% { left: 0; opacity: 0; } } @keyframes slider { 0% { left: 0; opacity: 0; } 2% { opacity: 1; } 20% { left: 0; opacity: 1; } 21% { opacity: 0; } 24% { opacity: 0; } 25% { left: -768px; opacity: 1; } 45% { left: -768px; opacity: 1; } 46% { opacity: 0; } 48% { opacity: 0; } 50% { left: -1536px; opacity: 1; } 70% { left: -1536px; opacity: 1; } 72% { opacity: 0; } 74% { opacity: 0; } 75% { left: -2304px; opacity: 1; } 95% { left: -2304px; opacity: 1; } 97% { left: -2304px; opacity: 0; } 100% { left: 0; opacity: 0; } } |
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.
Tutorial Menarik Lainnya

Membuat Navbar Responsive dengan HTML dan CSS


Membuat Desain Form Login Dengan CSS


Membuat Menu Dropdown Sederhana Dengan CSS


terimakasih mas ilmunya, ijin pakai ya,, salam kenal semua buat para pembaca 🙂
Sangat membantu, terima kasih ilmunya
jika gambarnya saya mau include dari database gmana mas..?