Cara menggunakan header slider html css

Pada tutorial kali ini anda akan belajar bagaimana cara membuat Sliding Menu Menggunakan HTML Dan CSS .

Table of Contents Show

Membuat Slider Responsive Dengan CSS
Kegunaan/Kelebihan dan Kekurangan Menggunakan Slider Pada Website
Membuat Slider Responsive Dengan CSS
TUTORIAL MENARIK LAINNYA
Membuat Desain Form Login Dengan CSS
Membuat Menu Dropdown Sederhana Dengan CSS
Kumpulan Kode Warna Flat Design

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

Web DesignMembuat 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

<!DOCTYPE html>

<html>

<head>

<title>Membuat Slider Responsive Dengan CSS - www.malasngoding.com</title>

</head>

<body>

<h2>Membuat Slider Responsive Dengan CSS <br/> www.malasngoding.com</h2>

</center>

</div>

</body>

</html>

style.css

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

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

Web Design24 September 2018

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 Hadi

Web Design17 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 Hadi

Web Design

Kumpulan Kode Warna Flat Design

19 May 2017

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 Hadi

CSS - Web Design