Coin slider - jquery plugin với hiệu ứng trượt độc đáo

Coin slider là một jquery image slider phát triển bởi tác giả IVAN LAZAREVIC với các hiệu ứng chuyển ảnh độc đáo
Các bước chuẩn bị chuẩn bị một loạt các hình ảnh có cùng kích cỡ và download file js, css tại đây và jquery mới nhất tại jquery.com
Thêm các thành phần js và css vào đầu trang

Code:

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="coin-slider.min.js"></script>
<link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />

Tiếp theo là phần nội dung của slider, theo đúng cấu trúc sau (ko thì ko đc đâu)

Code:

<div id='coin-slider'>
    <a href="img01_url" target="_blank">
        <img src='img01.jpg' >
        <span>
            Description for img01
        </span>
    </a>
    ......
    ......
    <a href="imgN_url">
        <img src='imgN.jpg' >
        <span>
            Description for imgN
        </span>
    </a>
</div>

Và thêm vào cuối đoạn js để coin slider hoạt động

Code:

<script type="text/javascript">
    $(document).ready(function() {
        $('#coin-slider').coinslider();
    });
</script>

Tùy chọn : coin slider có các tùy chọn giúp bạn đặt các thông số cho slider ,ví dụ tôi muốn độ rộng của slider là 600px (vì các ảnh tôi dùng đều có độ rộng là 600px) và bỏ navigation , và các ảnh cứ 5s chuyển một lần thì ta sẽ khai báo như sau

Code:

<script type="text/javascript">
    $(document).ready(function() {
        $('#coin-slider').coinslider({ width: 900, navigation: false, delay: 5000 });
    });
</script>

Danh sách các tùy chọn

Code:

width: 565, // width of 
	
slider panel
 
height: 290, // height of 
	
slider panel
 
spw: 7, // squares per width
 
sph: 5, // squares per height
 
delay: 3000, // delay between images in ms
 
sDelay: 30, // delay beetwen squares in ms
 
opacity: 0.7, // opacity of title and navigation
 
titleSpeed: 500, // speed of title appereance in ms
 
effect: '', // random, swirl, rain, straight
 
navigation: true, // prev next and buttons
 
links : true, // show images as links
 
hoverPause: true // pause on hover

Demo từ trang tác giả
Demo của số 1của mình Soure code
Demo số 2 Soure code