Ok sobat postingan berikut ini mengenai Gambar dengan efek slider
crousel di blog. Untuk sobat yang ingin mempercantik tampilan blog, atau
membuat animasi slider di gambar-gambar yang ada di postingan sobat
maka sobat dapat mencoba menggunakan
Crousel Image slider di bawah ini.
Untuk Demo slider yang ini sobat dapat melihatnya di akhir postingan
ini. Ok sob berikut ini adalah kode yang dapat sobat pasang langsung ke
dalam tempate atau menempatkannya ke widget misalnya diatas postingan.
<style type="text/css">
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus{
outline:none;
}
.slides,
.flex-control-nav,
.flex-direction-nav{
margin:0;
padding:0;
list-style:none;
}
/* FlexSlider Necessary Styles
*********************************/
.flexslider{
margin:0;
padding:0;
}
.flexslider .slides > li{
display:none;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img{
width:100%;
display:block;
}
.flex-pauseplay span{
text-transform:capitalize;
}
/* Clearfix for the .slides element */
.flexslider a.intro {
bottom:0;
color:rgba(0, 0, 0, 0.1);
font-size:14px;
position:absolute;
right:0;
text-decoration:none;
z-index:99999;
}
.slides:after{
content:".";
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;
}
html[xmlns] .slides{
display:block;
}
* html .slides{
height:1%;
}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child{
display:block;
}
/* FlexSlider Default Theme
*********************************/
.flexslider{
margin:0 0 60px;
background:#fff;
border:4px solid #fff;
position:relative;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:0 1px 4px rgba(0,0,0,.2);
-moz-box-shadow:0 1px 4px rgba(0,0,0,.2);
box-shadow:0 1px 4px rgba(0,0,0,.2);
zoom:1;
}
.flex-viewport{
max-height:2000px;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
transition:all 1s ease;
}
.loading .flex-viewport{
max-height:300px;
}
.flexslider .slides{
zoom:1;
}
.carousel li{
margin-right:5px;
}
/* Direction Nav */
.flexslider li {
border: 0 none !important;
padding: 0 !important;
text-indent: 0 !important;
}
.flex-direction-nav a{
width:30px;
height:30px;
margin:-20px 0 0;
display:block;
background:url(http://project.dimpost.com/flexslider-carousel/images/bg_direction_nav.png) no-repeat 0 0;
position:absolute;
top:50%;
cursor:pointer;
text-indent:-9999px;
opacity:0;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease;
-o-transition:all .3s ease;
transition:all .3s ease;
}
.flex-direction-nav .flex-next{
background-position:100% 0;
right:-36px;
}
.flex-direction-nav .flex-prev{
left:-36px;
}
.flexslider:hover .flex-next{
opacity:0.8;
right:5px;
}
.flexslider:hover .flex-prev{
opacity:0.8;
left:5px;
}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover{
opacity:1;
}
.flex-direction-nav .disabled{
opacity:.3!important;
filter:alpha(opacity=30);
cursor:default;
}
/* Control Nav */
.flex-control-nav{
width:100%;
position:absolute;
bottom:-40px;
text-align:center;
}
.flex-control-nav li{
margin:0 6px;
display:inline-block;
zoom:1;
*display:inline;
}
.flex-control-paging li a{
width:11px;
height:11px;
display:block;
background:#666;
background:rgba(0,0,0,0.5);
cursor:pointer;
text-indent:-9999px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
-moz-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
box-shadow:inset 0 0 3px rgba(0,0,0,0.3);
}
.flex-control-paging li a:hover{
background:#333;
background:rgba(0,0,0,0.7);
}
.flex-control-paging li a.flex-active{
background:#000;
background:rgba(0,0,0,0.9);
cursor:default;
}
.flex-control-thumbs{
margin:5px 0 0;
position:static;
overflow:hidden;
}
.flex-control-thumbs li{
width:25%;
float:left;
margin:0;
}
.flex-control-thumbs img{
width:100%;
display:block;
opacity:.7;
cursor:pointer;
}
.flex-control-thumbs img:hover{
opacity:1;
}
.flex-control-thumbs .active{
opacity:1;
cursor:default;
}
</style>
<script src="https://seocipscrouselslide.googlecode.com/svn/seocipscrslslide" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 0,
minItems: 1,
maxItems: 4
});
});
});
</script>
<br />
<div class="flexslider">
<ul class="slides">
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvKfbSC6pcd_Dg3VXZGpoYMr-cR2D3KKA15ODXBjODUiLtA8K2qy1_Cj6ptDUy6_Jwr69deDq9YO92BFljBy7SKeC_-iqX8bDEg3UE4iXW7dw5aRcyqo79xgI41Q0jBoA_dNPCyBC5Mms/s1600/1b.jpg" />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiGA6At_41b35jdeU82YXliO3mxm9krBwFvV1o1KPEgNL00i5_S1C6OmASjNksFNnQ2MjimhxmWLfMSYkRUtuQ-39fVWrFq5_7LLA7QOs-AwJ2K9HynjiVNSIuKAwPU7M1TTSWyD80c24/s1600/1a.png" />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigOeYM2WZGlkllArx5V0yUBzGwiRyzmtyWjPfFRcGCG641fsKp9HwJuzVK9slDp860hp6XY6B6bZQ_LnzruIHJPu3j2wZOUtd4h8P_Yj026dL1NEU0VXj4vvsiTZXXJOTS90YjAnLwUkg/s1600/1d.jpg" />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuRkdtTyyD8cz9s8MQK8IBV0f0HMrwDMY8a75OLC-bS5bLcgXOyX_kqV62C-BSgb7GC9nzbr9M7cx-DyhsTt4-oDC-KMWvi1wXRSLGChSVFNu-Qc43UnQl9L3G629TnAEFMEVnEiluqjY/s1600/1e.jpg" />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpn69_3G5hakUKOmEU7PBx_rJTT7JWypKTcIo7yZJSYd4s3K9dIcvoky75uj7r2j9CItmqouU4RcqhaimP0CFJsHBkg6HJgXN5qGByNlAMNCjYcBNhmGY2MeV7p07dAu2QLgRYILh6_2Q/s1600/1f.jpg" />
</li>
<li>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg27Cgqhm_69TJA1Yy8Uvs6Urtrv8sNGn-uLd-V9WG770iEMWAadZ7kX5hB-ARHaeu5cebrzGGdNrnzPyAGIS4WEOyZuR4esGy3_gSoqT9ki-URjm-bgQEHCDG1Ku0VVgd7ZTcBDI4l7nQ/s1600/1g.jpg" />
</li>
</ul>
</div>
Kode berwarna
biru dan yang hampirsama
dengan kode itu silahkan ganti dengan gambar milik sobat. Di demonya
saya hanya memasang 6 gambar saja jika sobat ingin menambah gamabrnya
maka lihat kode warna
merah di atas dan tambahkan kode seperti itu dibawahnya, untuk berapa banyak gambar yang ingin sobat pasang itu terserah sobat.
Hahaha hampir kelupaan untuk LIVE DEMOnya adalah seperti di bawah ini:
LIVE DEMO