web design: Slide Button left-right

Slider dengan Button left-right

pada kali ini saya akan berbagi informasi tentang slider dengan button next dan prev menggunakan image. slider ini yang sangat cocok dipasang untuk blog kamu, dengan tampilan secara horizontal dan saat di klik button prev atau next nya akan ganti post lainnya. Untuk dapat membangun slidernya kita membutuhkan tag css, html, dan Javascript. mari kita langsung saja menuju TKP.

Tag HTML nya

<ul id="mycarousel" class="jcarousel-skin-tango2">
<li class="transparent-1">
                 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwwrCyLsCzF9ksUpTwuplyNfqNVioUlrDN85yyN38hEesAQOHir9PRPiomMNEfy5D3jE2UudQRtlIXibGCI07o2CzS6pDk42IEzxaCFND8Eq3QJn10nFsxdarua3HV0hNILpbUYEeMJJcP/s1600/desain_rumah_idaman.jpg" width="211" height="129" alt=""/>
                    <h5>
<span><a href="#">Desain Rumah idaman anda, cukup hubungi kami di .,...</a></span></h5>
</li>
<li class="transparent-2">
                 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9Z8QdnPjIzEgx8HAsjNbsqyyBsEyMjTHJtFcR91UFDzUZdlnUoQVc6ZQjBt-OImXTsOhrQzkaUw2567LxR-sZTZb8SZ1T-QBteen8Ydo0uH9n_hZ1quE71G3X5Xmr_N-LnDeWGIvWoxr0/s1600/Desain-Rumah-Idaman-Minimalis-6.jpg" width="211" height="129" alt=""/>
                    <h5>
<span><a href="#">pengen rumah baru,? hubungi kami...</a></span></h5>
</li>
<li class="transparent-3">
                 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjBkiqfRlcWZw-JdtrUYMJX5iY9sFhG5_NoL_F_5NH-2Q45NbeqY645CXXCOHv-y4Rjh31jY7FWace_DbpZgqBzo77l-Vd0mJut0jrPFNobmNFOQn_mLEO9A0HdMYsQsw_kbpD9thKAjAd/s1600/dijual-rumah-idaman-minimalis-murah-ngeliat-pasti-suka-hub-20140610204123-53976d730d733.jpg" width="211" height="129" alt=""/>
                    <h5>
<span><a href="#"> jual dengan harga yang memuaskan ?, kunjungi situs kami di ...</a></span></h5>
</li>
<li class="transparent-4">
                 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjev5ENt4-6QQycGng04I8H9HW4qJ5sBE5u56E9yqpSyRx64YVMMEAjax6TB-MrtCpocnhYUzDeF_UGRz6pWn8VX7ls4nWPg2o8NyYagcl8oaPayPC3BkkoXlS0Bq9fPS9_dUGDNQy-61lB/s1600/Gambar-Model-Rumah-Idaman-2013.jpg" width="211" height="129" alt=""/>
                    <h5>
<span><a href="#">rumah kos yang mewah dan murah.? hub kami hanya di ...</a></span></h5>
</li>
<li class="transparent-5">
                 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_18sS-NMQgx3CLvEcXeSVln1JSqk0KCzKsXO7yX8IOK4_QuiE-gHgOZkPCmeSdy35DoOjKwoqEqkeJggF8Ky9RyFr59OlBprQeX3CoacRTSAVHYNHqnt89tfy7HlQSEgKwDGh7DEy99N0/s1600/images.jpg" width="211" height="129" alt=""/>
                    <h5>
<span><a href="#">hotel penginapan yang memuaskan anda </a></span></h5>
</li>
<li class="transparent-6">
                 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd42q1TvXE3_i-HTDktXpkPuiS7cvlO-KC6K_v9qqCmgzARKZgQrx_Xw3eDnbs99DpKfQCJfG7kdHUxZQJgHi1-q8cuG8oWxqKinEokowixDg_RLzPHnetNAVkXj58m4z5IIGgsCWJetXr/s1600/pantone-titanium-decor-Desain-Interior-dan-Dekorasi-Interior-Rumah-Idaman.jpg" width="211" height="129" alt=""/>
                    <h5>
<span><a href="#">rumah dapur kami memang disajikan untuk anda</a></span></h5>
</li>
</ul>

Tag CSSnya

h5{ font-size:12px; line-height:1.1em;font-weight:normal;margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;font-family: inherit;vertical-align: baseline;}
:focus {outline: 0;}
a {color:#333; text-decoration:none; outline:none; padding:0px; margin:0px;}

a:hover {text-decoration:none; outline:none; color:#CC0000}

</style>

Javascript

File nya dapat dilihat hasilnya dan dapat diunduh berikut ini :

Demo Unduh

1 comments:

Balas

Blog27999

March 14, 2020 at 9:32 PM

If you're looking to lose pounds then you absolutely need to try this brand new personalized keto plan.

To create this keto diet service, certified nutritionists, fitness trainers, and cooks united to develop keto meal plans that are useful, painless, money-efficient, and delicious.

From their first launch in January 2019, hundreds of people have already completely transformed their figure and health with the benefits a professional keto plan can provide.

Speaking of benefits: clicking this link, you'll discover 8 scientifically-certified ones given by the keto plan.

Pages

Slide Button left-right