Chào các bạn, sau 2 tuần về Việt Nam chơi với những buồn vui lẫn lộn thì hôm nay mình 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 plugin này các bạn có thể tải về máy của mình từ mục download có trong bài viết hoặc từ demo. 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.

Xem Demo | Download

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 !

Chuyên Mục: Javascript

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