JSFiddle - React, Tailwind, and code Playground

by kyllle

HTML

<script type="text/template" class="tmpl-slider">
	<% _.each(movies, function(movie, i) { %>
		<div class="slider__item <% if(i == 0) { %>is-active<% } %> js-slide">
			<h1><%= movie.title %></h1>
			<p><%= movie.overview %></p>
		</div>
	<% }); %>
	<div class="slider__navigation js-actions">
		<% _.each(movies, function(movie, i) { %>
			<button class="slider__action <% if(i == 0) { %>is-active<% } %> js-action"></button>
		<% }); %>
	</div>
</script>

CSS

.slider {
  width: 80%;
  margin: auto;
  max-width: 680px;
  text-align: center;
  
  &__item {
    font-size: 1.6em;
    font-weight: 100;
    opacity: 0;
    transition: opacity 1s;
    height: 0;
    overflow: hidden;
    
    &.is-active {
      opacity: 1;
      height: auto;
    }
    
  }
  
  &__action {
    opacity: 0.2;
    background-color: #565656;
    border: none;
    border-radius: 50%;
    padding: 10px;
    margin: 5px;
    transition: opacity .3s;
    outline: 0;
    
    &:hover {
      opacity: 0.6;
    }
    
    &.is-active {
      opacity: 1;
      pointer-events: none;
    }
    
  }
  
}

JavaScript

console.clear();

/**
 *	Todos:
 *	1. Set up initial defaults
 *	2. Request data at path/to/data/url
 *	3. Template data
 *	4. Insert into DOM
 *	5. Bind UI
 */

function Slider(options) {

	this.$container = (options && options.container) ? $(options.container) : $('body');
	this.$el = $('<div></div>').addClass( (options && options.className) ? options.className : 'slider');
	this.template = _.template( $('.tmpl-slider').html() );

	this.fetch = function(url) {
		return $.getJSON(url);
	};

	this.render = function(data) {
		
		this.$el.html(this.template({
			movies: data
		}));
		
		this.$container.append(this.$el);
		
		this._bindUI(this.$el);
	};

	this._bindUI = function(slider) {
		
		var slides = slider.children('.js-slide'),
			actionsCtn = slider.find('.js-actions'),
			actions = actionsCtn.children('.js-action');
		
		actions.on('click', function(event) {
			event.preventDefault();
			
			var index = $(this).index();
			
			$('.js-action.is-active, .js-slide.is-active').removeClass('is-active');
						
			$(this).addClass('is-active');
			$(slides[index]).addClass('is-active');
		});
	};
};

(function() {
	var slider = new Slider();
	
	// Get Data
	var sliderData = slider.fetch('http://codepen.io/styler/pen/MKOXVy.js').done(function(movies) {		
		slider.render(movies[0].results);
	});
	
})();