Skip to content

Instantly share code, notes, and snippets.

@Ashilex

Ashilex/flipsy.markdown

Created December 31, 2020 10:47
Show Gist options
  • Save Ashilex/e5483b73b7ff288bfc5471e12fe3437b to your computer and use it in GitHub Desktop.
Save Ashilex/e5483b73b7ff288bfc5471e12fe3437b to your computer and use it in GitHub Desktop.
Download ZIP
Flipsy
Raw
index.html
<div class="flipsy flipsy--coverflow">
<ul>
<li id="1">
<img src="http://brokensquare.com/Code/jquery-flipster/demo/img/text1.gif">
</li>
<li id="2">
<a href="#test"><img src="http://brokensquare.com/Code/jquery-flipster/demo/img/text2.gif"></a>
</li>
<li id="3">
<img src="http://brokensquare.com/Code/jquery-flipster/demo/img/text3.gif">
</li>
<li id="4">
<img src="http://brokensquare.com/Code/jquery-flipster/demo/img/text4.gif">
</li>
<li id="5">
<img src="http://brokensquare.com/Code/jquery-flipster/demo/img/text5.gif">
</li>
<li id="6">
<img src="http://brokensquare.com/Code/jquery-flipster/demo/img/text6.gif">
</li>
<li id="7">
<img src="http://brokensquare.com/Code/jquery-flipster/demo/img/text7.gif">
</li>
</ul>
</div>
Raw
script.js
console.clear();
/*////////////////////////////////////////*/
function $$(selector, context){
if ( !(this instanceof $$) ) { return new $$(selector); }
if ( selector ) {
var els = ( typeof selector === 'string' ? (context || document).querySelectorAll(selector) :
selector instanceof Node || selector === window ? [selector] : selector ),
length = this.length = els.length,
i = 0;
for ( ; i < length; i++ ) { this[i] = els[i]; }
}
return this;
}
function createMethod(method, property){
return function(){
var args = arguments, target;
this.each(function(el){
target = ( property ? el[property] : el );
target[method].apply(target,args);
});
return this;
}
}
var fn = $$.prototype = $$.fn = Object.create(Array.prototype);
fn.constructor = $$,
fn.each = fn.forEach;
fn.addClass = createMethod('add','classList');
fn.removeClass = createMethod('remove','classList');
fn.attr = createMethod('setAttribute');
$$('li').addClass('hello','jim').removeClass('jim').attr('data-test',true);
/*////////////////////////////////////////*/
// Check for browser CSS support and cache the result for subsequent calls.
var getPrefixedProp = (function() {
var support = {};
return function(prop) {
if ( support[prop] !== undefined ) { return support[prop]; }
var div = document.createElement('div'),
style = div.style,
ucProp = prop.charAt(0).toUpperCase() + prop.slice(1),
prefixes = ["webkit", "moz", "ms", "o"],
props = (prop + ' ' + (prefixes).join(ucProp + ' ') + ucProp).split(' ');
for (var i in props) {
if ( props[i] in style ) { return support[prop] = props[i]; }
}
return support[prop] = false;
};
}());
function throttle(func, delay) {
var timer = null;
return function () {
var context = this, args = arguments;
if (timer === null) {
timer = setTimeout(function () {
func.apply(context, args);
timer = null;
}, delay);
}
};
}
/*////////////////////////////////////////*/
var transformProp;
var transitionProp;
var classRemover = new RegExp('\\b(flipsy(-item)?--)(.*?)(\\s|$)', 'g');
function Flipsy(el, opts) {
if ( !(this instanceof Flipsy) ) { return new Flipsy(opts); }
for (var key in opts) {
if ( opts.hasOwnProperty(key) ) { this.opts[key] = opts[key]; }
}
transformProp = getPrefixedProp('transform');
transitionProp = getPrefixedProp('transition');
this.el = $$(el)[0];
this.index();
this.container = $$(this.opts.container)[0];
if ( !this.container ) {
this.container = ( this.el.firstElementChild, this.el.lastElementChild ? this.el.firstElementChild : document.createElement('div') );
this.container.className = 'flipsy__container';
this.items.forEach(function(el){
this.container.appendChild(el);
}, this);
this.el.appendChild(this.container);
}
this.stopTransition();
if ( this.opts.buttons ) { this.createButtons(); }
this.resize = throttle(this.resize.bind(this), 150);
this.resize();
window.addEventListener('resize',this.resize);
this.current = this.opts.current;
setTimeout( this.resetTransition.bind(this), 200);
this.dispatch('init');
}
Flipsy.prototype = {
// Default options
opts: {
current: 0,
itemSelector: 'li',
loop: true,
stack: true,
buttons: true,
center: true,
},
themes: {
carousel: {
loop: 2,
stack: true,
center: true
},
coverflow: {
center: true,
stack: true
}
},
createButtons(){
var prev = document.createElement('button');
prev.innerText = 'Previous';
prev.addEventListener('click', this.prev.bind(this));
this.el.appendChild(prev);
var next = document.createElement('button');
next.innerText = 'Next';
next.addEventListener('click', this.next.bind(this));
this.el.appendChild(next);
},
index(){
this.el.classList.add('flipsy' + ( this.opts.theme ? ' flipsy--'+this.opts.theme : '' ) );
this.items = $$(this.opts.itemSelector, this.el);
this.items.forEach(function(el,i){
el.classList.add('flipsy-item');
el.addEventListener('click', this.jump.bind(this, el));
},this);
this.dispatch('index');
},
stopTransition(){
this.container.style[transitionProp] = 'none';
},
resetTransition(){
this.container.style[transitionProp] = null;
},
resize(){
this.center = this.el.clientWidth / 2;
this.offsets = [];
this.items.forEach(function(el,i){
this.offsets[i] = -el.offsetLeft - ( el.clientWidth/2 );
},this);
if ( this.opts.center ) { this.offset = this.offsets && this.offsets[this.current]; }
this.dispatch('resize');
},
getIndex(index){
var len = this.items.length;
return ( this.opts.loop ?
( ((index + len) % len ) % len ) :
Math.max(0, Math.min( len - 1, index ) )
);
},
update(){
var len = this.items.length,
loopCount = ( this.opts.loop !== true && this.opts.loop > 0 && this.opts.loop );
this.items.forEach(function(el,i){
var distance = Math.abs(this.current - i),
past = ( i < this.current ? true : false );
//offset = ( past ? _currentIndex - i : i - _currentIndex );
if ( loopCount ) {
if ( this.current <= loopCount && i > this.current + loopCount ) {
past = true;
distance = ( len + this.current) - i;
} else if ( this.current >= len - loopCount && i < this.current - loopCount ) {
past = false;
distance = (len - this.current) + i;
}
}
if ( this.opts.stack ) { el.style.zIndex = len - distance; }
el.className = el.className.replace(classRemover,'');
el.classList.add('flipsy-item--' +
( past ? 'prev' :
i == this.current ? 'current' : 'next' ),
'flipsy-item--' + distance
);
},this);
// Center the container
if ( this.opts.center ) { this.offset = this.offsets && this.offsets[this.current]; }
this.dispatch('update', [this.current]);
return this;
},
next(){ this.current += 1; return this; },
prev(){ this.current -= 1; return this; },
jump(item, e){
if ( e && item !== this.currentItem ) { e.preventDefault(); }
this.current = ( item instanceof Node ? this.items.indexOf(item) : item );
this.dispatch('jump', [this.current]);
return this;
},
/* Event callback handling */
dispatch(event,args){
var listeners = this.events && this.events[event],
len;
if ( listeners ) {
len = listeners.length;
args = args || [this];
while ( len-- ) { listeners[len].apply(this,args); }
}
},
on(event,callback) {
this.events = this.events || {};
this.events[event] = this.events[event] || [];
this.events[event].push(callback);
},
addEventListener(){ this.on.apply(this,arguments) },
off(event, callback){
if ( this.events && this.events[event] ) {
var i = this.events[events].indexOf(callback);
if ( i > -1 ) { this.events[event].splice( i, 1); }
}
},
removeEventListener(){ this.off.apply(this, arguments); }
// destroy(){
// this.el.classList.remove('flipsy');
// this.items.forEach(function(el,i){
// el.classList.remove('flipsy-item', 'flipsy-item--prev', 'flipsy-item--next', 'flipsy-item--current');
// el.removeEventListener('click', this.jump.bind(this, el));
// },this);
// }
}
Object.defineProperties(Flipsy.prototype, {
'theme': {
get: function(){ return this._theme; },
set: function(newValue){
this._theme = newValue;
var opts;
if ( newValue ) {
this.$el.className = this.$el.className.replace(classRemover,'');
this.$el.classList.add('flipster flipster--' + newValue);
if ( this.themes[newValue] ) {
opts = this.themes[newValue];
for (var key in opts) {
if ( opts.hasOwnProperty(key) ) { this.opts[key] = opts[key]; }
}
}
}
this.update();
}
},
'current': {
get: function(){ return this._current; },
set: function(newValue){
this._current = this.getIndex( newValue );
this.update();
}
},
'currentItem': {
get: function(){ return this.items[this.current]; },
set: function(newValue){ this.jump(newValue); }
},
// 'center': {
// get: function(){ return this.el.clientWidth / 2; }
// },
'offset': {
get: function(){ return this._offset; },
set: function(newValue){
this._offset = newValue + this.center;
this.container.style[transformProp] = 'translateX(' + this._offset + 'px)';
}
}
});
var flip = new Flipsy( '.flipsy' ); //, { loop: 1, center: false, stack: false });
//flip.current = 1;
// flip.on('update',function(current){
// console.log('update!', current);
// });
flip.currentItem = flip.items[4];
/* jshint browser: true, jquery: true, devel: true */
/* global window, jQuery */
/*
(function($, window, undefined) {
'use strict';
function throttle(func, delay) {
var timer = null;
return function() {
var context = this,
args = arguments;
if ( timer === null ) {
timer = setTimeout(function() {
func.apply(context, args);
timer = null;
}, delay);
}
};
}
// Check for browser CSS support and cache the result for subsequent calls.
var checkStyleSupport = (function() {
var support = {};
return function(prop) {
if ( support[prop] !== undefined ) { return support[prop]; }
var div = document.createElement('div'),
style = div.style,
ucProp = prop.charAt(0).toUpperCase() + prop.slice(1),
prefixes = ["webkit", "moz", "ms", "o"],
props = (prop + ' ' + (prefixes).join(ucProp + ' ') + ucProp).split(' ');
for (var i in props) {
if ( props[i] in style ) { return support[prop] = props[i]; }
}
return support[prop] = false;
};
}());
var svgNS = 'http://www.w3.org/2000/svg',
svgSupport = (function() {
var support;
return function() {
if ( support !== undefined ) { return support; }
var div = document.createElement('div');
div.innerHTML = '<svg/>';
support = ( div.firstChild && div.firstChild.namespaceURI === svgNS );
return support;
};
}());
var $window = $(window),
transformSupport = checkStyleSupport('transform'),
defaults = {
itemContainer: 'ul',
// [string|object]
// Selector for the container of the flippin' items.
itemSelector: 'li',
// [string|object]
// Selector for children of `itemContainer` to flip
start: 'center',
// ['center'|number]
// Zero based index of the starting item, or use 'center' to start in the middle
fadeIn: 400,
// [milliseconds]
// Speed of the fade in animation after items have been setup
loop: false,
// [true|false]
// Loop around when the start or end is reached
autoplay: false,
// [false|milliseconds]
// If a positive number, Flipster will automatically advance to next item after that number of milliseconds
pauseOnHover: true,
// [true|false]
// If true, autoplay advancement will pause when Flipster is hovered
style: 'coverflow',
// [coverflow|carousel|flat|...]
// Adds a class (e.g. flipster--coverflow) to the flipster element to switch between display styles
// Create your own theme in CSS and use this setting to have Flipster add the custom class
spacing: -0.6,
// [number]
// Space between items relative to each item's width. 0 for no spacing, negative values to overlap
click: true,
// [true|false]
// Clicking an item switches to that item
keyboard: true,
// [true|false]
// Enable left/right arrow navigation
scrollwheel: true,
// [true|false]
// Enable mousewheel/trackpad navigation; up/left = previous, down/right = next
touch: true,
// [true|false]
// Enable swipe navigation for touch devices
nav: false,
// [true|false|'before'|'after']
// If not false, Flipster will build an unordered list of the items
// Values true or 'before' will insert the navigation before the items, 'after' will append the navigation after the items
buttons: false,
// [true|false|'custom']
// If true, Flipster will insert Previous / Next buttons with SVG arrows
// If 'custom', Flipster will not insert the arrows and will instead use the values of `buttonPrev` and `buttonNext`
buttonPrev: 'Previous',
// [text|html]
// Changes the text for the Previous button
buttonNext: 'Next',
// [text|html]
// Changes the text for the Next button
onItemSwitch: false
// [function]
// Callback function when items are switched
// Arguments received: [currentItem, previousItem]
},
classes = {
main: 'flipster',
active: 'flipster--active',
container: 'flipster__container',
nav: 'flipster__nav',
navChild: 'flipster__nav__child',
navItem: 'flipster__nav__item',
navLink: 'flipster__nav__link',
navCurrent: 'flipster__nav__item--current',
navCategory: 'flipster__nav__item--category',
navCategoryLink: 'flipster__nav__link--category',
button: 'flipster__button',
buttonPrev: 'flipster__button--prev',
buttonNext: 'flipster__button--next',
item: 'flipster__item',
itemCurrent: 'flipster__item--current',
itemPast: 'flipster__item--past',
itemFuture: 'flipster__item--future',
itemContent: 'flipster__item__content'
},
classRemover = new RegExp('\\b(' + classes.itemCurrent + '|' + classes.itemPast + '|' + classes.itemFuture + ')(.*?)(\\s|$)', 'g'),
whiteSpaceRemover = new RegExp('\\s\\s+', 'g');
$.fn.flipster = function(options) {
var isMethodCall = (typeof options === 'string' ? true : false);
if ( isMethodCall ) {
var args = Array.prototype.slice.call(arguments, 1);
return this.each(function() {
var methods = $(this).data('methods');
if ( methods[options] ) {
return methods[options].apply(this, args);
} else {
return this;
}
});
}
var settings = $.extend({}, defaults, options);
return this.each(function() {
var self = $(this),
methods,
_container,
_containerWidth,
_resizeInterval,
_items,
_itemOffsets = [],
_currentItem,
_currentIndex = 0,
_nav,
_navItems,
_navLinks,
_playing = false,
_startDrag = false;
function buildButtonContent(dir) {
var text = ( dir === 'next' ? settings.buttonNext : settings.buttonPrev );
if ( settings.buttons === 'custom' || !svgSupport ) { return text; }
return '<svg viewBox="0 0 13 20" xmlns="' + svgNS + '" aria-labelledby="title"><title>' + text + '</title><polyline points="10,3 3,10 10,17"' + (dir === 'next' ? ' transform="rotate(180 6.5,10)"' : '') + '/></svg>';
}
function buildButton(dir) {
dir = dir || 'next';
return $('<button class="' + classes.button + ' ' + ( dir === 'next' ? classes.buttonNext : classes.buttonPrev ) + '" role="button" />')
.html(buildButtonContent(dir))
.on('click', function(e) {
jump(dir);
e.preventDefault();
});
}
function buildButtons() {
if ( settings.buttons && _items.length > 1 ) {
self.find('.' + classes.button).remove();
self.append(buildButton('prev'), buildButton('next'));
}
}
function noTransition() {
self.css('transition', 'none');
_container.css('transition', 'none');
_items.css('transition', 'none');
}
function resetTransition() {
self.css('transition', '');
_container.css('transition', '');
_items.css('transition', '');
}
function calculateBiggestItemHeight() {
var biggestHeight = 0,
itemHeight;
_items.each(function() {
itemHeight = $(this).height();
if ( itemHeight > biggestHeight ) { biggestHeight = itemHeight; }
});
return biggestHeight;
}
function resize(skipTransition) {
if ( skipTransition ) { noTransition(); }
_containerWidth = _container.width();
_container.height(calculateBiggestItemHeight());
// Prevent maximum callstack error. #79 #74
if ( !_containerWidth ) {
_resizeInterval = _resizeInterval || setInterval(function(){ resize(skipTransition); },500);
return;
} else if ( _resizeInterval ) {
clearInterval(_resizeInterval);
_resizeInterval = false;
}
_items.each(function(i) {
var item = $(this),
width,
left;
item.attr('class', function(i, c) {
return c && c.replace(classRemover, '').replace(whiteSpaceRemover, ' ');
});
width = item.outerWidth();
if ( settings.spacing !== 0 ) {
item.css('margin-right', ( width * settings.spacing ) + 'px');
}
left = item.position().left;
_itemOffsets[i] = -1 * ((left + (width / 2)) - (_containerWidth / 2));
if ( i === _items.length - 1 ) {
center();
if ( skipTransition ) { setTimeout(resetTransition, 1); }
}
});
}
function center() {
var total = _items.length,
item, newClass, zIndex;
_items.each(function(i){
item = $(this);
newClass = ' ';
if ( i === _currentIndex ) {
newClass += classes.itemCurrent;
zIndex = (total + 1);
} else if ( i < _currentIndex ) {
newClass += classes.itemPast + ' ' +
classes.itemPast + '-' + (_currentIndex - i);
zIndex = i;
} else {
newClass += classes.itemFuture + ' ' +
classes.itemFuture + '-' + ( i - _currentIndex );
zIndex = (total - i);
}
item.css('z-index', zIndex )
.attr('class',function(i, c){
return c && c.replace(classRemover, '').replace(whiteSpaceRemover,' ') + newClass;
});
});
if ( _currentIndex >= 0 ) {
if ( !_containerWidth || _itemOffsets[_currentIndex] === undefined ) { resize(true); }
if ( transformSupport ) {
_container.css('transform', 'translateX(' + _itemOffsets[_currentIndex] + 'px)');
} else {
_container.css({ 'left': _itemOffsets[_currentIndex] + 'px' });
}
}
updateNav();
}
function jump(to) {
var _previous = _currentIndex;
if ( _items.length <= 1 ) { return; }
if ( to === 'prev' ) {
if ( _currentIndex > 0 ) { _currentIndex--; }
else if ( settings.loop ) { _currentIndex = _items.length - 1; }
} else if ( to === 'next' ) {
if ( _currentIndex < _items.length - 1 ) { _currentIndex++; }
else if ( settings.loop ) { _currentIndex = 0; }
} else if ( typeof to === 'number' ) { _currentIndex = to;
} else if ( to !== undefined ) {
// if object is sent, get its index
_currentIndex = _items.index(to);
}
_currentItem = _items.eq(_currentIndex);
if ( _currentIndex !== _previous && settings.onItemSwitch ) {
settings.onItemSwitch.call(self, _items[_currentIndex], _items[_previous]);
}
center();
return self;
}
function play(interval) {
settings.autoplay = interval || settings.autoplay;
clearInterval(_playing);
_playing = setInterval(function() {
var prev = _currentIndex;
jump('next');
if ( prev === _currentIndex && !settings.loop ) { clearInterval(_playing); }
}, settings.autoplay);
return self;
}
function stop(){
clearInterval(_playing);
_playing = 0;
return self;
}
function pause(forced) {
stop();
if ( settings.autoplay && forced ) { _playing = -1; }
return self;
}
function show() {
resize(true);
self.hide()
.css('visibility', '')
.addClass(classes.active)
.fadeIn(settings.fadeIn);
}
function index() {
_container = self.find(settings.itemContainer).addClass(classes.container);
_items = _container.find(settings.itemSelector);
if ( _items.length <= 1 ) { return; }
_items
.addClass(classes.item)
// Wrap inner content
.each(function() {
var item = $(this);
if ( !item.children('.' + classes.itemContent ).length) {
item.wrapInner('<div class="' + classes.itemContent + '" />');
}
});
// Navigate directly to an item by clicking
if ( settings.click ) {
_items.on('click.flipster touchend.flipster', function(e) {
if ( !_startDrag ) {
if ( !$(this).hasClass(classes.itemCurrent) ) { e.preventDefault(); }
jump(this);
}
});
}
// Insert navigation if enabled.
buildButtons();
buildNav();
if ( _currentIndex >= 0 ) { jump(_currentIndex); }
return self;
}
function keyboardEvents(elem) {
if ( settings.keyboard ) {
elem[0].tabIndex = 0;
elem.on('keydown.flipster', throttle(function(e) {
var code = e.which;
if ( code === 37 || code === 39 ) {
jump( code === 37 ? 'prev' : 'next' );
e.preventDefault();
}
}, 250, true));
}
}
function wheelEvents(elem) {
if ( settings.scrollwheel ) {
var _wheelInside = false,
_actionThrottle = 0,
_throttleTimeout = 0,
_delta = 0,
_dir, _lastDir;
elem
.on('mousewheel.flipster wheel.flipster', function() { _wheelInside = true; })
.on('mousewheel.flipster wheel.flipster', throttle(function(e) {
// Reset after a period without scrolling.
clearTimeout(_throttleTimeout);
_throttleTimeout = setTimeout(function() {
_actionThrottle = 0;
_delta = 0;
}, 300);
e = e.originalEvent;
// Add to delta (+=) so that continuous small events can still get past the speed limit, and quick direction reversals get cancelled out
_delta += (e.wheelDelta || (e.deltaY + e.deltaX) * -1); // Invert numbers for Firefox
// Don't trigger unless the scroll is decent speed.
if ( Math.abs(_delta) < 25 ) { return; }
_actionThrottle++;
_dir = (_delta > 0 ? 'prev' : 'next');
// Reset throttle if direction changed.
if ( _lastDir !== _dir ) { _actionThrottle = 0; }
_lastDir = _dir;
// Regular scroll wheels trigger less events, so they don't need to be throttled. Trackpads trigger many events (inertia), so only trigger jump every three times to slow things down.
if ( _actionThrottle < 6 || _actionThrottle % 3 === 0 ) { jump(_dir); }
_delta = 0;
}, 50));
// Disable mousewheel on window if event began in elem.
$window.on('mousewheel.flipster wheel.flipster', function(e) {
if ( _wheelInside ) {
e.preventDefault();
_wheelInside = false;
}
});
}
}
function touchEvents(elem) {
if ( settings.touch ) {
var _startDragY = false,
_touchJump = throttle(jump, 300),
x, y, offsetY, offsetX;
elem.on({
'touchstart.flipster': function(e) {
e = e.originalEvent;
_startDrag = (e.touches ? e.touches[0].clientX : e.clientX);
_startDragY = (e.touches ? e.touches[0].clientY : e.clientY);
//e.preventDefault();
},
'touchmove.flipster': throttle(function(e) {
if ( _startDrag !== false ) {
e = e.originalEvent;
x = (e.touches ? e.touches[0].clientX : e.clientX);
y = (e.touches ? e.touches[0].clientY : e.clientY);
offsetY = y - _startDragY;
offsetX = x - _startDrag;
if ( Math.abs(offsetY) < 100 && Math.abs(offsetX) >= 30 ) {
_touchJump((offsetX < 0 ? 'next' : 'prev'));
_startDrag = x;
e.preventDefault();
}
}
}, 100),
'touchend.flipster touchcancel.flipster ': function() { _startDrag = false; }
});
}
}
function init() {
var style;
self.css('visibility', 'hidden');
index();
if ( _items.length <= 1 ) {
self.css('visibility', '');
return;
}
style = (settings.style ? 'flipster--' + settings.style.split(' ').join(' flipster--') : false);
self.addClass([
classes.main,
(transformSupport ? 'flipster--transform' : ' flipster--no-transform'),
style, // 'flipster--'+settings.style : '' ),
(settings.click ? 'flipster--click' : '')
].join(' '));
// Set the starting item
if ( settings.start ) {
// Find the middle item if start = center
_currentIndex = ( settings.start === 'center' ? Math.floor(_items.length / 2) : settings.start );
}
jump(_currentIndex);
var images = self.find('img');
if ( images.length ) {
var imagesLoaded = 0;
// Resize after all images have loaded.
images.on('load', function() {
imagesLoaded++;
if ( imagesLoaded >= images.length ) { show(); }
});
// Fallback to show Flipster while images load in case it takes a while.
setTimeout(show, 750);
} else {
show();
}
// Attach event bindings.
$window.on('resize.flipster', throttle(resize, 400));
if ( settings.autoplay ) { play(); }
if ( settings.pauseOnHover ) {
_container
.on('mouseenter.flipster', function(){
if (_playing) { pause(true); }
else { stop() }
})
.on('mouseleave.flipster', function() {
if ( _playing === -1 ) { play(); }
});
}
keyboardEvents(self);
wheelEvents(_container);
touchEvents(_container);
}
// public methods
methods = {
jump: jump,
next: function() { return jump('next'); },
prev: function() { return jump('prev'); },
play: play,
stop: stop,
pause: pause,
index: index
};
self.data('methods', methods);
// Initialize if flipster is not already active.
if ( !self.hasClass(classes.active) ) { init(); }
});
};
})(jQuery, window);
/**/
Raw
style.less
.flipsy {
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
perspective: 600px;
position: relative;
}
.flipsy__container {
margin: 0;
padding: 0;
list-style-type: none;
transform-style: preserve-3d;
transform-origin: 0 0;
transition: transform 0.6s cubic-bezier(.36,.2,.04,.96);
transition-property: transform, opacity, z-index;
display: block;
white-space: nowrap;
}
.flipsy-item {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
white-space: auto;
transition: inherit;
max-width: 30vw;
img { max-width: 100%; height: auto; }
}
.flipsy--coverflow {
.flipsy-item { margin: 0 -25px 0; }
.flipsy-item--prev { transform: scale(0.7) rotateY(45deg); }
.flipsy-item--next { transform: scale(0.7) rotateY(-45deg); }
.flipsy-item--current { opacity: 1; transform: scale(1) rotateY(0) translateZ(0); }
}
.flipsy--ell {
.flipsy-item {
position: absolute;
top: 0;
left: 0;
z-index: -1;
overflow: hidden;
img { max-width: none; object-fit: cover; }
}
.flipsy-item--prev { transform: translateX(-100%); }
.flipsy-item--next { transform: translateX(100%); }
.flipsy-item--1 { z-index: 2; }
.flipsy-item--current {
position: relative;
z-index: 2;
}
}
.flipsy--carousel {
.flipsy__container {
height: 100px;
}
.flipsy-item {
position: absolute;
top: 0;
left: 0;
}
.flipsy-item--prev { transform: translateX(-50%) scale(0.7) rotateY(45deg); }
.flipsy-item--next { transform: translateX(50%) scale(0.7) rotateY(-45deg); }
.flipsy-item--current { opacity: 1; transform: scale(1) rotateY(0) translateZ(0); }
}
/* for demo purposes */
// .flipsy-item {
// display: inline-flex;
// justify-content: center;
// align-items: center;
// font-weight: bold;
// //width: 100px;
// //height: 100px;
// border: solid 2px;
// background: #FFF;
// }
// .flipsy-item--prev { color: blue; }
// .flipsy-item--current { color: red; }
// .flipsy-item--next { color: green; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment