Skip to content

Commit c4a6150

Browse files
author
Chris Ferdinandi
committed
Numerous performance-related updates
* Switched to a data attribute for the toggle selector (separates scripts from styles). * Added namespacing to init IIFE. * Moved feature test to script itself for better progressive enhancement. * Updated looping method.
1 parent 3fceace commit c4a6150

File tree

6 files changed

+161
-74
lines changed

6 files changed

+161
-74
lines changed

‎README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@ A simple, responsive, touch-enabled image slider. Slider is a fork of [Swipe](ht
55
Getting started with Slider is really easy. [View the online tutorial](http://cferdinandi.github.com/slider/) or dig through the `index.html` file.
66

77
## Changelog
8+
* v4.0 (February 6, 2014)
9+
* Switched to a data attribute for the toggle selector (separates scripts from styles).
10+
* Added namespacing to init IIFE.
11+
* Moved feature test to script itself for better progressive enhancement.
12+
* Updated looping method.
813
* v3.5 (December 6, 2013)
914
* Set img, video, and iframe width to 100%.
1015
* v3.4 (December 6, 2013)

‎css/slider-css.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* =============================================================
22
3-
Slider v3.5
3+
Slider v4.0
44
A simple, responsive, touch-enabled image slider, forked from Swipe.
55
66
Script by Brad Birdsall.
@@ -17,14 +17,14 @@
1717
1818
* ============================================================= */
1919
/* When HTML5 JS features supported, hide slider */
20-
.js .slider {
20+
.js-slider .slider {
2121
position: relative;
2222
overflow: hidden;
2323
visibility: hidden;
2424
}
2525

2626
/* When HTML5 JS features supported, hide slides */
27-
.js .slides {
27+
.js-slider .slides {
2828
overflow: hidden;
2929
position: relative;
3030
}
@@ -36,7 +36,7 @@
3636

3737
/* When HTML5 JS features supported, set width to 100%
3838
* and float slides to the left. */
39-
.js .slides > div {
39+
.js-slider .slides > div {
4040
width: 100%;
4141
float: left;
4242
position: relative;

‎index.html‎

Lines changed: 113 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,6 @@
2929
<!-- stylesheets -->
3030
<link rel="stylesheet" href="css/slider-css.css" type="text/css">
3131

32-
<script>
33-
if ( 'querySelector' in document && 'addEventListener' in window ) {
34-
document.documentElement.className += 'js';
35-
}
36-
</script>
37-
3832
<!-- HTML5 Shim for IE -->
3933
<!--[if IE]>
4034
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
@@ -52,79 +46,133 @@ <h1 style="text-align: center; font-size: 3em;">Slider</h1>
5246
<div><img src="img/image1.jpg"></div>
5347
<div><img src="img/image2.jpg"></div>
5448
<div><img src="img/image3.jpg"></div>
49+
<div><iframe width="560" height="315" src="http://www.youtube.com/embed/8qjge9U_MiA" frameborder="0" allowfullscreen></iframe></div>
5550
</div>
51+
<div data-slider-nav></div>
52+
<div data-slider-count></div>
5653
</div>
57-
<div data-slider-nav></div>
58-
<div data-slider-count></div>
5954

6055
</section>
6156

6257

6358
<!-- Javascript -->
59+
<script src='js/fluidvids.js'></script>
6460
<script src='js/slider.js'></script>
6561
<script>
66-
if ( 'querySelector' in document && 'addEventListener' in window ) {
67-
68-
// Slider Variable
69-
var slider = document.querySelector('[data-slider]');
62+
window.sliderInit = (function (window, document, undefined) {
63+
64+
'use strict';
65+
66+
// Feature Test
67+
if ( 'querySelector' in document && 'addEventListener' in window && Array.prototype.forEach ) {
68+
69+
// SELECTORS
70+
var sliders = document.querySelectorAll('[data-slider]');
71+
var mySwipe = Array;
72+
73+
74+
// EVENTS, LISTENERS, AND INITS
75+
76+
// Add class to HTML element to activate conditional CSS
77+
document.documentElement.className += ' js-slider';
78+
79+
// Activate all sliders
80+
Array.prototype.forEach.call(sliders, function (slider, index) {
81+
82+
// SELECTORS
83+
84+
var slideCount = slider.querySelector('[data-slider-count]'); // Slider count wrapper
85+
var slideNav = slider.querySelector('[data-slider-nav]'); // Slider nav wrapper
86+
87+
88+
// METHODS
89+
90+
// Display count of slides
91+
var createSlideCount = function () {
92+
// Variables
93+
var slideTotal = mySwipe[index].getNumSlides();
94+
var slideCurrent = mySwipe[index].getPos();
95+
96+
// Content
97+
if ( slideCount !== null ) {
98+
slideCount.innerHTML = slideCurrent + ' of ' + slideTotal;
99+
}
100+
};
101+
102+
// Display Slider navigation
103+
var createNavButtons = function () {
104+
if ( slideNav !== null ) {
105+
slideNav.innerHTML = '<a data-slider-nav-prev href="#">Previous</a> | <a data-slider-nav-next href="#">Next</a>';
106+
}
107+
};
108+
109+
// Stop YouTube and Vimeo videos from playing when leaving the slide
110+
var stopVideo = function () {
111+
var currentSlide = mySwipe[index].getPos() - 1;
112+
var video = slider.querySelector( '[data-index="' + currentSlide + '"] iframe');
113+
if ( video !== null ) {
114+
var videoSrc = video.src;
115+
video.src = videoSrc;
116+
}
117+
};
118+
119+
// Handle next button
120+
var handleNextBtn = function (event) {
121+
event.preventDefault();
122+
stopVideo();
123+
mySwipe[index].next();
124+
};
125+
126+
// Handle previous button
127+
var handlePrevBtn = function (event) {
128+
event.preventDefault();
129+
stopVideo();
130+
mySwipe[index].prev();
131+
};
132+
133+
// Handle keypress
134+
var handleKeypress = function (event) {
135+
if ( event.keyCode == 37 ) {
136+
mySwipe[index].prev();
137+
}
138+
if ( event.keyCode == 39) {
139+
mySwipe[index].next();
140+
}
141+
};
142+
143+
144+
// EVENTS, LISTENERS, AND INITS
145+
146+
// Activate Slider
147+
mySwipe[index] = Swipe(slider, {
148+
continuous: true,
149+
callback: function(index, elem) {
150+
createSlideCount(); // Update with new position on slide change
151+
}
152+
});
153+
154+
// Create slide count and nav
155+
createSlideCount();
156+
createNavButtons();
157+
var btnNext = slider.querySelector('[data-slider-nav-next]'); // Next slide button
158+
var btnPrev = slider.querySelector('[data-slider-nav-prev]'); // Previous slide button
159+
160+
// Toggle Previous & Next Buttons
161+
if ( btnNext ) {
162+
btnNext.addEventListener('click', handleNextBtn, false);
163+
}
164+
if ( btnPrev ) {
165+
btnPrev.addEventListener('click', handlePrevBtn, false);
166+
}
70167

71-
// If a Slider exists
72-
if (slider) {
168+
// Toggle Left & Right Keypress
169+
window.addEventListener('keydown', handleKeypress, false);
73170

74-
// Activate Slider
75-
window.mySwipe = Swipe(slider, {
76-
continuous: true,
77-
callback: function(index, elem) {
78-
countSlides();
79-
},
80171
});
81172

82-
83-
// Function to display slide count
84-
var countSlides = function () {
85-
// Variables
86-
var slideTotal = mySwipe.getNumSlides();
87-
var slideCurrent = mySwipe.getPos();
88-
var slideCount = document.querySelector('[data-slider-count]');
89-
// Content
90-
if (slideCount) {
91-
slideCount.innerHTML = slideCurrent + ' of ' + slideTotal;
92-
}
93-
}
94-
// Run slide count function on load
95-
countSlides();
96-
97-
98-
// Create Previous & Next Buttons
99-
var slideNav = document.querySelector('[data-slider-nav]')
100-
if (slideNav) {
101-
slideNav.innerHTML = '<a data-slider-nav-prev href="#">Previous</a> | <a data-slider-nav-next href="#">Next</a>';
102-
}
103-
104-
// Toggle Previous & Next Buttons
105-
var btnNext = document.querySelector('[data-slider-nav-next]');
106-
var btnPrev = document.querySelector('[data-slider-nav-prev]');
107-
if (btnNext) {
108-
btnNext.addEventListener('click', function(e) { e.preventDefault(); mySwipe.next(); }, false);
109-
}
110-
if (btnPrev) {
111-
btnPrev.addEventListener('click', function(e) { e.preventDefault(); mySwipe.prev(); }, false);
112-
}
113-
114-
115-
// Toggle Left & Right Keypress
116-
window.addEventListener('keydown', function (e) {
117-
if (e.keyCode == 37) {
118-
mySwipe.prev();
119-
}
120-
if (e.keyCode == 39) {
121-
mySwipe.next();
122-
}
123-
}, false);
124-
125173
}
126174

127-
}
175+
})(window, document);
128176
</script>
129177
</body>
130-
</html>
178+
</html>

‎js/fluidvids.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/* =============================================================
2+
* fluid-vids.js v1.0
3+
* Fluid and responsive YouTube and Vimeo videos.
4+
* Script by Todd Motto
5+
* https://github.com/toddmotto/fluidvids
6+
* MIT / GPLv2 License
7+
* ============================================================= */
8+
(function() {
9+
var iframes = document.getElementsByTagName('iframe');
10+
11+
for (var i = 0; i < iframes.length; ++i) {
12+
var iframe = iframes[i];
13+
var players = /www.youtube.com|player.vimeo.com/;
14+
if(iframe.src.search(players) !== -1) {
15+
var videoRatio = (iframe.height / iframe.width) * 100;
16+
17+
iframe.style.position = 'absolute';
18+
iframe.style.top = '0';
19+
iframe.style.left = '0';
20+
iframe.width = '100%';
21+
iframe.height = '100%';
22+
23+
var div = document.createElement('div');
24+
div.className = 'video-wrap';
25+
div.style.width = '100%';
26+
div.style.position = 'relative';
27+
div.style.paddingTop = videoRatio + '%';
28+
29+
var parentNode = iframe.parentNode;
30+
parentNode.insertBefore(div, iframe);
31+
div.appendChild(iframe);
32+
}
33+
}
34+
})();

‎js/slider.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* =============================================================
22
3-
Slider v3.5
3+
Slider v4.0
44
A simple, responsive, touch-enabled image slider, forked from Swipe.
55
66
Script by Brad Birdsall.

‎sass/_slider.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* =============================================================
22
3-
Slider v3.5
3+
Slider v4.0
44
A simple, responsive, touch-enabled image slider, forked from Swipe.
55
66
Script by Brad Birdsall.
@@ -18,14 +18,14 @@
1818
* ============================================================= */
1919

2020
/* When HTML5 JS features supported, hide slider */
21-
.js .slider {
21+
.js-slider .slider {
2222
position: relative;
2323
overflow: hidden;
2424
visibility: hidden;
2525
}
2626

2727
/* When HTML5 JS features supported, hide slides */
28-
.js .slides {
28+
.js-slider .slides {
2929
overflow: hidden;
3030
position: relative;
3131
}
@@ -37,7 +37,7 @@
3737

3838
/* When HTML5 JS features supported, set width to 100%
3939
* and float slides to the left. */
40-
.js .slides > div {
40+
.js-slider .slides > div {
4141
width: 100%;
4242
float: left;
4343
position: relative;

0 commit comments

Comments
 (0)