JSFiddle - React, Tailwind, and code Playground

by CarambaMoreno

HTML

<link rel="stylesheet" href="http://www.lafototeca.org/fototropia.org/beta/slick/slick.css">
<script src="http://www.lafototeca.org/fototropia.org/beta/slick/slick.js"></script>
<link rel="stylesheet" href="http://www.lafototeca.org/fototropia.org/beta/slick/slick-theme.css">
<script src="http://www.lafototeca.org/fototropia.org/beta/js/foundation.min.js"></script>
<link rel="stylesheet" href="http://www.lafototeca.org/fototropia.org/beta/css/foundation.css">
<body>

	<div data-magellan-expedition="fixed">
	  <dl class="sub-nav">
	    <dd data-magellan-arrival="exhibitions"><a href="#exhibitions">Exhibitions</a></dd>
	    <dd data-magellan-arrival="artists"><a href="#artists">Artists</a></dd>
	    <dd data-magellan-arrival="catalog"><a href="#catalog">Catalog</a></dd>
	  </dl>
	</div>

    <div class="row completa alto" id="portada">
		<div class="medium-6 columns">
			<h1>Geográfica</h1>
			<p>Diciembre 2, 2014</p>
		</div>
		<div class="medium-6 columns">
			<p>Two years ago we started Fototropía, a project with the aim of creating a experimental space and a global platform to promote emerging and established photographers.</p>
			<h5>Artists Included:</h5>
			<ul class="medium-block-grid-2">
		    	<li>Artista 1</li>
		    	<li>Artista 2</li>
		    	<li>Artista 3</li>
		    	<li>Artista 4</li>
		    	<li>Artista 5</li>
		    	<li>Artista 6</li>
			</ul>
			<a class="button ingresar" data-reveal-id="expo">Ingresar</a>
		</div>
    </div>

	<div id="expo" class="reveal-modal full" data-reveal>
		<ul class="slickDoble">
			<li>
				<img src="img/fotoModelo.svg" />
				<ul>
					<li><h5>La Obra</h5></li>
					<li>Elar Tista (GUA)</li>
					<li>Diciembre 2, 2014</li>
					<li>16x16"</li>
					<li>Impresión fina en papel algodón</li>
				</ul>
			</li>
			<li>
				<img src="img/fotoModelo.svg" />
				<ul>
					<li><h5>La Obra</h5></li>
					<li>Elar Tista (GUA)</li>
					<li>Diciembre 2, 2014</li>
					<li>16x16"</li>
					<li>Impresión fina en papel...

JavaScript

$(document).foundation();
$(document).ready(function(){
		
			$( ".button.ingresar" ).click(function() {
				  $('.slickDoble').slick({
					  arrows: true,
					  autoplay:false,
					  slidesToShow: 2,
					  slidesToScroll: 1,
					  infinite:true
				  });			  	
			});
		});		
	  $('.slickDoble')[0].slick.setPosition()