Responsive Vertical Image Slider với CSS3 và jQuery

byThanh Tùng • • 2 min read
0
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.
responsive-vertical-image-slider-voi-css3-va-jquery
HTML
Đầu tiên, chúng ta cần có khung chuẩn html như sau :
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
<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.
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
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.
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
// 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())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();
4.94 / 169 rates
Mới hơn Cũ hơn