JSFiddle - React, Tailwind, and code Playground

by denvit

HTML

<script src="http://eberhardtsmith.com/clients/marie/js/slick.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.css">
<div id="carousel">
		<div data-productId="test One" data-year="2015" data-dimensions="20 x 36" data-materials="Oil on canvas">
			<img data-lazy="http://eberhardtsmith.com/clients/marie/img/2015/January-1.jpg"/>
		</div>
		<div data-title="Painting Two" data-year="2015" data-dimensions="48 x 60" data-materials="Mixed media on canvas">
			<img data-lazy="http://eberhardtsmith.com/clients/marie/img/2015/January-2.jpg"/>
		</div>
		<div data-title="Painting Three" data-year="2015" data-dimensions="50 x 75" data-materials="Oil on canvas">
            <img data-lazy="http://eberhardtsmith.com/clients/marie/img/2015/January-3.jpg"/>
		</div>
</div>

<div id="title">
    <p class="get-the-title">Painting One</p>
</div>

CSS

#carousel img {
    max-height: 300px;
}

#carousel img {
    padding: 0px 20px;
}

JavaScript

$('#carousel').slick({
	infinite: true,
	lazyLoad: 'progressive',
	speed: 300,
	slidesToShow: 1,
	centerMode: true,
	variableWidth: true,
	focusOnSelect: false,
	arrows: true,
	dots: false,
});

$('#carousel').on('afterChange', function(event, slick, currentSlide, nextSlide){
    var elSlide = $(slick.$slides[currentSlide]);
    var materials = elSlide.data('productId');
    console.log(materials);
});