Hai Sobat... Gimana kabarnya ni..? Oh iyah mumpung lagi ngeblog enaknya ngeshare aja ilmu aja deh.. ilmu ini saya dapat dari SIN1AJA yaitu tentang Cara Membuat Chop Slider CSS3 Transition oke langsung aja deh ke cara Pembuatannya.

Untuk DEMO

Dalam gambar di atas adalah salah satu efek transitionnya, hemmm pokoknya puas banget aku melihat slider ini bekerja Fyuhhhh mari langsung Comot slidernya.

1. Masukan css di bawah ini di atas ]]></b:skin>

.wrapper {
position: relative;
margin: 0 auto 15px;
width: 600px;
height: 350px;
display: block;
padding: 5px;
background: #FFF;
z-index: 2
}
#slide-prev, #slide-next {
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
padding: 15px;
bottom: 50%;
position: absolute;
z-index: 4
}
#slide-prev {
left: 20px;
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY6RRjvN4ROL8itwskvRBUUnxJ-5fa8y1ZOhEySOHGigxTf_ev9-os3O9Cl5Qchupm76Lvm-3gAUuQlFv6xCRB0PoFyiJZQDf8JkxOVM3xTpPBetfK6XL7-2eYFLLJ0N16BNyIbS501yQ/s1600/arrow_left.png) no-repeat center
}
#slide-next {
right: 20px;
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAIjLBsPitxk7nc1rsCcarj4YktyhFn0E-sql7JnY5VGiWxJh-Ah9uWS14qChkZyNHhA-f8nYK4SOXtLAbk7VXvCFv6zte7V13iqEtVg3dFh50M6r5UBG4WuE_S-sDc4qjuZwWWrzu2X0/s1600/arrow_right.png) no-repeat center
}

#slider {
width: 600px;
height: 350px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 2;
display: block
}

#slider img {
width: 100%;
height: 100%
}

.slide {
display: none
}

.cs-activeSlide {
display: block
}

.slide-descriptions {
display: none
}

.caption {
background: rgba(238, 238, 238, 0.83);
color: #333;
display: none;
padding: 5px 10px;
position: absolute;
left: 0;
right: 0;
bottom: 5px;
z-index: 3;
font: normal 13px/20px Arial, sans-serif
}

2. Masukan script di bawah ini di atas </head>

3. Masukan kode html di bawah ini dalam Gadget HTML/Javascript

<div class="wrapper">
<a id="slide-next" href="#"></a>
<a id="slide-prev" href="#"></a>
<div id="slider">
<div class="slide cs-activeSlide"><img src="url gambar1.jpg"/></div>
<div class="slide"><img src="url gambar2.jpg"/></div>
<div class="slide"><img src="url gambar3.jpg"/></div>
<div class="slide"><img src="url gambar4.jpg"/></div>
</div>

<div class="slide-descriptions">
<div class="sl-descr">Ini beneran gak ya my Friend...? ngeri juga kalau sampe di caplok</div>
<div class="sl-descr">Walpaper Gothic 1</div>
<div class="sl-descr">Walpaper Gothic 2</div>
<div class="sl-descr">Walpaper Gothic 3</div>
</div>
<div class="caption"></div>
</div>

Ganti urlnya dengan url gambar anda, jangan lupa ganti juga deskripsinya. untuk pagination yang bundar - bundar itu sengaja gak aku masukan karena penambahan bundar - bundar nya ( pagination ) nya itu secara manual jadi jika gambar anda ada 10 maka anda harus menambah kode paginationnya sebanyak 10 kali. hemmm yah abis itu simpan ya. kalau belum punya URL gambarnya ni aku kasi pinjem url gambar.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTVVxrCTGTwYlowX9T743t5_1dFoaZ_bTf4IwNkaO2aFHOmx8bvMH97VuT7SgPQHOOlO83LJCMGWFUyT60eg4_5t3eJrLNiJNmgLNhiPeEyYORunoQfykfI8gfFHBfEl9EmsgQ90E_2SU/s1600/chop1.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0DgFYeBK_S6VDy2KhGINUQA_spDEzysvOAUO9bgCH5Zx35u-Kii8m1mN9o94LtpCy5_PRAQQhwSTkMeZn7MKwjMt5OpaJ74RjjnRIvXKcng4aR3OzvGH21jYFExBHY2eFeAyX-LysXV8/s1600/chop2.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipzf7I2l6v1mNQNn1i1T4JrvdGiRwOFxBnEMxDRaVY4hQEVjKMfd7vD3bgiCioxbGo8to77gjvIXNphAL3sZQaogvIBR2YyPyX_X8qbPPs4JLURxJi4R0g2C9uLBjDiz5DxTwVeiUuN3U/s1600/chop3.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhctp5ESoZUIoEBHLFJJgJzSmIcFSISszOh53HUaQemz4zOjFKIsVR_LGVfrcFkUVVaLKxvnQhFah5xAHOO-GsjK2DxKI79-01tN-w41Qm9bJzc9DI6_4EnTFFDv3BpNPBt04SeSxc1hp8/s1600/chop4.jpg

Perhatikan .wrapper dan #slider jika pada .wrapper anda rubah kode width atau height nya maka pada #slider juga harus anda rubah agar sesuai dan rapi. nah selamat mencoba

Related Post