ReactJS Image Carousel
How do I make an reactjs image carousel?
This is a simple bare-bones React carousel. It allows you to navigate though a series of images via arrows, keyboard arrows, and or thumbnails.. What is a reactjs image carousel? How do you make a reactjs image carousel? This script and codes were developed by Brian on 22 November 2022, Tuesday.
ReactJS Image Carousel - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ReactJS Image Carousel</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app"></div> <script src='https://fb.me/react-with-addons-0.14.3.js'></script> <script src="js/index.js"></script>
</body>
</html>
ReactJS Image Carousel - Script Codes CSS Codes
body { color: white; padding: 50px; background: #1c1c1f;
}
.main { font: 16px / 1 Arial; position: relative;
}
.carousel { display: inline-block; overflow: hidden; outline: 0px;
}
.carousel--image { border: 1px solid #fff; position: relative;
}
.carousel--thumbs { margin-top: 10px; text-align: center;
}
.carousel--thumb { border: 1px solid transparent; cursor: pointer; display: inline-block; height: 120px; margin: 0 5px; width: 150px; -webkit-transition: -webkit-transform .2s ease-in-out; transition: -webkit-transform .2s ease-in-out; transition: transform .2s ease-in-out; transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
}
.carousel--thumb:hover { -webkit-transform: translate(0, -3px); transform: translate(0, -3px);
}
.carousel--selected { border-color: #fff;
}
.carousel--arrow-next { right: 0; top: 0; -webkit-transform: translate(20px, 0); transform: translate(20px, 0);
}
.carousel--arrow-next:after { content: '\203A'; text-align: right;
}
.carousel--arrow-next:hover:after { background: -webkit-linear-gradient(left, transparent 0%, rgba(255, 255, 255, 0.6) 100%); background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.6) 100%);
}
.carousel--arrow-previous { left: 0; top: 0; -webkit-transform: translate(-20px, 0); transform: translate(-20px, 0);
}
.carousel--arrow-previous:after { content: '\2039';
}
.carousel--arrow-previous:hover:after { background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.5) 0%, transparent 100%); background: linear-gradient(to right, rgba(255, 255, 255, 0.5) 0%, transparent 100%);
}
.carousel--arrow-previous, .carousel--arrow-next { color: transparent; cursor: pointer; height: 100%; position: absolute; -webkit-transition: color .3s ease-in, -webkit-transform .3s ease-in; transition: color .3s ease-in, -webkit-transform .3s ease-in; transition: transform .3s ease-in, color .3s ease-in; transition: transform .3s ease-in, color .3s ease-in, -webkit-transform .3s ease-in; width: 20%;
}
.carousel--arrow-previous:hover, .carousel--arrow-next:hover { color: #000; -webkit-transform: translate(0, 0); transform: translate(0, 0);
}
.carousel--arrow-previous:after, .carousel--arrow-next:after { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font: bold 60px/100% Arial; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0 15px;
}
.animation--next-enter { -webkit-transform: translate(100%, 0); transform: translate(100%, 0); -webkit-transition: -webkit-transform 1.5s; transition: -webkit-transform 1.5s; transition: transform 1.5s; transition: transform 1.5s, -webkit-transform 1.5s;
}
.animation--next-enter.animation--next-enter-active { -webkit-transform: translate(0, 0); transform: translate(0, 0);
}
.animation--next-leave { left: 0; position: absolute; top: 0; -webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: -webkit-transform 1.5s; transition: -webkit-transform 1.5s; transition: transform 1.5s; transition: transform 1.5s, -webkit-transform 1.5s;
}
.animation--next-leave.animation--next-leave-active { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0);
}
.animation--previous-enter { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); -webkit-transition: -webkit-transform 1.5s; transition: -webkit-transform 1.5s; transition: transform 1.5s; transition: transform 1.5s, -webkit-transform 1.5s;
}
.animation--previous-enter.animation--previous-enter-active { -webkit-transform: translate(0, 0); transform: translate(0, 0);
}
.animation--previous-leave { left: 0; position: absolute; top: 0; -webkit-transform: translate(0, 0); transform: translate(0, 0); -webkit-transition: -webkit-transform 1.5s; transition: -webkit-transform 1.5s; transition: transform 1.5s; transition: transform 1.5s, -webkit-transform 1.5s;
}
.animation--previous-leave.animation--previous-leave-active { -webkit-transform: translate(100%, 0); transform: translate(100%, 0);
}
ReactJS Image Carousel - Script Codes JS Codes
'use strict';
var carouselImages = ['http://placekitten.com/g/600/400', 'http://placebear.com/600/400', 'http://placehold.it/600x400'];
var App = React.createClass({ displayName: 'App', render: function render() { return React.createElement( 'div', { className: 'main' }, React.createElement(Carousel, { images: carouselImages }) ); }
});
var Carousel = React.createClass({ displayName: 'Carousel', propTypes: { images: React.PropTypes.arrayOf([React.PropTypes.string]).isRequired, showThumbnails: React.PropTypes.bool, slideshowActive: React.PropTypes.bool, slideshowDelay: React.PropTypes.number }, getDefaultProps: function getDefaultProps() { return { defaultSelectedIndex: 0, showThumbnails: true, slideshowActive: true, slideshowDelay: 4000 }; }, getInitialState: function getInitialState() { return { animationDirection: 'previous', selectedIndex: this.props.defaultSelectedIndex }; }, componentDidMount: function componentDidMount() { if (this.props.slideshowActive) { this.progressSlideshow(); } }, render: function render() { var Animation = React.addons.CSSTransitionGroup; return React.createElement( 'div', this.getProps(), React.createElement( 'div', { className: 'carousel--image' }, this.renderArrow('previous'), React.createElement( Animation, { transitionName: 'animation--' + this.state.animationDirection }, this.renderCurrentImage() ), this.renderArrow('next') ), this.renderThumbs() ); }, renderCurrentImage: function renderCurrentImage() { var selected = this.state.selectedIndex; var props = { key: selected, src: this.props.images[selected] }; return React.createElement('img', props); }, renderArrow: function renderArrow(direction) { var props = { className: 'carousel--arrow-' + direction, onClick: this.goInDirection.bind(null, direction) }; return React.createElement('div', props); }, renderThumbs: function renderThumbs() { var thumbnails = null; if (this.props.showThumbnails) { thumbnails = React.createElement( 'div', { className: 'carousel--thumbs' }, this.props.images.map(this.renderThumb) ); } return thumbnails; }, renderThumb: function renderThumb(src, index) { var selected = index === this.state.selectedIndex ? ' carousel--selected' : ''; var props = { className: 'carousel--thumb' + selected, key: index, onClick: this.handleThumbClick.bind(null, index), src: src }; return React.createElement('img', props); }, getProps: function getProps() { var props = { className: 'carousel', onKeyDown: this.handleKeyDown, tabIndex: '0' }; if (this.props.slideshowActive) { props.onMouseEnter = this.handleMouseEnter; props.onMouseLeave = this.handleMouseLeave; } return props; }, handleKeyDown: function handleKeyDown(event) { var left = 37; var up = 38; var right = 39; var down = 40; var key = event.which; if (key === down || key === left) { this.goInDirection('previous'); } else if (key === up || key === right) { this.goInDirection('next'); } }, handleMouseEnter: function handleMouseEnter() { clearTimeout(this.timeout); }, handleMouseLeave: function handleMouseLeave() { this.progressSlideshow(); }, handleThumbClick: function handleThumbClick(index) { this.goToIndex(index); }, progressSlideshow: function progressSlideshow() { this.setState({ animationDirection: 'next' }); this.timeout = setTimeout(function () { this.goInDirection('next'); this.progressSlideshow(); }.bind(this), this.props.slideshowDelay); }, goToIndex: function goToIndex(index) { var direction = this.state.selectedIndex > index ? 'previous' : 'next'; this.setState({ animationDirection: direction, selectedIndex: index }); }, goInDirection: function goInDirection(direction) { var totalImages = this.props.images.length; var modifier = direction === 'next' ? 1 : -1; var newIndex = this.state.selectedIndex + modifier; if (newIndex === totalImages) { newIndex = 0; } else if (newIndex === -1) { newIndex = totalImages - 1; } this.setState({ animationDirection: direction, selectedIndex: newIndex }); }
});
React.render(React.createElement(App, null), document.getElementById('app'));
Developer | Brian |
Username | brian-baum |
Uploaded | November 22, 2022 |
Rating | 3 |
Size | 5,932 Kb |
Views | 46,552 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
JQuery countdown plugin | 4,460 Kb |
AngularJS contact list | 4,052 Kb |
Smooth Scrolling in ReactJS | 4,005 Kb |
Responsive demo page | 5,664 Kb |
CSS dropdowns | 3,146 Kb |
ReactJS Accessible Accordion Panel | 5,767 Kb |
JQuery exercise | 3,780 Kb |
JQuery hash nav plugin | 5,306 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Retina canvas w. resize | Erikterwan | 1,882 Kb |
Cartoon Bomb | Tcmulder | 4,929 Kb |
Find The Penguin | Lelder | 2,212 Kb |
Tile Animation Thing | Frxnz | 4,332 Kb |
SVG Transform vs CSS Transform | AmeliaBR | 4,175 Kb |
Codero Sitemap | S1m0ne | 28,169 Kb |
Super Discount | Orrinward | 3,225 Kb |
NAV WPMANAGER | Mstoic | 1,991 Kb |
Flexbox Test | Icutpeople | 2,486 Kb |
Coburg Banks SVG Logo | Mjtweaver | 3,875 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!