Hôm nay mình sẽ giới thiệu cho các bạn một mẫu slider với sự kết hợp giữa CSS3 và jQuery, mẫu slider này còn có khả năng Responsive rất cao, giúp các bạn có thể hiển thị trên hầu hết các kích thước màn hình khác nhau.
Download
HTML
Đầu tiên, chúng ta cần có khung chuẩn html như sau :
<div id="scroll-feature" class="horiz-scroll">
<div class="scroller">
<div class="left-scroll invisible"></div>
<div class="right-scroll"></div>
<div class="scroll-images scrollable-x">
<img src="img/image1.png" alt="Image 1">
<img src="img/image2.png" alt="Image 2">
<img src="img/image3.png" alt="Image 3">
<img src="img/image4.png" alt="Image 4">
<img src="img/image5.png" alt="Image 5">
<img src="img/image6.png" alt="Image 6">
<img src="img/image7.png" alt="Image 7">
<img src="img/image8.png" alt="Image 8">
<img src="img/image9.png" alt="Image 9">
<img src="img/image10.png" alt="Image 10">
<img src="img/image11.png" alt="Image 11">
</div>
</div>
</div>
CSS
Sau đó, các bạn copy đoạn css bên dưới để dịnh dạng slider.
body {
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', sans-serif;
}
h1, h2, p {
text-align: center;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 2em;
margin: 40px 0 0;
}
p {
font-size: 1.5em;
margin-top: .5em;
}
#responsive-sizing {
text-align: center;
}
#responsive-sizing .spec {
display: inline-block;
margin: 10px 10px 10px 0;
}
#responsive-sizing .breakpoint {
background-color: #333;
color: white;
border-radius: 5px 0 0 5px;
}
#responsive-sizing .vis-image-count {
border-radius: 0 5px 5px 0;
background-color: #ddd;
}
#responsive-sizing .breakpoint,
#responsive-sizing .vis-image-count {
padding: 5px 10px;
}
/* Begin Scroller Rules */
.horiz-scroll {
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
overflow: visible;
position: relative;
}
.horiz-scroll h2 {
font-weight: 600;
}
.horiz-scroll .scroller {
max-height: 30vw;
position: relative;
display: flex;
display: -webkit-flex;
flex: 1;
-webkit-flex: 1;
background-color: white;
}
.horiz-scroll .scroller .left-scroll {
left: 0;
}
.horiz-scroll .scroller .right-scroll {
right: 0;
}
.horiz-scroll .scroller .left-scroll,
.horiz-scroll .scroller .right-scroll {
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
padding: 0 2vw;
overflow-x: hidden;
z-index: 1;
justify-content: center;
-webkit-justify-content: center;
position: absolute;
height: 100%;
}
.horiz-scroll .scroller .left-scroll p,
.horiz-scroll .scroller .right-scroll p {
font-size: 3em;
color: white;
text-shadow: 0 0 10px #333;
margin: 0;
}
@media only screen and (max-width: 480px) {
.horiz-scroll .scroller .left-scroll p,
.horiz-scroll .scroller .right-scroll p {
color: black;
}
}
.horiz-scroll .scroller .scrollable-x {
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
}
.horiz-scroll .scroller .scrollable-x::-webkit-scrollbar {
display: none;
}
.horiz-scroll .scroller .scrollable-x::-webkit-scrollbar {
width: .375em;
max-width: 12px;
}
.horiz-scroll .scroller .scrollable-x::-webkit-scrollbar-track {
background-color: transparent;
}
.horiz-scroll .scroller .scrollable-x::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.25);
border-radius: 1em;
}
.horiz-scroll .scroller .scroll-images {
position: relative;
flex: 8;
-webkit-flex: 8;
order: 2;
-webkit-order: 2;
z-index: 0;
font-size: 0;
overflow-y: visible;
padding: 10% 0;
margin: -10% 0;
text-align: center;
}
.horiz-scroll .scroller .scroll-images img {
width: 25%;
top: 0;
z-index: 0;
-webkit-transition: all 100ms;
transition: all 100ms;
position: relative;
}
@media only screen and (max-width: 960px) {
.horiz-scroll .scroller .scroll-images img {
width: 33.333%;
}
}
@media only screen and (max-width: 720px) {
.horiz-scroll .scroller .scroll-images img {
width: 50%;
}
}
@media only screen and (max-width: 480px) {
.horiz-scroll .scroller .scroll-images img {
width: 50%;
margin: 0 25%;
}
}
.horiz-scroll .scroller .scroll-images img.focused {
z-index: 2;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
transform: scale(1.25);
height: 200%;
transition: all 250ms ease-in-out, drop-shadow 0.5s;
}
.invisible {
opacity: 0;
transition: .5s ease-in-out;
}
jQuery
Các bạn cũng cần chèn thêm đoạn jQuery sau để kích hoạt slider.
<script>
// The HorizontalScroller Class accepts a jQuery object as its only argument
// The argument is the parent container of the scrolling element
// The element requires an ID to differentiate HorizontalScroller instances
function HorizontalScroller(elem) {
this.scrollbox = elem; // The scrollers viewable area
this.scrollImages = this.scrollbox.find("img");
this.leftScrollControl = this.scrollbox.siblings(".left-scroll");
this.rightScrollControl = this.scrollbox.siblings(".right-scroll");
// Listener to change visibility of left and right controls
// when at scroll extremes
this.scrollbox.on("scroll", this.evaluateControlVisibility.bind(this));
};
HorizontalScroller.prototype = {
scrollboxWidth: function() {
return this.scrollbox.outerWidth(true);
},
currentScrollPosition: function() {
return this.scrollbox.scrollLeft();
},
currentRightPosition: function() {
return this.currentScrollPosition() + this.scrollboxWidth() - this.totalWidths();
},
// Maps the image width of each image in the scroller
imageWidths: function() {
return $.map(this.scrollImages, function(img) {
return $(img).outerWidth(true);
})
},
// Returns the total width of all the images, that is,
// the total of the visible and overflow content.
totalWidths: function() {
return this.imageWidths().reduce(function(a,b) { return a+b});
},
// Returns the average width of all the images
avgWidth: function() {
return this.totalWidths() / this.imageWidths().length;
},
// Determines the number of images in view area.
// Number of images changes with responsive CSS
imagesAcross: function() {
return Math.round( this.scrollboxWidth() / this.avgWidth() );
},
// maps the offset x-distance of each image
// from the left edge of the view area
imageOffsets: function() {
return $.map(this.scrollImages, function(img) {
return Math.round($(img).position().left);
});
},
// Returns the index of the first number in the given array
// greater than the given value, or, returns the index of
// the first positive number in the array
indexOfFirst: function(array, value) {
value = value || 0;
var firstIndex;
var i = 0;
while (firstIndex === undefined && array.length > i) {
if (array[i] >= value)
firstIndex = i;
i += 1;
}
return firstIndex;
},
// Returns the index of first image that is completely in view
// within the scrollbox
firstVisibleImageIndex: function() {
return this.indexOfFirst(this.imageOffsets());
},
// Returns the first image that is completely in view
// within the scrollbox
firstVisibleImage: function() {
return this.scrollImages[this.firstVisibleImageIndex()];
},
// Returns the index of the last image with its left edge in view
// within the scrollbox
lastVisibleImageIndex: function() {
return this.firstVisibleImageIndex() + this.imagesAcross();
},
// Returns the last image with its left edge in view
// within the scrollbox
lastVisibleImage: function() {
return this.scrollImages[this.lastVisibleImageIndex()];
},
// Returns the difference between the scrollboxes left edge
// and the left edge of the first fully visible image, that is,
// how far in the first fully visible image is
offset: function() {
var offset = $(this.firstVisibleImage()).position().left;
return Math.round(offset);
},
// Returns the combined scroll amount that the images have to travel
// in order to land evenly within the scroll window. The resulting
nextScrollPosition: function(direction) {
var nextScrollPosition = this.currentScrollPosition() + this.offset();
switch(direction) {
case "left":
nextScrollPosition -= this.scrollboxWidth();
if (($(this.firstVisibleImage()).outerWidth(true) - this.offset()) < 0) { nextScrollPosition -= $(this.firstVisibleImage()).outerWidth(true); } break; case "right": nextScrollPosition += this.scrollboxWidth(); if (this.offset() > 0) {
nextScrollPosition -= $(this.firstVisibleImage()).outerWidth(true);
}
break;
}
return nextScrollPosition;
},
// Triggers the animation
animateScroll: function(direction) {
resetFocusedImg();
var scroller = this;
setTimeout(function() {
scroller.scrollbox.animate({
scrollLeft: scroller.nextScrollPosition(direction)
}, this.scrollboxWidth())
}.bind(this), 100);
},
hideScrollControl: function(control) {
control.addClass("invisible");
},
showScrollControl: function(control) {
control.removeClass("invisible");
},
scrollControlVisibility: function(control) {
return control.hasClass("invisible");
},
scrollAtZero: function() {
return this.currentScrollPosition() == 0;
},
scrollAtMax: function() {
return this.currentRightPosition() >= -1;
},
evaluateControlVisibility: function() {
var left = this.leftScrollControl;
var right = this.rightScrollControl;
var leftIsInvisible = this.scrollControlVisibility(left);
var rightIsInvisible = this.scrollControlVisibility(right);
if (this.scrollAtZero()) this.hideScrollControl(left);
if (this.scrollAtMax()) this.hideScrollControl(right);
if (!this.scrollAtZero() && leftIsInvisible) this.showScrollControl(left);
if (!this.scrollAtMax() && rightIsInvisible) this.showScrollControl(right);
}
};
// End HorizontalScroller.prototype
var scrollers = {};
// Detects scrollers in the DOM
function detectScrollers() {
return $.map($(".horiz-scroll"), function(scroller) {
return $(scroller).attr("id");
});
}
// Generates a new HorizontalScroller for each scroller in DOM
function mapScrollers(scrollerIds) {
scrollerIds.forEach(function(elem, i , arr) {
var scroller = "#" + elem + " .scroll-images";
scrollers[elem] = new HorizontalScroller( $(scroller) );
});
}
// Gets the scroll direction to pass to animation function
function getScrollDirection(button) {
return (button.hasClass("left-scroll")) ? "left" : "right"
}
// Triggers the scroll animation for specific scroller
// in a specific direction
function triggerAnimation(button) {
var scrollId = button.closest(".horiz-scroll").attr("id");
var scrollDirection = getScrollDirection(button);
scrollers[scrollId].animateScroll(scrollDirection);
}
// Scroll buttons listener
function listenForScroll() {
$(".left-scroll, .right-scroll").on("click", function() {
var button = $(this);
triggerAnimation(button);
});
}
function resetFocusedImg() {
$(".focused").removeClass("focused");
}
// listener for click, slides up
var horizontalScrollImg = $(".horiz-scroll .scroll-images img");
horizontalScrollImg.on("click", function() {
if (!$(this).hasClass("focused"))
resetFocusedImg();
$(this).toggleClass("focused");
});
// Registers scrollers and initiates listeners
function scrollerInit() {
var scrollerIds = detectScrollers();
mapScrollers(scrollerIds);
listenForScroll();
}
// Begins the fun
scrollerInit();
</script>
Chúc các bạn thành công !