Buatlah blog Anda lebih cantik dengan menambahkan slideshow. Selain cantik, slideshow juga menghemat tempat karena kita bisa menampilkan beberapa item pada satu tempat.
Buatlah blog Anda lebih cantik dengan menambahkan slideshow. Selain cantik, slideshow juga menghemat tempat karena kita bisa menampilkan beberapa item pada satu tempat. Ingin mencoba silahkan.
HTML
CSS
jQuery
Selamat mencoba :)
HTML
<div id="slider">
<div class="container">
<div class="slide"> ... </div>
<div class="slide"> ... </div>
<div class="slide"> ... </div>
<div class="slide"> ... </div>
<div class="slide"> ... </div>
</div>
</div>
<nav id="slider-nav"></nav>
CSS
/* Slider */
#slider {
width:300px; /* dimensi lebar */
height:200px;; /* dimensi tinggi */
margin:0 auto;
background-color:black;
overflow:hidden; /* Sembunyikan muatan elemen '.container' yang berlebih dari '#slider' */
}
#slider .slide {
width:300px; /* dimensi lebar */
height:200px; /* dimensi tinggi */
float:left;
}
#slide-1 {background-color:#F5B800}
#slide-2 {background-color:#9999FF}
#slide-3 {background-color:#FFCC99}
#slide-4 {background-color:#AFCAAF}
#slide-5 {background-color:#9F8BB1}
/* Navigasi */
#slider-nav {
display:block;
width:300px;
margin:10px auto;
text-align:center;
}
#slider-nav a {
display:inline-block;
width:15px;
height:15px;
background-color:#bbb;
font-size:0;
color:transparent;
overflow:hidden;
text-indent:-99px;
margin:0 2px 0 0;
border:2px solid white;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
box-shadow:0 1px 2px rgba(0,0,0,.4);
-webkit-border-radius:100%;
-moz-border-radius:100%;
border-radius:100%;
}
#slider-nav .active {
background-color:green;
}
jQuery
(function($) {
var $slider = $('#slider'),
$container = $slider.find('.container'),
$nav = $('#slider-nav'),
$slide = $container.children(),
s_length = $slide.length,
s_wide = $slider.width() * s_length,
s_height = $slider.height(),
autoSlide = null;
$container.css({
'position':'relative',
'width':s_wide,
'height':s_height
});
$slide.each(function(index) {
var i = index + 1;
$nav.append('<a href="#slide-'+i+'">'+i+'</a>');
$(this).attr('id', 'slide-'+i);
});
$nav.find('a').on("click", function(pos) {
$nav.find('.active').removeClass('active');
$(this).addClass('active');
pos = $(this).index() * $slider.width();
$container.animate({left:'-'+pos+'px'}, 600);
clearInterval(autoSlide);
autoSlide = setInterval(slideShow, 3000);
return false;
}).first().addClass('active');
function slideShow() {
if ($nav.find('.active').next().length) {
$nav.find('.active').next().trigger("click");
} else {
$nav.find('a').first().trigger("click");
}
} autoSlide = setInterval(slideShow, 3000);
})(jQuery);
Selamat mencoba :)
demonya error
ReplyDeletedownload template Download Template Jelasinblog Blue Jeans LINK DOWNLOAD OVER BANYAKAN YANG DONLOD JADI GA BISA DIDONLOAD :(
Coba lagi...
Deletescrip jquery dimmana kah harus meletakkannya
ReplyDeleteLetakkan di atas tag </head>
DeleteHi Dear ,
ReplyDeleteI See Your Blog Daily..Your Blog Is Very Usefull For Me .I Like SO Much
You Can Also See..
Slider Maker is the easiest tool to generate jQuery Photo Slideshows - Upload jquery slideshow maker on your web server and start building your first web slideshows.
Visit Now - http://www.slider-maker.com/
bang bisa buat tombol prev next di slider ? tapi hanya muncul saat ada kursor aja
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDelete