React Slider

Size
4,673 Kb
Views
20,240

How do I make an react slider?

A slider built with React, using some basic ES2015 features through Babel, animated with CSS3 transforms and transitions. . What is a react slider? How do you make a react slider? This script and codes were developed by Joseph Martucci on 25 October 2022, Tuesday.

React Slider Previews

React Slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>React Slider</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="slider"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

React Slider - Script Codes CSS Codes

.slider { font-family: 'Roboto Condensed', sans-serif; width: 100%; height: 40vw; position: relative; overflow: hidden;
}
.slider__slide { -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; -webkit-transform: scale(1.1); transform: scale(1.1); position: absolute; top: 0; left: 0; width: 100%; height: 40vw; max-height: 600px; min-height: 200px; background-size: cover; background-position: center; z-index: 1; opacity: 0;
}
.slider__slide__text { position: absolute; top: 20px; left: 20px; background: rgba(0, 0, 0, 0.6);
}
.slider__slide__text a, .slider__slide__text a:link { -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; color: white; text-decoration: none; text-transform: uppercase; font-size: 32px; padding: 20px; display: block;
}
.slider__slide__text a:hover, .slider__slide__text a:link:hover { background: rgba(20, 20, 20, 0.4); color: #c8c8c8;
}
.slider__slide[data-active="true"] { -webkit-transform: scale(1); transform: scale(1); z-index: 100; opacity: 1;
}
.slider__next, .slider__previous { -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; color: rgba(255, 255, 255, 0.6); z-index: 200; position: absolute;
}
.slider__next:hover, .slider__previous:hover { color: rgba(255, 255, 255, 0.8); -webkit-transform: scale(1.1); transform: scale(1.1);
}
.slider__next { bottom: 20px; right: 20px;
}
.slider__previous { bottom: 20px; left: 20px;
}

React Slider - Script Codes JS Codes

"use strict";
var slides = [{ background: "https://ununsplash.imgix.net/photo-1434828927397-62ea053f7a35?dpr=2&fit=crop&fm=jpg&h=700&q=75&w=1050", text: "America", link: "https://unsplash.com/anthonydelanoix"
}, { background: "https://images.unsplash.com/photo-1434394673726-e8232a5903b4?q=80&fm=jpg&s=b154bdf22a4885c8e2dd1b845c5fe996", text: "Mountains", link: "https://unsplash.com/aleskrivec"
}, { background: "https://images.unsplash.com/photo-1432691301971-c8b920198bd7?q=80&fm=jpg&s=d6b5970179cd2bc77c3b56165da56f80", text: "Shore", link: "https://unsplash.com/intrepid"
}];
var Slide = React.createClass({ displayName: "Slide", render: function render() { var background = this.props.background; var text = this.props.text; var link = this.props.link; var active = this.props.active; var slideStyle = { backgroundImage: 'url(' + background + ')' }; return React.createElement( "div", { className: "slider__slide", "data-active": active, style: slideStyle }, React.createElement( "div", { className: "slider__slide__text" }, React.createElement( "a", { href: link }, text ) ) ); }
});
var Slider = React.createClass({ displayName: "Slider", getInitialState: function getInitialState() { return { activeSlide: 0 }; }, nextSlide: function nextSlide() { var slide = this.state.activeSlide + 1 < this.props.slides.length ? this.state.activeSlide + 1 : 0; this.setState({ activeSlide: slide }); }, previousSlide: function previousSlide() { var slide = this.state.activeSlide - 1 < 0 ? this.props.slides.length - 1 : this.state.activeSlide - 1; this.setState({ activeSlide: slide }); }, render: function render() { var _this = this; var slides = this.props.slides; return React.createElement( "div", { className: "slider" }, slides.map(function (slide, index, array) { return React.createElement(Slide, { background: slide.background, text: slide.text, active: index === _this.state.activeSlide, link: slide.link }); }), React.createElement( "div", { className: "slider__next", onClick: this.nextSlide }, React.createElement("i", { className: "fa fa-4x fa-arrow-circle-right" }) ), React.createElement( "div", { className: "slider__previous", onClick: this.previousSlide }, React.createElement("i", { className: "fa fa-4x fa-arrow-circle-left" }) ) ); }
});
React.render(React.createElement(Slider, { slides: slides }), document.getElementById("slider"));
React Slider - Script Codes
React Slider - Script Codes
Home Page Home
Developer Joseph Martucci
Username jjmartucci
Uploaded October 25, 2022
Rating 4.5
Size 4,673 Kb
Views 20,240
Do you need developer help for React Slider?

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!

Joseph Martucci (jjmartucci) Script Codes
Create amazing blog posts 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!