Responsive Vertical Image Slider với CSS3 và jQuery

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.

css3, image slider, jQuery, Responsive, code css3

 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 !

 

 HỖ TRỢ TRỰC TUYẾN