Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

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

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi thanh_rossi, 30/11/12.

Lượt xem: 12,974

  1. thanh_rossi Thành viên cấp 2

    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 đâyjquery 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


    uDjxY.png

    ...
    chaylhlh, truong ngoc an, chicharito_achs8 người khác thích bài viết này.
  2. bazan

    bazan Mới đăng kí

    Bạn có thể share source demo của bạn cho mọi người được không?
    Mình muốn hỏi thêm là làm sao để bỏ hiệu ứng chọn hình số x nào? Bên demo của tác giả thấy có mà bên demo của bạn thì không thấy.
    Thanks
  3. thanh_rossi

    thanh_rossi Thành viên cấp 2

    Cập nhật rồi nhé
  4. kayoki

    kayoki Mới đăng kí

    tuyệt quá , đúng cái mình đang cần :D
  5. Nguyễn Lê Thanh

    Nguyễn Lê Thanh Thành viên cấp 1

    cái này có cái hay riêng của nó, tks bạn, mong lần sau bạn chép code đầy đủ hơn ^^
  6. việt ptit

    việt ptit Thành viên cấp 3

    cho mình hỏi đoạn này
    "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"

    thì cho vào file nào?
  7. thanh_rossi

    thanh_rossi Thành viên cấp 2

    cho vào trong phương thức coinslider({ cho vào đây }) nhé .Ví dụ muốn cho slider có chiều rộng 565px, chiều cao 290px, hiệu ứng là random, là kkhi hover qua thì dừng lại thì làm ntn :


    $('#coin-slider').coinslider({ width: 565, height: 290, effect: 'random',hoverPause: true });
    truongkhangviệt ptit thích bài viết này.
  8. truong ngoc an

    truong ngoc an Mới đăng kí

    bạn ơi jup mình cai này với. khi mình add ảnh vào coin-slider, ảnh có rất nhiều kích thước. mình cho tùy chọn của slide lớn hơn ảnh. nhưng mình gặp 1 vấn đề, các ảnh lặp lại. Bây giờ mình muốn bỏ cái lặp lại đó đi thì mình pải làm thế nào. Mong bạn jup mình. Thank
  9. Long Trần Quốc

    Long Trần Quốc Thành viên cấp 1

    Cái này dùng cho wordpress dc không thớt
  10. thanh_rossi

    thanh_rossi Thành viên cấp 2

    tất nhiên là đc bạn ơi
Từ khóa:

Ủng hộ diễn đàn