React Image Switcher

Developer
Tobi Weinstock
Size
5,156 Kb
Views
30,360
  1. React Image Switcher Previews
  2. React Image Switcher HTML Codes
  3. React Image Switcher CSS Codes
  4. React Image Switcher JS Codes

How do I make an react image switcher?

Image switcher using React.. What is a react image switcher? How do you make a react image switcher? This script and codes were developed by Tobi Weinstock on 02 September 2022, Friday.

React Image Switcher Previews
IQ Test

React Image Switcher - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>React Image Switcher</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="imageSwitcher"></div>
<p>This React JS image switcher was inspired by a <a href="http://codepen.io/una/pen/jrxbZq">lovely CSS only component</a> which I found via <a href="http://youmightnotneedjs.com/">You Might Not Need JS</a>.
I know spawning yet another react component is contrary to the purpose of this project, but what can I say? I had just watched The Force Awakens and I was feeling rebellious.
</p> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

React Image Switcher - Script Codes CSS Codes

html { box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit;
}
body { background: beige; color: #313131; font-family: courier;
}
h1 { position: relative; text-align: center; color: #313131; font-family: didot; font-size: 40px; letter-spacing: 9px; margin: 15px 0;
}
.imageSwitcher__container { position: relative; width: 600px; height: 300px; margin: 0 auto;
}
.imageSwitcher__container > div { position: relative; height: 100%;
}
.imageSwitcher__container img { position: absolute; width: 600px; height: 300px; top: 0; left: 0; opacity: 0; transition: opacity 0.3s ease-in;
}
.imageSwitcher__container img.slideActive { opacity: 1; transition: opacity 0.3s ease-in;
}
.switcherItemsNav { position: relative; list-style: none; top: 85%; justify-content: center; text-align: center; width: 50%; margin: 0 auto; padding: 0;
}
.switcherItemsNav li { text-decoration: none; margin: 0 5px; color: tan; background: #313131; height: 40px; width: 40px; line-height: 40px; display: inline-block; border-radius: 50%; border: 1px solid tan; cursor: pointer;
}
.switcherItemsNav li.slideActive { background: tan; color: #313131; border: 1px solid #313131;
}
p { width: 600px; text-align: center; margin: 20px auto; line-height: 25px;
}
p a { color: currentColor;
}

React Image Switcher - Script Codes JS Codes

'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var ImageSwitcher = function (_React$Component) { _inherits(ImageSwitcher, _React$Component); function ImageSwitcher() { _classCallCheck(this, ImageSwitcher); var _this = _possibleConstructorReturn(this, _React$Component.call(this)); _this.state = { switcherContent: imageSwitcherContent, activeClass: 'slideActive' }; _this.renderSwitcherContent = _this.renderSwitcherContent.bind(_this); _this.renderListItems = _this.renderListItems.bind(_this); _this.setActiveImage = _this.setActiveImage.bind(_this); _this.addActiveClass = _this.addActiveClass.bind(_this); return _this; } ImageSwitcher.prototype.setActiveImage = function setActiveImage(image) { this.setState({ activeImage: image }); this.addActiveClass(image); }; ImageSwitcher.prototype.addActiveClass = function addActiveClass(image) { document.querySelectorAll("#imageSwitcher img").forEach(function (image) { image.className = ''; }); document.querySelectorAll(".switcherItemsNav li").forEach(function (listItem) { listItem.classList.remove('slideActive'); }); document.getElementById(image).classList.add(this.state.activeClass); var activeNav = document.querySelectorAll('.' + image)[0]; activeNav.classList.add(this.state.activeClass); }; ImageSwitcher.prototype.componentDidMount = function componentDidMount() { var initialActiveImage = Object.keys(this.state.switcherContent)[0]; this.setState({ activeImage: initialActiveImage }); this.addActiveClass(initialActiveImage); }; ImageSwitcher.prototype.renderSwitcherContent = function renderSwitcherContent(key) { return React.createElement(ImageSwitcherItem, { key: key, index: key, details: this.state.switcherContent[key] }); }; ImageSwitcher.prototype.renderListItems = function renderListItems(key) { return React.createElement(NavSwitcherItem, { key: key, index: key, setActiveImage: this.setActiveImage }); }; ImageSwitcher.prototype.render = function render() { return React.createElement( 'div', null, React.createElement( 'h1', null, 'React Image Switcher' ), React.createElement( 'div', { className: 'imageSwitcher__container' }, Object.keys(this.state.switcherContent).map(this.renderSwitcherContent), React.createElement( 'ul', { className: 'switcherItemsNav' }, Object.keys(this.state.switcherContent).map(this.renderListItems) ) ) ); }; return ImageSwitcher;
}(React.Component);
;
var ImageSwitcherItem = function ImageSwitcherItem(props) { return React.createElement('img', { id: props.index, src: props.details.imgSrc });
};
var NavSwitcherItem = function (_React$Component2) { _inherits(NavSwitcherItem, _React$Component2); function NavSwitcherItem() { _classCallCheck(this, NavSwitcherItem); var _this2 = _possibleConstructorReturn(this, _React$Component2.call(this)); _this2.getActiveImage = _this2.getActiveImage.bind(_this2); return _this2; } NavSwitcherItem.prototype.getActiveImage = function getActiveImage() { this.props.setActiveImage(this.props.index); }; NavSwitcherItem.prototype.render = function render() { var switcherNumber = this.props.index.slice(-1); return React.createElement( 'li', { onClick: this.getActiveImage, className: this.props.index }, switcherNumber ); }; return NavSwitcherItem;
}(React.Component);
;
var imageSwitcherContent = { image1: { imgSrc: 'http://fillmurray.com/g/600/300' }, image2: { imgSrc: 'https://unsplash.it/600/300' }, image3: { imgSrc: 'https://unsplash.it/g/600/300' }, image4: { imgSrc: 'http://fillmurray.com/600/300' }
};
ReactDOM.render(React.createElement(ImageSwitcher, null), document.getElementById('imageSwitcher'));
React Image Switcher - Script Codes
React Image Switcher - Script Codes
Home Page Home
Developer Tobi Weinstock
Username tvweinstock
Uploaded September 02, 2022
Rating 3
Size 5,156 Kb
Views 30,360
Do you need developer help for React Image Switcher?

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!

Tobi Weinstock (tvweinstock) Script Codes
Name
French Words v2
A Pen by Tobi Weinstock
React Tabs
French Words
Halloween Tooltips
SVG Picnic Pattern
React Accordion UI Component
Liz Lemon Valentine
Game card
Personal SVG Logo
Create amazing SEO content with AI!

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!