Home

#PSA: Slider/Carousel Dos and Don'ts Sliders, in most cases, should NOT be used for critical and diverse content. There is much evidence to suggest that users react negatively to sliders and the content frequently gets ignored - particularly when they auto-advance (which is why this component class has NO auto-advancing feature built in) Ref: https://www.nngroup.com/articles/auto-forwarding.

So why did you make react component to make content sliders?
Valid question - for a few reasons

1. I wanted a simple element to allow me to play with ReactJS, which I was newish to when I created this.
2. Despite the statements above, sliders are SUPER prevalent across the web, and I've created them on different occasions - so if I'm going to make them, I want an easy solution.
3. There are still instances where sliders can be a good choice (as long as you don't auto advance them!)

Ok, so how SHOULD sliders be utilized? Here are some of my own personal rules:

1. Content should be homogeneous. Essentially, if each component of the slider could display a completely different type of information it probably shouldn't be in a slider, because someone could completely miss that different content (for example, one slide is information about an upcoming event, and the next is about an upcoming promotion. Instead, all the content should convey a similar type of information.
2. You should give the option to show all content in one view. Sliders can be a nice way to provide a sampling of some information (especially if space is limited), but you should also offer a way for the user see everything in the open. When you're in the supermarket and you get a tiny sample of soup, once you decided to buy it you wouldn't expect to be given 30 shot-glass sized portions of it.
3. Content should not auto-advance - Has that been made clear yet?

#Implementation

1. Download the src folder from GitHub (no npm package yet).

2. Import/include the sliders.js folder wherever you intend to render your slider.

3. Create a component class that renders a single "slide". This data will come from an object prop passed in called "content". Example here:

    var React = require('react');
   
    var MySliderTemplate = React.createClass({
    	propTypes: {  //Since these props are introduced via createElement, making them required produces an error.
    		content: React.PropTypes.array,
    	},
   
    	render: function () {
    		var title = this.props.content.title;
    		var body = this.props.content.body;
   
    		return (
    			<span className="mySlider-title">{title}</span>
    			<br />
    			<span>{body}</span>
    		);
    	}
    });
   
    module.exports = MySliderTemplate;
   

4. Render your slider like so:
   <Slider content=myContent><MySliderTemplate /></Slider>
   
   Where "myContent" is an array of objects containing your information. For example:
   
   

    		var content = [
    				{
    					"title": "First Title",
    					"body": "Lorem Ipsum something or other content"
    				},
    				{
    					"title": "Second Title",
    					"body": "Four score and seven years ago"
    				},
    				{
    					"title": "Third Title",
    					"body": "Third times a charm."
    				},
    				{
    					"title": "Fourth Title",
    					"body": "Fourth times a charm as well."
    				}
    		]
   

5. Copy the contents of example/react-content-slider-style.css to your CSS file and change the CSS as needed to fit your webpage.
   
   See the example here.