Fading Slideshow với jQuery và CSS3

Nếu các bạn đang gặp rắc rối với những kiểu slideshow đã trở nên lỗi thời và nhàm chán của trang web hay blog của các bạn, thì hãy thử hiệu ứng fading slideshow mà mình giới thiệu trong bài viết này xem sao. Đây là một hiệu ứng trình diễn ảnh đơn giản và nhỏ gọn, rất thích hợp tích hợp vào những trang web có nội dung nhiều với không gian web chật hẹp.

Xem Demo | Download

HTML

Để tạo slideshow, trước hết chúng ta cần đoạn html markup như sau :

<div class="slideshow">
  <div class="slide active">
    <img src="http://s.cdpn.io/6234/railcars.jpg" alt="" class="horizontal" />
  </div>
  <div class="slide">
    <img src="http://s.cdpn.io/6234/old-man.jpg" alt="" class="vertical" />
  </div>
  <div class="slide">
    <img src="http://s.cdpn.io/6234/girl.jpg" alt="" class="horizontal" />
  </div>
  <div class="slide last">
    <img src="http://s.cdpn.io/6234/dandelion.jpg" alt=""  class="vertical" />
  </div>
  <div class="overlay overlay-shadow"></div>
  <div class="overlay overlay-highlight"></div>
</div>

Trong đoạn html bên trên, 2 thẻ div với class overlay dùng để tạo hiệu ứng fading. Các bạn chèn tiếp 2 nút bấm cho next và previous.

<div class="slideshow-nav">
  <a href="#" class="nav-link previous"><em class="icon-chevron-sign-left icon-2x"></em></a>
  <a href="#" class="nav-link next"><em class="icon-chevron-sign-right icon-2x"></em></a>
</div>

CSS

Các bạn sử dụng đoạn css sau để định dạng cho slideshow.

.slideshow {
  position: relative;
  awidth: 300px;
  height: 300px;
  margin: 20px auto 0px auto;
  text-align: center;
}
.slide {
  position: absolute;
  awidth: 300px;
  height: 300px;
  border-radius: 50%;
  border: 4px solid #fff;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}
.overlay {
  position: absolute;
  awidth: 300px;
  height: 300px;
  border-radius: 50%;
  border: 4px solid #fff;
  overflow: hidden;
}
.overlay-shadow {
  box-shadow: inset 0px 0px 10px #000;
  opacity: 0.6;
}
.overlay-highlight {
  background: -webkit-radial-gradient(30% 30%, closest-corner, #ffffff, #2f2727);
  background: -moz-radial-gradient(30% 30%, closest-corner, #ffffff, #2f2727);
  background: -ms-radial-gradient(30% 30%, closest-corner, #ffffff, #2f2727);
  opacity: 0.4;
}
.active {
  opacity: 1;
}
.slide img.horizontal {
  max-height: 100%;
  awidth: auto;
}
.slide img.vertical {
  max-awidth: 100%;
  height: auto;
}
.slideshow-nav {
  awidth: 500px;
  margin: -175px auto 0 auto;
  padding: 10px;
  text-align: center;
  overflow: auto;
}
.nav-link {
  transition: color 0.25s linear;
  padding: 0px 5px;
}
.nav-link:hover {
  color: #222;
}
.previous {
  float: left;
}
.next {
  float: right;
}

jQuery

Để tạo hiệu ứng slideshow, các bạn cần có đoạn jQuery sau :

$(document).ready(function(){
  var $prev = $('.previous');
  var $next = $('.next');
  var mode = "auto";
  $prev.on({
    click: function(e){
      e.preventDefault();
      mode = "manual";
      showPreviousImage();
    }
  });
  $next.on({
    click: function(e){
      e.preventDefault();
      mode = "manual";
      showNextImage();

    }
  });

  setInterval(function(){
    if(mode==="auto"){
      showNextImage();
    }
  },3000);

  function showNextImage(){
      var $actEl = $('.active');
      var $nextEl = $actEl.next('.slide');
      if($nextEl.length){
        $actEl.removeClass('active');
        $nextEl.addClass('active');
      }else{
        $actEl.removeClass('active');
        $('.slide:first-child').addClass('active');
      }
  }

  function showPreviousImage(){
      var $actEl = $('.active');
      var $prevEl = $actEl.prev('.slide');
      if($prevEl.length){
        $actEl.removeClass('active');
        $prevEl.addClass('active');
      }else{
        $actEl.removeClass('active');
        $('.slide.last').addClass('active');
      }
  }
});

Nếu có gì thắc mắc thì đừng ngần ngại để lại lời nhắn dưới dạng comment, mình sẽ giúp các bạn hoàn thành bài viết này.

Chúc các bạn thành công !

Chuyên Mục: Css, Javascript

Bài viết được đăng bởi webmaster