blog.web68.vn

OUR SPONSORS

jQuery slider siêu nhỏ gọn


GIỚI THIỆU

Unslider là một trong những slider rất nên có trong bộ sưu tập các plugin jQuery của bạn, không chỉ có kích cỡ nhỏ gọn, đơn giản, Unslider còn cung cấp rất nhiều các tính năng hữu ích và cần thiết cho website của bạn như responsive, hỗ trợ tuỳ biến HTML, thao tác bằng bàn phím v.v...
 

unslider - simple and responsive jquery slider plugin

TÍNH NĂNG

  • Tương thích nhiều trình duyệt
  • Hỗ trợ tương tác bàn phím
  • Tự động điều chỉnh chiều cao
  • Cho phép slide tự động
  • Hỗ trợ cảm ứng
  • Hỗ trợ responsive

HƯỚNG DẪN SỬ DỤNG

1. Thêm jQuery & Unslider

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script src='http://unslider.com/unslider.min.js'></script>

2. HTML

Chúng ta sẽ có 4 slides tương ứng với bốn <li> như sau:

<div class="banner">
    <ul>
        <li style="background-image: url('http://unslider.com/img/sunset.jpg');">
            <h1>The jQuery slider that just slides.</h1>
            <p>No fancy effects or unnecessary markup, and it’s less than 3kb.</p>
            <a class="btn" href="#download">Download</a>
        </li>
        <li style="background-image: url('http://unslider.com/img/wood.jpg');">
            <h1>Fluid, flexible, fantastically minimal.</h1>
            <p>Use any HTML in your slides, extend with CSS. You have full control.</p>
            <a class="btn" href="#download">Download</a>
        </li>
        <li style="background-image: url('http://unslider.com/img/subway.jpg');">
            <h1>Open-source.</h1>
            <p>Everything to do with Unslider is hosted on GitHub.</p>
            <a class="btn" href="//github.com/idiot/unslider">Contribute</a>
        </li>
        <li style="background-image: url('http://unslider.com/img/shop.jpg');">
            <h1>Uh, that’s about it.</h1>
            <p>I just wanted to show you another slide.</p>
            <a class="btn" href="#download">Download</a>
        </li>
    </ul>
</div>

Để việc hiển thị đẹp hơn, chúng ta sẽ sử dụng CSS cho các slides

* {
	margin: 0;
	padding: 0;
	
	-webkit-font-smoothing: antialiased;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

::selection {
	background: #bfa57c;
	color: #fff;
}

body {
	color: #a48d66;
	font: 14px/23px proxima-nova-alt, "Proxima Nova Alt", sans-serif;
}
.banner
{
  position:relative;
  width:100%;
  overflow:auto;
  font-size:18px;
  line-height:24px;
  text-align:center;
  color:rgba(255,255,255,.6);
  text-shadow:0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);
  background:#5b4d3d;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}

.banner ul
{
  list-style:none;
  width:300%;
}

.banner ul li
{
  display:block;
  float:left;
  width:33%;
  min-height:350px;
  -moz-background-size:100% 100%;
  -o-background-size:100% 100%;
  -ms-background-size:100% 100%;
  background-size: 100% 100%;
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.1);
  padding:160px 0 110px;
}

.banner h1,.banner h2
{
  font-size:40px;
  line-height:52px;
  color:#fff;
}

.banner .btn
{
  display:inline-block;
  clear:both;
  color:#fff;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  text-decoration:none;
  border:2px solid rgba(255,255,255,.4);
  border-radius:5px;
  margin:25px 0 0;
  padding:9px 22px 7px;
}

.banner .btn:hover
{
  background:rgba(255,255,255,.05);
}

.banner .btn:active
{
  -webkit-filter:drop-shadow(0-1px2pxrgba(0,0,0,.5));
  -moz-filter:drop-shadow(0-1px2pxrgba(0,0,0,.5));
  -ms-filter:drop-shadow(0-1px2pxrgba(0,0,0,.5));
  -o-filter:drop-shadow(0-1px2pxrgba(0,0,0,.5));
  filter:drop-shadow(0-1px2pxrgba(0,0,0,.5));
}

.banner .btn,.banner .dot
{
  -webkit-filter:drop-shadow(01px2pxrgba(0,0,0,.3));
  -moz-filter:drop-shadow(01px2pxrgba(0,0,0,.3));
  -ms-filter:drop-shadow(01px2pxrgba(0,0,0,.3));
  -o-filter:drop-shadow(01px2pxrgba(0,0,0,.3));
  filter:drop-shadow(01px2pxrgba(0,0,0,.3));
}

.banner .dots
{
  position:absolute;
  left:0;
  right:0;
  bottom:20px;
}

.banner .dots li
{
  display:inline-block;
  width:10px;
  height:10px;
  text-indent:-999em;
  border:2px solid #fff;
  border-radius:6px;
  cursor:pointer;
  opacity:.4;
  -webkit-transition:background .5s, opacity .5s;
  -moz-transition:background .5s, opacity .5s;
  transition:background .5s, opacity .5s;
  margin:0 4px;
}

.banner .dots li.active
{
  background:#fff;
  opacity:1;
}

3. Gọi hàm khởi tạo Slider

$(function() {    
    $('.banner').unslider({
      speed: 500,               //  The speed to animate each slide (in milliseconds)
      delay: 3000,              //  The delay between slide animations (in milliseconds)
      complete: function() {},  //  A function that gets called after every slide animation
      keys: true,               //  Enable keyboard (left, right) arrow shortcuts
      dots: true,               //  Display dot navigation
      fluid: true              //  Support responsive design. May break non-responsive designs
    });
});

DEMO

 

See the Pen unslider by Thanh Nguyen (@genievn) on CodePen.

 

 


Tags
jquery  plugin  javascript  slideshow  slider  responsive  
comments powered by Disqus