Cara Membuat Slider Konten Dengan CSS3

Hai, jumpa lagi dengan saya 🙂 , pada tutorial ini saya akan kasih tau kalian tentangÂ Cara Membuat Slider Konten Dengan CSS3,Â kalo biasanya kebanyakan orang membuat slider dengan menggunakan javascript kali ini saya akan buat slider dengan hanya menggunakan CSS3, berikut langkah dan cara membuatnya.

Langsung saja, silahkan kalian buat struktur kode HTML seperti berikut.

<div id="slider">
<ul>
	<li>
	<div class="slider-container">
    <h4>Pure CSS slider Content</h4>
		<p>Lorem Ipsum is simply dummy text</p>
	</li>
		<li>
		<div class="slider-container">
       <h4>Pure CSS slider Content</h4>
		<p>Lorem Ipsum is simply dummy text</p>
	</div>
	</li>
		<li>
		<div class="slider-container">
       <h4>Pure CSS slider Content</h4>
		<p>Lorem Ipsum is simply dummy text</p>
	</div>
	</li>
		<li>
		<div class="slider-container">
      <h4>Pure CSS slider Content</h4>
		<p>Lorem Ipsum is simply dummy text</p>
	</div>
	</li>
</ul>
</div>

<ul>

<li>

<h4>Pure CSS slider Content</h4>

<p>Lorem Ipsum is simply dummy text</p>

</li>

<li>

<h4>Pure CSS slider Content</h4>

<p>Lorem Ipsum is simply dummy text</p>

</div>

</li>

<li>

<h4>Pure CSS slider Content</h4>

<p>Lorem Ipsum is simply dummy text</p>

</div>

</li>

<li>

<h4>Pure CSS slider Content</h4>

<p>Lorem Ipsum is simply dummy text</p>

</div>

</li>

</ul>

</div>

Untuk konten slider nya silahkan kalian bisa menyali paragraf di lipsum.com, bisa kalian isikan satu paragraf per-slider, setelah itu, baru kita buat animasi slider nya dengan kode CSS3 berikut ini.

a
{
	text-decoration: none;
	color: #111b47;
}

a:hover
{
	border-bottom: 1px dashed #ED971F;
	color: #ED971F;
}

/**** slider ****/

#slider, ul
{
	height: 200px;
}

#slider
{
	margin: auto;
	overflow: hidden;
	padding: 20px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	margin-top: 50px;
	border-radius: 10px;
	box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.25);
	position: relative;
	width: 600px;
}

#slider li
{
	float: left;
	position: relative;
	width: 600px;
	display: inline-block;
	height: 200px;
}

#slider ul
{
	list-style: none;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 9000px;
	transition: left .3s linear;
	-moz-transition: left .3s linear;
	-o-transition: left .3s linear;
	-webkit-transition: left .3s linear;
	margin-left: -25px;
  font-family: century gothic;
  color: #666;
}

/*** Content ***/

.slider-container
{
	margin: 0 auto;
	padding: 0;
	width: 550px;
  min-height: 180px;
  border-bottom: 1px solid #ccc;
}

.slider-container h4
{
 	color: #0A7FAD;
  text-shadow: -1px 0px 0px rgba(0, 0, 0, 0.50);
}

.slider-container  p
{
	margin: 10px 25px;
	font-weight: semi-bold;
	line-height: 150%;
	text-align: justify;
}

/*** target hooks ****/

@-webkit-keyframes slide-animation {
	0% {opacity:0;}
	2% {opacity:1;}
	20% {left:0px; opacity:1;}
	22.5% {opacity:0.6;}
	25% {left:-600px; opacity:1;}
	45% {left:-600px; opacity:1;}
	47.5% {opacity:0.6;}
	50% {left:-1200px; opacity:1;}
	70% {left:-1200px; opacity:1;}
	72.5% {opacity:0.6;}
	75% {left:-1800px; opacity:1;}
	95% {opacity:1;}
	98% {left:-1800px; opacity:0;} 
	100% {left:0px; opacity:0;}
}

#slider ul
{
	-webkit-animation: slide-animation 25s infinite;
}

/* use to paused the content on mouse over */

#slider ul:hover
{
	-moz-animation-play-state: paused;
	-webkit-animation-play-state: paused;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

{

text-decoration: none;

color: #111b47;

}

a:hover

{

border-bottom: 1px dashed #ED971F;

color: #ED971F;

}

/**** slider ****/

#slider, ul

{

height: 200px;

}

#slider

{

margin: auto;

overflow: hidden;

padding: 20px;

border: 1px solid rgba(0, 0, 0, 0.15);

margin-top: 50px;

border-radius: 10px;

box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.25);

position: relative;

width: 600px;

}

#slider li

{

float: left;

position: relative;

width: 600px;

display: inline-block;

height: 200px;

}

#slider ul

{

list-style: none;

position: absolute;

left: 0px;

top: 0px;

width: 9000px;

transition: left .3s linear;

-moz-transition: left .3s linear;

-o-transition: left .3s linear;

-webkit-transition: left .3s linear;

margin-left: -25px;

font-family: century gothic;

color: #666;

}

/*** Content ***/

.slider-container

{

margin: 0 auto;

padding: 0;

width: 550px;

min-height: 180px;

border-bottom: 1px solid #ccc;

}

.slider-container h4

{

color: #0A7FAD;

text-shadow: -1px 0px 0px rgba(0, 0, 0, 0.50);

}

.slider-container p

{

margin: 10px 25px;

font-weight: semi-bold;

line-height: 150%;

text-align: justify;

}

/*** target hooks ****/

@-webkit-keyframes slide-animation {

0% {opacity:0;}

2% {opacity:1;}

20% {left:0px; opacity:1;}

22.5% {opacity:0.6;}

25% {left:-600px; opacity:1;}

45% {left:-600px; opacity:1;}

47.5% {opacity:0.6;}

50% {left:-1200px; opacity:1;}

70% {left:-1200px; opacity:1;}

72.5% {opacity:0.6;}

75% {left:-1800px; opacity:1;}

95% {opacity:1;}

98% {left:-1800px; opacity:0;}

100% {left:0px; opacity:0;}

}

#slider ul

{

-webkit-animation: slide-animation 25s infinite;

}

/* use to paused the content on mouse over */

#slider ul:hover

{

-moz-animation-play-state: paused;

-webkit-animation-play-state: paused;

}

Kalo sudah semua diketikan, jangan lupa simpan terlebih dahulu, kemudian jalankan di browser masing-masing dan lihat hasilnya, Nah pada slider ini, konten nya akan berubah otomatis bergantian, baik selesai sudah tutorial tentangÂ Cara Membuat Slider Konten Dengan CSS3, semoga bermanfaat, sampai ketemu dilain kesempatan.

Selamat mencoba 🙂

Facebook DUMET School

Categories