Pada tutorial kali ini anda akan belajar bagaimana cara membuat Sliding Menu Menggunakan HTML Dan CSS .
Untuk membuat menu navigasi sekarang ini sudah banyak yang sangat kreatif dalam segi tampilanya, dan kebanyakan bagus-bagus. tetapi bagus saja belum tentu baik dari segi UI dan UX karena menurut saya menu navigasi yang baik adalah menu yang dapat mengantarkan user atau pengunjung website ke halaman atau bagian lain dari website kita tanpa bingung ataupun mengganggu bagian yang lain dari website kita.
Untuk itu saya akan memberikan tutorial membuat sliding menu yang mana design menu seperti ini sangat berguna karena bagian menunya bisa di hilangkan atau tidak di tampilkan dan bisa di tampilkan kembali saat di butuhkan.
Hallo teman-teman, seperti biasa dihari yang cerah dan bahagia ini dipembahasan kali ini saya akan membahas tentang cara Membuat Slider Image dengan HTML dan CSS.
Sebelum kita masuk kepembahasan, hal yang perlu kalian ketahui itu adalah yang pasti harus sudah mengenal HTML dan CSS. Oke disini saya anggap teman-teman sudah mengenal HTML dan CSS.
Langsung saja ke pembahasan, jadi slider image itu merupakan sebuah animasi dalam mengubah / mengganti gambar yang pertama dan seterusnya pada sebuah website. Jika teman-teman menemukan sebuah website dan ada gambar yang berganti ganti dalam beberapa detik didalam sebuah website tersebut maka itu disebutnya slider image. Rata-rata didalam membuat slider image itu menggunakan javascript(JQuery). Tapi beda hal nya kali ini saya hanya menggunakan HTML dan CSS saja. Penasaran bukan ?
Oke langsung saja kita mulai, Pertama-teman siapkan terlebih dahulu foldernya dan masukan gambar apa saja terserah teman-teman didalam folder yang sudah teman-teman siapkan.
Kemudian jalankan text editor yang teman-teman gunakan, lalu ketik script HTML di bawah ini :
<div id="slider"> <div id="slide-holder"> <div class="slide"><img src="bg1.jpg" alt="" /></div> <div class="slide"><img src="bg2.jpg" alt="" /></div> <div class="slide"><img src="bg3.jpg" alt="" /></div> </div> </div>Jika sudah simpan file HTML nya ke dalam folder yang sudah teman-teman siapkan tadi, dan jangan lupa sesuaikan nama file gambarnya. Oke langkah selanjutnya ketik script CSS dibawah ini kedalam text editor yang teman-teman gunakan :
#slider { width: 950px; height: 500px; overflow: hidden; border: 1px solid #c69; } .slide { width: 500px; height: 500px; float: left; position: relative; } #slide-holder { width: 400%; position: relative; left: 0; -webkit-animation: scroller 10s infinite; animation: scroller 10s infinite; } @-webkit-keyframes scroller { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 33% { -webkit-transform: translateX(-400px); transform: translateX(-400px); } 66% { -webkit-transform: translateX(-800px); transform: translateX(-800px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes scroller { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 33% { -webkit-transform: translateX(-400px); transform: translateX(-400px); } 66% { -webkit-transform: translateX(-800px); transform: translateX(-800px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } body { font-family: sans-serif; } #slider { margin: 0 auto; } .slide:nth-child(1) { background: #c69; } .slide:nth-child(2) { background: wheat; } .slide:nth-child(3) { background: #eee; }Jika sudah simpan file cssnya, kemudian jika teman-teman menggunakan css external maka teman-teman harus menghubungkan antara file HTML dengan file CSS nya. Dan jika teman-teman menggunakan css internal maka langsung saja teman-teman jalankan/run di browser yang teman-teman gunakan.
Jika berhasil maka hasilnya akan terlihat pada gambar dibawah ini :
Cukup mudah bukan dalam Membuat Slider Image dengan HTML dan CSS ?
Oke jadi seperti itulah dalam Membuat Slider Image dengan HTML dan CSS. Sekian pembahasan kali ini tentang cara Membuat Slider Image dengan HTML dan CSS Semoga dapat bermanfaat.
Membuat Slider Responsive Dengan CSS
- By Diki Alfarabi Hadi
- 9 October 2018
- Web Design
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
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.
DEMO
DOWNLOAD
Incoming search terms:
- cara membuat gambar slide di html
- cara membuat slide gambar
- cara membuat slider
- membuat Carousel html css
- slider css
- cara membuat scale gambar html
- membuat carousel dengan css
- Membuat slider
- cara script slideshow html css
- cara membuat php untuk slider comten
- SHARE :
Diki Alfarabi Hadi
Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.
- Author's profile
- All posts by Diki Alfarabi Hadi
Tags: @keyframes css3, carousel, carousel css, css3, download slider css, efek animasi slider, image slider html, image slideshow css script, Kelebihan dan Kekurangan Menggunakan Slider, simple slider css, slide show, slide show css, slider, slider css keren, slider css responsive, slider css simple, slider responsive, slideshow html css code, text slider css, tutorial web design, wow slider css
Produk
- Source Code Website Reservasi Kamar Hotel Dengan PHP dan MySQLi Rp 200,000
- Source Code Aplikasi Pengajuan Cuti Karyawan Berbasis Website Rp 200,000
- Source Code Toko Sport PHP dan MySQLi Rp 200,000
- Source Code Sistem Informasi Kuesioner Berbasis Web Rp 200,000
Tutorial Terbaru
- Tutorial Python # 13 : Jenis Operator Pada Python September 24, 2022
- Membuat Laporan PDF Dengan PHP dan MySQLi September 3, 2022
- Export Data ke Excel Dengan PHP dan MySQLi August 23, 2022
- Membuat Select Option Dinamis Menggunakan Ajax August 17, 2022
- Membuat QR Code Dengan PHP August 3, 2022
Toko Kami
SOCIAL
Malas Ngoding
TUTORIAL MENARIK LAINNYA
Membuat Desain Form Login Dengan CSS Membuat Desain Form Login Dengan CSS – halaman form login adalah sebuah halaman yang di akses oleh user ketika ... Diki Alfarabi HadiMembuat Desain Form Login Dengan CSS
24 September 2018
Membuat Menu Dropdown Sederhana Dengan CSS Membuat Menu Dropdown Sederhana Dengan CSS, Itulah judul yang kita bahas pada tutorial ini, untuk melengkapi tutorial web design ... Diki Alfarabi HadiMembuat Menu Dropdown Sederhana Dengan CSS
17 September 2018
Kumpulan Kode Warna Flat Design – Selamat datang di artikel rekomendasi warna untuk flat design dari www.malasngoding.com. Di artikel kali ini kita tidak membahas tentang ... Diki Alfarabi HadiKumpulan Kode Warna Flat Design
19 May 2017
Membuat Template Web Responsive Dengan HTML dan CSS – Pada tutorial ini kita akan membuat sebuah template web sederhana responsive dengan menggunakan HTML dan CSS. ...