JSFiddle - React, Tailwind, and code Playground

by Danny Hearnah

HTML

<div class="slider trim">
				<div class="slider_content fl-left">

					<ul class="slider_pane">
						<li><img src="http://domaingang.com/wp-content/uploads/2012/02/example.png"></li>
						<li><img src="http://domaingang.com/wp-content/uploads/2012/02/example.png"></li>
						<li><img src="http://domaingang.com/wp-content/uploads/2012/02/example.png"></li>
					</ul>

					<div class="slider_arrow state_0"></div>
				</div><!-- closing slider content -->

				<div class="slider_items fl-right">
					<ul>
						<li><div class="text">Dyson invests £5m into research of robots that can see</div></li>
						<li><div class="text">Dyson invests £5m into research of robots that can see</div></li>
						<li><div class="text">Dyson invests £5m into research of robots that can see</div></li>
					</ul>
				</div><!-- closing slider items -->

				<div class="fl-clear"></div>
			</div><!-- closing slider -->

CSS

.fl-left {
	float:left !important;
}

.fl-right {
	float:right !important;
}

.fl-clear {
	clear:both;
}

ul,li {
    list-style-type:none;
    padding:0;
    margin:0;
}


.slider {
	width:780px;
}

.slider_content {
	width:571px;
	height: 363px;
	position: relative;
	overflow: hidden;
}

.slider_items {
	width:208px;
}

.slider_items li {
	background-color:#0085B2;
	height: 120px;
	transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;    /* FF3.7+ */
	-o-transition: all 0.3s linear;      /* Opera 10.5 */
	-webkit-transition: all 0.3s linear; /* Saf3.2+, Chrome */
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	line-height:144%;
	display: table;
	border-bottom:solid 1px #fff;
	cursor: pointer;
}

.slider_items li .text {
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	line-height:144%;
	color:rgb(255,255,255);
	display: table-cell;
	vertical-align: middle;
	padding: 0px 24px;
}

.slider_items li.current {
	background-color:#279CC9;
}


.slider_items li:last-child {
	border-bottom:none;
	height:121px;
}

.slider_arrow {
	width:40px;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAASCAYAAABit09LAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDIvMjUvMTTaKqBDAAAAbUlEQVQokY3RSw6AIAwE0EETL+Q5vBA7F3ogPeC4KgH6k4SExUtppyCJ6OJ6SBILglPul/J2oSDWo7hwRia0kIIeGmCEGswQAKzntqdI9RhCqdSH61b8g9vXGR56jLAaxsPm1BZ245lxmGO/hA+mB1i/OAdlbgAAAABJRU5ErkJggg==);
	background-repeat:no-repeat; 
	transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;    /* FF3.7+ */
	-o-transition: all 0.3s ease;      /* Opera 10.5 */
	-webkit-transition: all 0.3s ease; /* Saf3.2+, Chrome */
}

.slider_arrow.state_0 {	background-position: 0px 52px; }
.slider_arrow.state_1 {	background-position: 0px 174px; }
.slider_arrow.state_2 {	background-position: 0px 297px; }


.slider_pane {
	position: absolute;
	top:...

JavaScript

$('.slider_items li').hover( function(event) {
			event.preventDefault();
			/* Act on the event */
			$('.slider_items li.current').removeClass('current');
			$(this).addClass('current');

			$('.slider_arrow,.slider_pane').removeClass('state_0 state_1 state_2').addClass('state_' + $(this).index() );
			
		});