All Projects → junedchhipa → Stacked Cards

junedchhipa / Stacked Cards

Give your content boxes a stacked cards look with each card swapping with other.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Stacked Cards

react-native-imaged-carousel-card
Fully customizable & Lovely Imaged Carousel Card for React Native
Stars: ✭ 70 (-15.66%)
Mutual labels:  card, carousel
Swift Layout Animation Transition 30days
Stars: ✭ 68 (-18.07%)
Mutual labels:  card
Macro Carousel
Carousel as a Vanilla Web Component.
Stars: ✭ 53 (-36.14%)
Mutual labels:  carousel
Morphist
A simple, high-performance and cross-browser jQuery slider / slideshow / carousel plugin for child objects powered by Animate.css.
Stars: ✭ 60 (-27.71%)
Mutual labels:  carousel
Vuejs Carousel
Complete photo carousel build with VueJS and web standards in mind
Stars: ✭ 53 (-36.14%)
Mutual labels:  carousel
Chameleonmini
The ChameleonMini is a versatile contactless smartcard emulator compliant to NFC. The ChameleonMini was developed by https://kasper-oswald.de. The device is available at https://shop.kasper.it. For further information see the Getting Started Page https://rawgit.com/emsec/ChameleonMini/master/Doc/Doxygen/html/_page__getting_started.html or the Wiki tab above.
Stars: ✭ 1,133 (+1265.06%)
Mutual labels:  card
Tiny Swiper
Ingenious JavaScript Carousel powered by wonderful plugins. Lightweight yet extensible. Import plugins as needed, No more, no less.
Stars: ✭ 1,061 (+1178.31%)
Mutual labels:  carousel
Profile Card
Tailwind CSS Starter Template - Profile Card (Single page website for your profile/links)
Stars: ✭ 69 (-16.87%)
Mutual labels:  card
Gh Card
GitHub Repository Card for Any Web Site
Stars: ✭ 1,154 (+1290.36%)
Mutual labels:  card
Fraud Detection
Credit Card Fraud Detection using ML: IEEE style paper + Jupyter Notebook
Stars: ✭ 58 (-30.12%)
Mutual labels:  card
Material About Library
Makes it easy to create beautiful about screens for your apps
Stars: ✭ 1,099 (+1224.1%)
Mutual labels:  card
React Soft Slider
Simple, fast and impartial slider
Stars: ✭ 54 (-34.94%)
Mutual labels:  carousel
Paging Collection View Layout
custom collection view layout that allows you to page by cell, not screen
Stars: ✭ 65 (-21.69%)
Mutual labels:  carousel
L2t Paper Slider
Polymer element for displaying slides in a carousel
Stars: ✭ 53 (-36.14%)
Mutual labels:  carousel
React Native Carousel View
react-native carousel, support in both Android and iOS
Stars: ✭ 70 (-15.66%)
Mutual labels:  carousel
Vue Paycard
Credit card component made with Vue.js
Stars: ✭ 52 (-37.35%)
Mutual labels:  card
React Carousel
Lightweight carousel component for react
Stars: ✭ 56 (-32.53%)
Mutual labels:  carousel
Vue Snap
⚡️ Lightweight Carousel based on CSS Scroll Snapping (Vue 2/3)
Stars: ✭ 60 (-27.71%)
Mutual labels:  carousel
Mage
Magic Another Game Engine
Stars: ✭ 1,180 (+1321.69%)
Mutual labels:  card
Vue Agile
🎠 A carousel component for Vue.js
Stars: ✭ 1,167 (+1306.02%)
Mutual labels:  carousel

JPG

Give your content boxes a stacked cards look. A different approach to carousels/sliders.

GIF

Demo

View demo

ver 1.1 updates:
  • Swipe support added for mobile.
  • Removed "swapping of the cards on click" and replaced with "moving elements" to preserve the order of rendering.
  • Removed coverflow effect (transforms causing lot of trouble with z-index)

StackedCards Usage

1. Import css & js

Add stackedCards.css & stackedCards.js into your <head> section. You may add stackedCards.js before your closing </body> tag

2. Setup HTML Markup

	<div class="mycards">
		<ul>
			<li>your content</li>
			<li>your content</li>
			<li>your content</li>
			<li>your content</li>
			<li>your content</li>
		</ul>
	</div>

3. Initialize StackedCards

	var stackedCard = new stackedCards({
	 	selector: '.mycards',
	 	layout: "slide",
	 	transformOrigin: "center",
	});

	stackedCard.init();
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].