Hiệu ứng jQuery Carousel Slider với CSS3 Transitions

CSS 13-8-2015

Hôm nay mình sẽ giới thiệu cho các bạn một plugin nhỏ gọn giúp tạo hiệu ứng slider cho trang web. Với plugin này,cùng với sự hỗ trợ của CSS3 transitions trong việc tạo hiệu ứng , các bạn sẽ có ngay một slider đẹp cho chính trang web hay blog của mình.

css3, CSS3 Transitions, image slider, jQuery Plugins, css tips

Download

HTML

Đầu tiên, chúng ta cần có khung chuẩn html như sau :

<div id="slider">

  <ul>

    <li> <a href="#"><img src="1.jpg" alt="" /></a>

      <div class="overlay">

        <p> <a href="#">Caption 1</a> </p>

      </div>

    </li>

    <li> <a href="#"><img src="2.jpg" alt="" /></a>

      <div class="overlay">

        <p> <a href="#">Caption 2</a> </p>

      </div>

    </li>

    <li> <a href="#"><img src="3.jpg" alt="" /></a>

      <div class="overlay">

        <p> <a href="#">Caption 3</a> </p>

      </div>

    </li>

    <li> <a href="#"><img src="4.jpg" alt="" /></a>

      <div class="overlay">

        <p> <a href="#">Caption 4</a> </p>

      </div>

    </li>

    <li> <a href="#"><img src="5.jpg" alt="" /></a>

      <div class="overlay">

        <p> <a href="#">Caption 5</a> </p>

      </div>

    </li>

    <li> <a href="#"><img src="6.jpg" alt="" /></a>

      <div class="overlay">

        <p> <a href="#">Caption 6</a> </p>

      </div>

    </li>

  </ul>

</div>

Sau đó chèn thêm link next/prev dành cho việc điều khiển slider.

<a href="#" class="prev">&nbsp;</a>

<a href="#" class="next">&nbsp;</a>

Sau đó chèn thư viện jQuery và plugin Carousel vào trang web, cùng với đoạn khởi tạo plugin.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="carousel.js"></script>

<script>

$('#content').Carousel('init', {});

</script>

CSS

Đầu tiên, chúng ta sẽ định dạng cho nút next/prev

.prev {

  background: url(../images/left-on.png) no-repeat scroll 0 0 transparent;

  display: block;

  float: left;

  height: 40px;

  margin-top: 100px;

  width: 23px;

}



.prev-disable { background: url(../images/left-off.png) no-repeat scroll 0 0 transparent; }



.next {

  background: url(../images/right-on.png) no-repeat scroll 0 0 transparent;

  display: block;

  float: right;

  height: 40px;

  margin-top: 100px;

  width: 23px;

}



.next-disable { background: url(../images/right-off.png) no-repeat scroll 0 0 transparent; }

Các bạn dùng đoạn css sau để tạo hiệu ứng transitions.

#slider ul li { position: absolute; }



#slider ul li.prev-slide {

  opacity: 1;

  transform: translate(0px, 0px);

  -ms-transform: translate(0px, 0px);

  -webkit-transform: translate(0px, 0px);

  -o-transform: translate(0px, 0px);

  -moz-transform: translate(0px, 0px);

  transition: opacity 400ms ease 0s, transform 400ms ease 0s;

  -moz-transition: opacity 400ms ease 0s, -moz-transform 400ms ease 0s;

  -webkit-transition: opacity 400ms ease 0s, -webkit-transform 400ms ease 0s;

  -o-transition: opacity 400ms ease 0s, -o-transform 400ms ease 0s;

}



#slider ul li.selected {

  opacity: 1;

  transform: translate(310px, 0px);

  -ms-transform: translate(310px, 0px);

  -webkit-transform: translate(310px, 0px);

  -o-transform: translate(310px, 0px);

  -moz-transform: translate(310px, 0px);

  transition: opacity 400ms ease 0s, transform 400ms ease 0s;

  -moz-transition: opacity 400ms ease 0s, -moz-transform 400ms ease 0s;

  -webkit-transition: opacity 400ms ease 0s, -webkit-transform 400ms ease 0s;

  -o-transition: opacity 400ms ease 0s, -o-transform 400ms ease 0s;

}



#slider ul li.next-slide {

  opacity: 1;

  transform: translate(620px, 0px);

  -ms-transform: translate(620px, 0px);

  -webkit-transform: translate(620px, 0px);

  -o-transform: translate(620px, 0px);

  -moz-transform: translate(620px, 0px);

  transition: opacity 400ms ease 0s, transform 400ms ease 0s;

  -moz-transition: opacity 400ms ease 0s, -moz-transform 400ms ease 0s;

  -webkit-transition: opacity 400ms ease 0s, -webkit-transform 400ms ease 0s;

  -o-transition: opacity 400ms ease 0s, -o-transform 400ms ease 0s;

}



#slider ul li.prev-hidden {

  opacity: 0;

  transform: translate(0px, 0px);

  -ms-transform: translate(0px, 0px);

  -webkit-transform: translate(0px, 0px);

  -o-transform: translate(0px, 0px);

  -moz-transform: translate(0px, 0px);

  transition: opacity 400ms ease 0s, transform 400ms ease 0s;

  -moz-transition: opacity 400ms ease 0s, -moz-transform 400ms ease 0s;

  -webkit-transition: opacity 400ms ease 0s, -webkit-transform 400ms ease 0s;

  -o-transition: opacity 400ms ease 0s, -o-transform 400ms ease 0s;

}



#slider ul li.next-hidden {

  opacity: 0;

  transform: translate(620px, 0px);

  -ms-transform: translate(620px, 0px);

  -webkit-transform: translate(620px, 0px);

  -o-transform: translate(620px, 0px);

  -moz-transform: translate(620px, 0px);

  transition: opacity 400ms ease 0s, transform 400ms ease 0s;

.  -moz-transition: opacity 400ms ease 0s, -moz-transform 400ms ease 0s;

  -webkit-transition: opacity 400ms ease 0s, -webkit-transform 400ms ease 0s;

  -o-transition: opacity 400ms ease 0s, -o-transform 400ms ease 0s;

}

Sau đó định dạng cho phần tiêu đề hình ảnh.

#slider .overlay {

  background: none repeat scroll 0 0 rgba(10, 10, 10, 0.5);

  padding: 10px;

  position: relative;

  top: -43px;

  width: 100%;

}



#slider .overlay > p {

  font-weight: bold;

  text-align: center;

  text-shadow: 2px 5px 2px rgba(132, 130, 125, 0.98);

}



#slider .overlay > p a { color: #fff; }

Thế là xong, mình hy vọng là các bạn có thể nâng cao jQuery và CSS3 qua bài viết này.