daviferreira / React Viewport Slider
Licence: other
react-viewport-slider is a react component (obviously) that displays a sequence of contents using 100% of the viewport with and height.
Stars: ✭ 144
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Viewport Slider
Vuetify Swipeout
👆 A swipe out example built with Vue CLI 3 + Vuetify + Swiper.
Stars: ✭ 117 (-18.75%)
Mutual labels: slider
Jocircularslider
A highly customisable and reusable circular slider for iOS applications.
Stars: ✭ 128 (-11.11%)
Mutual labels: slider
Mobile Web Favorites
This is a favorites, with a mobile web tips.
Stars: ✭ 1,724 (+1097.22%)
Mutual labels: viewport
Preact Scroll Viewport
Preact Component that renders homogeneous children only when visible
Stars: ✭ 118 (-18.06%)
Mutual labels: viewport
React Native Web Swiper
Swiper-Slider for React-Native and React-Native-Web
Stars: ✭ 125 (-13.19%)
Mutual labels: slider
Widget
A set of widgets based on jQuery&&javascript. 一套基于jquery或javascript的插件库 ：轮播、标签页、滚动条、下拉框、对话框、搜索提示、城市选择(城市三级联动)、日历等
Stars: ✭ 1,579 (+996.53%)
Mutual labels: slider
React Responsive Carousel
React.js Responsive Carousel (with Swipe)
Stars: ✭ 1,962 (+1262.5%)
Mutual labels: slider
Xam.plugin.simpleappintro
Just a nice and simple AppIntro for your Xamarin Forms project
Stars: ✭ 139 (-3.47%)
Mutual labels: slider
Isonscreen
Simple jQuery plugin to determine if an element is within the viewport
Stars: ✭ 115 (-20.14%)
Mutual labels: viewport
Use Is In Viewport
A react hook to find out if an element is in a given viewport with a simple api.
Stars: ✭ 129 (-10.42%)
Mutual labels: viewport
Svelte Carousel
A super lightweight, super simple Carousel for Svelte 3
Stars: ✭ 144 (+0%)
Mutual labels: slider
Openslider
A 3-axis 3D printed camera slider project that utilizes Marlin and is made with common components.
Stars: ✭ 140 (-2.78%)
Mutual labels: slider
Carousel View
CarouselView for android with showing horizontal and vertical, auto scrolling (with pause/resume), slider mode/ carousel mode options
Stars: ✭ 131 (-9.03%)
Mutual labels: slider
Viewport Slider, React
react-viewport-slider is a react component (obviously) that displays a sequence of contents using 100% of the viewport with and height.
Usage
CommonJS
Install via NPM:
npm install react-viewport-slider
Then:
import Slider from ‘react-viewport-slider’;
// http://alpha.wallhaven.cc/wallpaper/164335
const wallpaper =
'http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-164335.png';
…
render: function () {
return (
<Slider>
<Slider.Item style={{ backgroundColor: '#a2d7c7' }}>
<div className="content">Hello, world.</div>
</Slider.Item>
<Slider.Item style={{ backgroundColor: '#353330' }}>
<div className="content">Sup?</div>
</Slider.Item>
<Slider.Item className="has-overlay" style={{ backgroundImage: `url(${wallpaper})`, backgroundSize: 'cover' }}>
<div className="content">Yo.</div>
</Slider.Item>
</Slider>
);
}
…
development
npm install
npm run demo
npm test
LICENSE
MIT: https://github.com/daviferreira/react-viewport-slider/blob/master/LICENSE
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].