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. Bài viết này chia sẽ đến các bạn về từng bước tạo hiệu ứng JQuery Carousel Slider với CSS3 tuyệt đẹp cho trang web.

cach-tao-hieu-ung-carousel-slider-voi-css3-tuyet-dep

Cách tạo hiệu ứng Carousel Slider với CSS3 tuyệt đẹp

DemoDowload

Mã HTML

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

<div> <ul> <li> <a href="#"><img src="1.jpg" alt="" /></a> <div> <p> <a href="#">Caption 1</a> </p> </div> </li> <li> <a href="#"><img src="2.jpg" alt="" /></a> <div> <p> <a href="#">Caption 2</a> </p> </div> </li> <li> <a href="#"><img src="3.jpg" alt="" /></a> <div> <p> <a href="#">Caption 3</a> </p> </div> </li> <li> <a href="#"><img src="4.jpg" alt="" /></a>  <div>  <p> <a href="#">Caption 4</a> </p>  </div>  </li>  <li> <a href="#"><img src="5.jpg" alt="" /></a>  <div> <p> <a href="#">Caption 5</a> </p> </div> </li> <li> <a href="#"><img src="6.jpg" alt="" /></a> <div> <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="#">&nbsp;</a> <a href="#">&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>

Mã 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 CSS3 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, hy vọng là các bạn có thể nâng cao jQuery và CSS3 qua bài viết này.

ĐỂ LẠI PHẢN HỒI CỦA BẠN TẠI ĐÂY

Phản hồi về bài viết này

NO COMMENTS

LEAVE A REPLY


*