Loading...

Responsive Vertical Image Slider with CSS3 and jQuery

View: 586    Dowload: 1   Comment: 0   Post by: hanhga   Category: HTML-CSS template   Fields: Other

Download  responsive-vertical-image.zip (698.14 KB)

You need to Sign In to download the file responsive-vertical-image.zip
If you do not have an account then Sign up for free here

Today I'll show you a slider form with the combination of CSS3 and jQuery, this slider form capable Responsive very high, you can help the display on most different screen size.

HTML

First, we need a standardized framework html as follows:

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

Then you copy the css slider below to format.

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

You also need to add the following paragraph to activate jQuery 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
<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>

Good luck !

 

Responsive Vertical Image Slider with CSS3 and jQuery

Today I'll show you a slider form with the combination of CSS3 and jQuery, this slider form capable Responsive very high, you can help the display on most different screen size.

Posted on 06-10-2015 

Comment:

To comment you must be logged in members.

Files with category

  • Business/Consulting HTML & CSS Template

    Business/Consulting HTML & CSS Template

    View: 17    Download: 1   Comment: 0

    Category: HTML-CSS template     Fields: none

    It's elegant Business HTML Template. You can use it for creating Business, Finance, Corporate, Consulting websites or promoting your services. Looks perfect in all major browsers, tablets, and phones. Clean and commented code lets you customize it...

  • Photography Portfolio HTML/CSS Template

    Photography Portfolio HTML/CSS Template

    View: 21    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    Portfolio and Photography HTML5/CSS template build with latest bootstrap framework , best suited for photographers. Features 3 HTML5/CSS3 Templates Video background for the homepage (YouTube Only) Supersized slideshow for the homepage Built on...

  • Creative Login Form with Validation

    Creative Login Form with Validation

    View: 29    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    Upturn customized LOGIN FORM & INPUT STYLES is ready for Desktop, tablet and mobile devices. Simple to implement. Just copy the HTML and link to the CSS,JS file. You can easily edit, change and customize them for yourself. For students or anyone else...

  • Login Form Like Facebook

    Login Form Like Facebook

    View: 27    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    This is a simple Facebook form that can be imported to your site with ease. Please don't forget to give credit to original developer because I really worked hard to develop this project and please don't forget to like and share it if you found it...

  • Custom-able Invoice: Easy to Use

    Custom-able Invoice: Easy to Use

    View: 20    Download: 1   Comment: 0

    Category: HTML-CSS template     Fields: none

    Make billing easy with Free Invoice Template. Professional invoices for your business: Proforma, Service, Sales, Freelance. Please don't forget to give credit to original developer because I really worked hard to develop this project and please don't...

  • Awsome Responsive HTML Pages

    Awsome Responsive HTML Pages

    View: 17    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    A responsive html pages. The site have self sliding images on the index page. There are drop down menu with icons on them. The site have bootstrap that makes it responsive to different devices .

  • How To Create an Animated Search Form

    How To Create an Animated Search Form

    View: 258    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    How To Create an Animated Search Form, Learn how to create an animated search form with CSS.

  • How to reset / remove chrome's input highlighting / focus border? used CSS

    How to reset / remove chrome's input highlighting / focus border? used CSS

    View: 210    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    You have seen that chrome puts a thicker border on :focus but it kind of looks off in my case where I've used border-radius also. Is there anyway to remove that?

 
File suggestion for you
Loading...
File top downloads
Loading...
Loading...
Codetitle - library source code to share, download the file to the community
Copyright © 2018. All rights reserved. codetitle Develope by Vinagon .Ltd