Simple Responsive Slider With Javascript And Css
Sampai ketika ini slider masih menjadi element web yang masih banyak dipakai untuk menampilkan konten-konten utama atau konten-konten terbaru dari sebuah web. Banyaknya jenis slider baik dari desain maupun instruksi pembentuknya, menuntut para webmaster untuk pintar-pintar menentukan slider semoga tidak menjadi beban loading blog namun sanggup harmonis dengan tampilan web atau blog.Kali ini aku akan sharing sebuah slider yang sederhana dan sudah responsive yang dibentuk memakai css dan javascript sehingga tidak akan memberatkan loading blog dibandingkan dengan slider yang memakai jquery.
Untuk mencoba responsive-nya, silahkan resize browser Anda. Bagaimana, ingin mencobanya? Silahkan gunakan kode-kode di bawah ini:
1. Kode CSS
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf) format('truetype')
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://fonts.gstatic.com/s/opensans/v10/k3k702ZOKiLJc3WVjuplzInF5uFdDttMLvmWuJdhhgs.ttf) format('truetype')
}
#slide {
height: auto;
}
#pager {
width: auto;
margin: 0px auto;
text-align: center;
}
#pager > span {
display: inline-block;
width: 10px;
height: 10px;
margin: 24px 5px 30px;
background: rgba(0, 0, 0, .2);
text-align: center;
border-radius: 100%;
font-size: 17px;
text-decoration: none;
transition: background 0.3s linear 0s;
cursor: pointer;
}
#slidecontent {
margin: 0px auto;
transition: opacity 0.3s linear 0s;
color: #AAA;
background: #ffffff;
border: solid 1px #dedede;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
position: relative;
overflow: hidden;
min-height:350px;
}
.slidepanel {
width: 30%;
padding: 30px;
float: left;
-moz-box-sizing: border-box;
word-wrap: break-word;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: left;
}
.slidepanel > h2 {
font-size: 26px;
font-weight: 700;
line-height: 1.2em;
color: #333;
margin: 0 auto 10px;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
text-transform:capitalize;
}
.slidepanel > p,.slidepanel > span {
font-size: 16px;
font-weight: 400;
line-height: 1.5em;
color: #777;
margin:0!important;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}
.slidepanel a {
color: #333;
text-decoration: none;
font-weight: 700;
}
.slidepanel a:hover {
color: #000;
}
.slideimage {
width: 70%;
height: 100%;
margin: 0;
padding: 0;
position: absolute;
right: 0;
top: 0;
bottom: 0;
}
.slideimage img {
width: 100%;
height: 100%
}
.clear {
clear: both
}
@media screen and (max-width:880px){
.slidepanel {
width: 100%;
float: none;
}
.slideimage {
width: 100%;
height: auto;
position: relative;
}
.slideimage img {
height: auto;
}
.center{
width: 100%;
}
}
2. Kode HTML
<div id="slide">
<div id="slidecontent">
<div class="slideimage"><img alt="Simple Responsive Slider With Javascript And CSS Simple Responsive Slider With Javascript And CSS" height="350" src="URL IMAGE" width="750"/></div><div class="slidepanel"><h2><a href="#" title="Simple Responsive Slider With Javascript And CSS">Lorem ipsum dolor sit amet</a></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci mi, in pharetra ligula. Nulla facilisi. Nulla facilisi.</p></div><div class="clear"></div>
<script>
//<![CDATA[
var bca = [
'<div class="slideimage"><img alt="Simple Responsive Slider With Javascript And CSS Simple Responsive Slider With Javascript And CSS" height="350" src="URL IMAGE" width="750"/></div><div class="slidepanel"><h2><a href="#" title="Simple Responsive Slider With Javascript And CSS">Lorem ipsum dolor sit amet</a></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci mi, in pharetra ligula. Nulla facilisi. Nulla facilisi.</p></div><div class="clear"></div>',
'<div class="slideimage"><img alt="Simple Responsive Slider With Javascript And CSS Simple Responsive Slider With Javascript And CSS" height="350" src="URL IMAGE" width="750"/></div><div class="slidepanel"><h2><a href="#" title="Simple Responsive Slider With Javascript And CSS">Mauris convallis venenatis massa</a></h2><p>Mauris convallis venenatis massa, quis <a href="#">consectetur</a> felis ornare quis. Sed aliquet nunc ac ante molestie ultricies. Nam pulvinar ultricies bibendum. Vivamus membisu leo, faucibus et vehicula eu, molestie sit amet dui.</p></div><div class="clear"></div>',
'<div class="slideimage"><img alt="Simple Responsive Slider With Javascript And CSS Simple Responsive Slider With Javascript And CSS" height="350" src="URL IMAGE" width="750"/></div><div class="slidepanel"><h2><a href="#" title="Simple Responsive Slider With Javascript And CSS">Proin nec orci et elit</a></h2><p>Proin nec orci et elit semper ultrices. <a href="#" target="_blank">Cum sociis natoque</a> penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></div><div class="clear"></div>',
'<div class="slideimage"><img alt="Simple Responsive Slider With Javascript And CSS Simple Responsive Slider With Javascript And CSS" height="350" src="URL IMAGE" width="750"/></div><div class="slidepanel"><h2><a href="#" title="Simple Responsive Slider With Javascript And CSS">Sed quis urna mi, ac dignissim mauris.</a></h2><span>Sed quis urna mi, ac dignissim mauris. <a href="#">Quisque mollis ornare mauris</a>.<br>Proin vel elementum ante. Donec hendrerit arcu ac odio tincidunt posuere</span></div><div class="clear"></div>'
];
//]]>
</script>
</div>
<div id="pager">
<span onClick="pager(0); clearInterval(intrvl);" style="background:rgba(0,0,0,.7);"></span>
<span onClick="pager(1); clearInterval(intrvl);"></span>
<span onClick="pager(2); clearInterval(intrvl);"></span>
<span onClick="pager(3); clearInterval(intrvl);"></span>
</div>
</div>
Perhatikan yang aku marking! Harus sama, untuk tampilan awal sebelum javascript-nya berjalan. Banyaknya pager sesuaikan dengan banyaknya konten. Untuk kontennya silahkan sesuaikan dengan konten yang ingin Anda tampilkan.
3. Kode Javascript
Simpan instruksi javascript di bawah ini di atas instruksi
</body> <script>
//<![CDATA[
function _(x) {
return document.getElementById(x);
}
var ba, bi = 0,
intrvl;
function pager(bi) {
_("slidecontent").style.opacity = 0;
for (var i = 0; i < ba.length; i++) {
ba[i].style.background = "rgba(0,0,0,.2)";
}
ba[bi].style.background = "rgba(0,0,0,.7)";
setTimeout(function() {
_("slidecontent").innerHTML = bca[bi];
_("slidecontent").style.opacity = 1;
}, 300);
}
function bubbleSlide() {
bi++;
if (bi == ba.length) {
bi = 0;
}
pager(bi);
}
window.addEventListener("load", function() {
ba = _("pager").children;
intrvl = setInterval(bubbleSlide, 7000);
});
//]]>
</script>
Selamat mencoba....
Credit to: developphp.com
Sumber https://www.kompiajaib.com/
0 Response to "Simple Responsive Slider With Javascript And Css"
Posting Komentar