Cara Membuat Gambar Slider Responsive dengan CSS dan HTML

Halo semuanya, Setelah kalian sudah membuat navbar, disini kalian bisa menambahkan sebuah content yaitu sebuah Slider Responsive dengan menambahkan CSS dan HTML.

Slider Responsive menggunakan sebuah gambar. Jadi di Content tersebut gambar akan ter-slide secara otomatis.

Dengan menggunakan Slider Responsive ini dapat mempercantik tampilan di menu awal website kalian. Dan dapat memudahkan kalian dalam hal promo, dan memberikan informasi tentang isi dari website tersebut .

Pertama – tama, kalian tambahkan folder di project Bootstrap kalian dengan nama folder assets lalu copy gambar yang akan kalian gunakan nantinya ke dalam folder assets.

Setelah sudah tambahkan isi index.html dengan code berikut ini untuk memanggil CSS dan file gambar tersebut.

<!DOCTYPE html>
<html>
<head><body>
  <div class=paul-slider>
    <div class=isi-slider>
      <img src="https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg" alt="Gambar 1">
      <img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" alt="Gambar 2">
      <img src="https://dosenit.com/wp-content/uploads/2020/10/ilustrasi-hutan_1.jpg" alt="Gambar 3">
    </div>
  </div>

</body>
  </html>

Jadi kalau ditambahkan dengan source code untuk navbar, kalian bisa isikan dengan code berikut ini.

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Beli Paketnya kakak</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg" class="image" border="0" width="30" height="30">
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="">beli paket</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">HTML</a>
          <a class="dropdown-item" href="#">CSS</a>
          <a class="dropdown-item" href="#">PHP</a>
          <a class="dropdown-item" href="#">MYSQL</a>
          <a class="dropdown-item" href="#">JAVASCRIPT</a>
          <a class="dropdown-item" href="#">JQUERY</a>
        </div>
      </li>
    </ul>
  </div>
</nav>
<!-- navbar -->

<!-- Menu -->
<body>
  <div class="paul-slider">
    <div class="isi-slider">
      <img src="https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg" alt="Gambar 1">
      <img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" alt="Gambar 2">
      <img src="https://dosenit.com/wp-content/uploads/2020/10/ilustrasi-hutan_1.jpg" alt="Gambar 3">
    </div>
  </div>
</body>
</html>

Hal yang paling penting untuk memanggil Slide Responsive tersebut adalah pada source code berikut ini :

<link rel="stylesheet" type="text/css" href="style.css">

<body>
<div class="paul-slider">
    <div class="isi-slider">
      <img src="https://dosenit.com/wp-content/uploads/2020/10/Gunung-Fuji-Jepang-1024x640-1.jpg" alt="Gambar 1">
      <img src="https://dosenit.com/wp-content/uploads/2020/10/thumb-1920-744908.jpg" alt="Gambar 2">
      <img src="https://dosenit.com/wp-content/uploads/2020/10/ilustrasi-hutan_1.jpg" alt="Gambar 3">
    </div>
 </div>
</body>

Source Code tersebut berguna untuk memanggil style.css yang akan kita buat setelah ini. Dan untuk class="paul-slider" dan class="isi-slider" berguna untuk memanggil class yang ada di dalam style.css. Untuk file style.css dapat dilihat pada berikut ini :

style.css

h2{
	font-family: sans-serif;
	font-weight: normal;
}

.paul-slider { 
	border: 10px solid #efefef; 
	position: relative; 
	overflow: hidden; 
	background: #efefef;
}

.paul-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; 
}

.paul-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; 
}

.paul-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; 
	}
}

Itu dia untuk source code dari style.css. Silahkan dicoba, jika ada kesalahan silahkan bertanya di komentar dibawah.
NOTED : Untuk folder dan file jangan sampai salah

Jadi untuk isi projectnya adalah

assets (berisi gambar)
css (folder dari bootstrap)
js (folder dari bootstrap)
index.html (file untuk index dan bukan folder)
style.css (file untuk css dan bukan folder)

Cara Membuat Gambar Slider Responsive dengan CSS dan HTML

Cara Memasang Widget Radio Streaming di Website dengan HTML5

Media Query RWD di CSS: Cara Membuat dan Code Sintaknya

You may also like