Slider làm từ jQuery và TweenMax – slideOut.js

Cập nhật: Lượt xem: 1599 [ Javascript ]

Hôm nay Laptrinhweb tiếp tục mang đến cho các bạn một mẫu slider với kiểu ngang màn hình. Đây là một slider được làm hoàn toàn từ jQuery Plugin là TweenMax và slideOut.js. Các bạn chỉ cần việc nhúng những plugin này vào là có thể sử dụng được ngay.

Slider làm từ jQuery và TweenMax – slideOut.js

HTML

Để tạo được slider, các bạn cần xây dựng theo khung chuẩn html như sau :

<div id="panles">
  <div class="panelHolder active">
    <div class="contentHolder">
      <img src="tab-1.png" class="tab">
      <a href="#"><img src="img-1.png" class="model"> </a>
    </div>
  </div>
  <div class="panelHolder">
    <div class="contentHolder">
      <img src="tab-2.png" class="tab">
      <a href="#"><img src="img-2.png" class="model"> </a>
    </div>
  </div>
  <div class="panelHolder">
    <div class="contentHolder">
      <img src="tab-3.png" class="tab">
      <a href="#"><img src="img-3.png" class="model"> </a>
    </div>
  </div>
  <div class="panelHolder">
    <div class="contentHolder">
      <img src="tab-4.png" class="tab">
      <a href="#"><img src="img-4.png" class="model"> </a>
    </div>
  </div>
  <div class="panelHolder last">
    <div class="contentHolder">
      <img src="tab-5.png" class="tab">
      <a href="#"><img src="img-5.png" class="model"> </a>
    </div>
  </div>
</div>

Sau đó là chèn vào những plugin cần thiết cho slider.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.15.1/TweenMax.min.js"></script>
<script src="scripts/slideOut.js"></script>

CSS

 Các bạn cũng cần chèn thêm một đoạn css cơ bản cho việc định dạng slider như sau :

#panles {
  width: 1212px;
  height: 676px;
  position: relative;
  overflow: hidden;
  background: white;
}
 
.panelHolder {
  float: left;
  position: relative;
  padding-right: 8px;
  width: 100px;
  height: 676px;
  overflow: hidden;
  background: white;
}
 
.contentHolder {
  float: left;
  position: relative;
  background: white;
  width: 772px;
}
 
.tab {
  width: 100px;
  position: absolute;
  z-index: 1;
}
 
.model {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 676px;
}
 
.panelTitle.last { padding: 0; }
 
.active.panelHolder { width: 772px; }
 
.active .tab { opacity: 0; }
 
.active .model {
  visibility: visible;
  z-index: 0;
  opacity: 1;
}

Rất đơn giản và dễ thực hiện phải không các bạn, hy vọng các bạn có thể ứng dụng slider này vào trong những mẫu thiết kế website hay blog của các bạn.

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