JSFiddle - React, Tailwind, and code Playground

by shaneburgess

HTML

<div class="image_carousel">
	<div id="foo1">
    <img src="http://disneybookbeat.com/wp-content/uploads/2012/07/review-epcot-souvenir-book-cover.jpg" data-page="http://disneybookbeat.com/review-epcot-souvenir-book/">    

            <img src="http://disneybookbeat.com/wp-content/uploads/2012/07/review-epcot-souvenir-book-cover.jpg" data-page="http://disneybookbeat.com/review-epcot-souvenir-book/">    
  
            <img src="http://disneybookbeat.com/wp-content/uploads/2012/07/review-epcot-souvenir-book-cover.jpg" data-page="http://disneybookbeat.com/review-epcot-souvenir-book/">    
    
            <img src="http://disneybookbeat.com/wp-content/uploads/2012/07/review-epcot-souvenir-book-cover.jpg" data-page="http://disneybookbeat.com/review-epcot-souvenir-book/">    
   
            <img src="http://disneybookbeat.com/wp-content/uploads/2012/07/review-epcot-souvenir-book-cover.jpg" data-page="http://disneybookbeat.com/review-epcot-souvenir-book/">    
    </div>
	<div class="clearfix"></div>
</div>

CSS

.image_carousel {
	padding: 15px 0 15px 40px;
    height: 300px;
    background-color: black;
}

#foo1 img{
    cursor: pointer;
}

JavaScript

$("#foo1").carouFredSel();

$("#foo1").find("img").click(function(){
     window.location.href = $(this).attr("data-page");
});