Slideshow ảnh mượt mà bằng cách rê chuột hoạt động tốt trên mọi thiết bị

Do nhu cầu sử dụng các thiết bị di động như máy tính bảng, smart phone ngày càng tăng nên web/blog hiện nay chúng ta cũng cần phải thiết kế sao cho phù hợp với tất cả các thiết bị. Như ở bài trước mình đã hướng dẫn cách tạo lightbox cho hình ảnh hết sức thân thiện đối với người sử dụng, và ở bài này mình sẽ giới thiệu đến các bạn một tiện ích cũng thú vị không kém liên quan đến hình ảnh. Đó chính là slideshow ảnh mà các bạn có thể xem ảnh qua lại chỉ bằng các rê chuột qua phải hoặc trái, hơn nữa có thể hoạt động tốt trên các thiết bị cảm ứng và tự thay đổi kích thước cho phù hợp với trình duyệt của thiết bị đó (responsive). Xem demo bằng cách click vào link bên dưới dể hiểu rõ hơn

Demo

HTML

Bạn sử dụng cấu trúc HTML sau để tạo thứ tự các hình ảnh trong slideshow

<div id="slideshow">
    <ul>
        <li><img src="1.jpg" alt="" /></li>
        <li><img src="2.jpg" alt="" /></li>
        <li><img src="3.jpg" alt="" /></li>
        <li><img src="4.jpg" alt="" /></li>
        <li><img src="5.jpg" alt="" /></li>
    </ul>
</div>

CSS

#slideshow{ width: 100%; height: 500px; overflow: hidden; position: relative;}
#slideshow ul {  width: 9999%;  height: 100%;  position: absolute;  top: 0;  left: 0; }
#slideshow li  {   height: 100%;   float: left;   margin: 0 10px;  }
@media screen and (max-height: 500px){#slideshow ul{  padding: 100px 0; }}

JavaScript

<script src="https://96b10051ab9d6bb45ad3a36df97564341ac13070.googledrive.com/host/0Bz_65BAr9KCZQmQyNC1TOXZhQjQ"></script>
<script>
 $( window ).load( function()
 {
  $( '#slideshow' ).gesturedSlideshow();
 });
</script>

Nếu thấy bài viết thú vị hãy chia sẻ đến những người bạn của mình nhé, cảm ơn bạn đã xem bài viết và đừng quên để lại nhận xét nhé!

Nguồn: osvaldas.info/