Bài viết này hướng dẫn bạn từng bước gắn Flexible Responsive jQuery Image Slider Plugin vào website của bạn. Đây là một plugin jquery có hiệu ứng rất mượt và hỗ trợ responsive tốt. Bạn có thể xem ngay demo về plugin này tại địa chỉ sau http://www.jqueryscript.net/demo/Flexible-Responsive-jQuery-Image-Slider-Plugin-Simple-Slider/.
Sau đây là các bước thực hiện:
Bước 1: Tạo thư mục css, sau đó tạo file slider.css trong thư mục này và dán đoạn lệnh bên dưới vào file slider.css.
/* ==========================================================================
Slider core styles
===========================================================================*/
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.slider-container {
position: relative;
overflow: hidden;
width: 100%;
margin: 0 auto;
}
.slider {
position: relative;
width: 9999px;
}
.slider:before,
.slider:after {
display: table;
content: ' ';
}
.slider:after {
clear: both;
}
.slider div {
position: relative;
float: left;
margin: 0;
padding: 0;
}
.slider div img {
display: block;
max-width: 100%;
height: auto;
}
.act,
#prev > span,
#next > span,
#slider-nav > a {
background: url(../images/arrows.png) no-repeat;
}
#next > span,
#prev > span {
display: block;
width: 16px;
height: 24px;
}
/* Arrows */
#next > span {
background-position: -20px 0;
}
#prev > span {
background-position: 0 0;
}
#next,
#prev {
position: absolute;
top: 50%;
margin-top: -20px;
padding: 10px 15px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-radius: 5px;
background: rgba(0, 0, 0, .39);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#99000000', endColorstr='#99000000'); /* ie8 */
-o-user-select: none;
}
#prev {
left: 10px;
}
#next {
right: 10px;
}
.caption {
position: absolute;
bottom: 0;
display: block;
width: 100%;
padding: 0 10px 30px;
color: #fff;
background: rgba(0, 0, 0, .39);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#99000000', endColorstr='#99000000'); /* ie8 */
}
.caption a {
display: block;
color: #fff;
}
.slider-nav {
line-height: 30px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
margin: 0;
padding: 0;
text-align: center;
/*background: #323232;*/
/*opacity: .9;*/
filter: alpha(opacity=90); /* ie8 */
}
.slider-nav a {
display: inline-block;
width: 12px;
height: 12px;
margin: 0 3px;
-webkit-transition: background .5s ease;
-moz-transition: background .5s ease;
-o-transition: background .5s ease;
transition: background .5s ease;
border: 2px solid #fff;
border-radius: 50%;
background: transparent;
}
.slider-nav .active {
width: 12px;
height: 12px;
background: #fff;
}
@media (max-width: 580px) {
.caption {
display: none;
}
}
Bước 2: Tạo folder js, sau đó tạo file slider.js và dán đoạn lệnh sau vào file slider.js
/* jQuery simple slider */
(function($) {
"use strict";
var
supportCss3 = function( value ) {
var el = document.createElement('div');
switch(value) {
case "transform":
var prefix = {
transform : "transform",
webkitTransform : "-webkit-transform",
mozTransform : "-moz-transform",
msTransform : "-ms-transform",
oTransform : "-0-transform"
}
break;
case "transition":
var prefix = {
transition : 'transition',
webkitTransition : 'webkitTransition',
mozTransition : 'mozTransition',
oTransition : 'oTransition'
}
break;
}
for(var name in prefix) {
if(el.style[name] !== undefined) {
return prefix[name];
}
}
return false;
},
transform = supportCss3("transform"),
transition = supportCss3("transition");
$.fn.sliderUi = function(o) {
o = $.extend({
autoPlay: true,
delay: 3000,
controlShow: true,
arrowsShow: true,
caption: false,
speed: 300,
cssEasing: "ease-out"
}, o || {});
return this.each(function() {
var
container = $(this),
slider = container.find(".slider"),
arrows = container.find(".switch"),
caption = slider.find(".caption"),
img = slider.find("img"),
imgLen = img.length,
imgWidth = container.outerWidth(true),
sliderWidth = imgLen * imgWidth,
controlPanel = null,
current = 0,
offset = null,
busy = false,
timer = null;
slider.css("width", sliderWidth + "px");
img.width( imgWidth );
slider.show();
$(window).on("resize", function() {
if(transition) {
slider.css(transition, "none");
}
imgWidth = container.width();
sliderWidth = imgLen * imgWidth;
img.width( imgWidth );
if(transition && transform) {
slider.css({
width: sliderWidth + "px",
transform: "translateX("+ -(imgWidth*current) + "px)"
});
} else {
slider.css({
width: sliderWidth + "px",
"margin-left": -(imgWidth*current) + "px"
});
}
})
!o.caption && caption.remove();
if( o.controlShow) {
controlPanel = $("<div/>", {
"class": "slider-nav"
})
.appendTo(container);
// Control links
var links = [];
for(var i = 0; imgLen > i; i++) {
var act = (current === i) ? "active" : "";
links.push("<a class='"+act+"' data-id='"+i+"'></a>");
}
controlPanel.get(0).innerHTML = links.join("");
var navControl = controlPanel.find("a");
navControl.on("click", function(e) {
e.preventDefault();
current = this.getAttribute("data-id");
show("current");
})
}
var show = function(side) {
if(busy) return;
if(side === "next") {
if(current < imgLen - 1) {
offset = - (imgWidth*(++current)) + "px";
}
else {
offset = 0;
current = 0;
}
}
else if(side === "current") {
offset = - (imgWidth*current) + "px";
}
else {
if(current > 0) {
offset = - (imgWidth*(--current)) + "px";
}
else {
offset = - (imgWidth*(imgLen - 1)) + "px";
current = imgLen -1;
}
}
if(o.controlShow) {
navControl.removeClass("active");
navControl.eq(current).addClass("active");
}
if(transition && transform) {
slider.css({
transition: transform + " " + o.speed + "ms " + o.cssEasing,
transform: "translateX(" + offset + ")"
})
}
else {
busy = true;
slider.animate({"margin-left": offset}, o.speed, "linear", function() {
busy = false;
})
}
}
if(o.arrowsShow) {
arrows.on("click", function(e) {
e.preventDefault();
var side = this.id;
show(side);
})
}
else {
arrows.remove();
}
var auto = function() {
if(timer) clearInterval(timer);
timer = setInterval(function() {
show("next");
}, o.delay);
}
if(o.autoPlay) {
auto();
container.hover(function() {
clearInterval(timer);
}, function() {
auto();
});
}
});
}
})(jQuery);
Bước 3: Khai báo lệnh sau trong thẻ <head></head> ở trang web của bạn.
<link href="css/slider.css" rel="stylesheet">
Bước 4: Khai báo đoạn script sau ở cuối thẻ <body> ở trang web của bạn
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/slider.js"></script>
<script>
$("#demo").sliderUi({
// Auto play when page loads
autoPlay: true,
// animation delay in ms
delay: 3000,
// display controls
controlShow: true,
// display arrows navigation
arrowsShow: true,
// display image captions
caption: false,
// animation speed
speed: 300,
// CSS3 easing effects
cssEasing: "ease-out"
});
</script>
Bước 5: Dán đoạn lệnh HTML sau vào nơi bạn muốn đặt plugin
<div class="slider-container" id="demo">
<!-- <a href="http://www.jqueryscript.net/slider/">Slider</a> -->
<div class="slider">
<div>
<img src="images/1.jpg" alt="">
<span class="caption">Image Caption 1</span>
</div>
<div>
<img src="images/2.jpg" alt="">
<span class="caption">Image Caption 2</span>
</div>
<div>
<img src="images/3.jpg" alt="">
<span class="caption">Image Caption 3</span>
</div>
</div>
<!-- Controls -->
<div class="switch" id="prev"><span></span></div>
<div class="switch" id="next"><span></span></div>
</div>
Chú ý: 3 giá trị ở attribute src images/1.jpg, images/2.jpg, images/3.jpg chỉ là mình ví dụ. Bạn tự lấy hình và sửa đường dẫn cho đúng nhé. Chú ý rằng 3 hình ảnh có size bằng nhau thì sẽ đẹp nhất.
EmoticonEmoticon