JSFiddle - React, Tailwind, and code Playground
by twinturbotom
HTML
<div class='sliderContent'>
<ul>
<li><div class='showScene'>
<div id='exp'>
<h1>Our Expertise</h1>
<ul>
<li><div class='expList topic1'>
<h1>Topic1 Header</h1>
<img src='http://3.bp.blogspot.com/-uq1xArFbmAE/T5GjNmF-c7I/AAAAAAAAGNY/oRT4dS0y6Ic/s1600/Cool-Pictures1.jpg'>
<ul>
<li>key1</li>
<li>key2</li>
<li>key3</li>
</ul>
</div>
</li>
<li><div class='expList topic2'>
<h1>Topic2 Header</h1>
<img src='http://2.bp.blogspot.com/-y_A2TCaEnZU/TxzbuvYiNhI/AAAAAAAAAZ4/fuMGkV3FEak/s1600/Cool.jpg'>
<ul>
<li>key1</li>
<li>key2</li>
<li>key3</li>
</ul>
</div>
</li>
<li><div class='expList topic3'>
<h1>Topic3 Header</h1>
<img src='http://www.remodelpros.com/spaw/uploads/images/mr-roof-smiling.png'>
<ul>
<li>key1</li>
<li>key2</li>
<li>key3</li>
</ul>
</div>
</li>
<li><div class='expList topic4'>
...CSS
.showScene{width: 1000px; border: 2px solid black; height: 400px; position: absolute;}
#exp {
position: relative;
min-width: 700px;
height: 400px;
margin: 0px auto;
}
#exp > h1{
text-align: center;
font-weight: bold;
margin-top: 2px;
color: #669900;
-webkit-text-fill-color: white; /* Will override color (regardless of order) */
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #669900;
}
#exp > ul {
list-style-type: none;
padding:0px;
overflow: hidden;
/*width: 700px;*/
margin-top: -20px;
}
#exp > ul > li {
float:left;
width:30%;
height: 120px;
padding-top: 6px;
padding-bottom: 6px;
font-weight: bold;
font-size: .8em;
}
#exp > ul > li img{
width:30%;
vertical-align: middle;
}
#exp > ul > li:nth-child(odd){
margin-left: 3%;
}
#exp > ul > li:nth-child(odd) img{
padding-right:10px;
}
#exp > ul > li:nth-child(even){
float: right;
margin-right: 10%;
}
#exp > ul > li:nth-child(even) h1{
text-align: right;
}
#exp > ul > li:nth-child(even) img{
position: relative;
left: 95%;
}
.expSelected h1{
color: #669900;
}
#expPane .expSelected h1 {
color: black;
}
.expList ul li {
display:none;
}
.expList h1{
font-size: 1.25em;
display: inline;
line-height: 80px;
}
.expList img {
float: left;
vertical-align: top;
}
#expPane{
position: absolute;
top: 10%;
left:30%;
right: 30%;
height: 250px;
}
#expPane img{
height: 100px;
}
#expPane .expList{
width: 272px;
margin: auto;
}
#expPane .expList ul li{
display: list-item;
}
#expPane h1 {
display: block;
text-align: center;
}
#expPane img {
float:none;
text-align: center;
width: 100%;
height: 225px;
}
#expPane ul {
margin-left: 20px;
}JavaScript
var actual = 1;
$(document).ready(function() {
/* get all 'src' */
links = $('#exp > ul > li > div');
/* set first image */
imgFirst(links);
/* iterate images */
startExp();
/* hover images */
imgHov();
});
/* set first image */
function imgFirst(links) {
$('#expPane').html($(links[0]).clone());
};
//set interval
function startExp(){
i = 0;
startExpVar = setInterval(function() {
imgIterate(links);
}, 3000);
}
//stop interval
function stopExp(){
clearInterval(startExpVar);
}
/* iterate images */
function imgIterate(links) {
$('#expPane').fadeOut('slow', function(){
++i;
if (i >= links.length){i = 0}
$('#expPane').html($(links[i]).clone()).fadeIn('slow');
});
};
/* hover images */
function imgHov() {
links.hover(function() {
var activeOne = $(this);
activeOne.addClass('expSelected');
stopExp();
$('#expPane').fadeOut('fast', function(){
$('#expPane').html(activeOne.clone()).fadeIn('fast');
});
}, function() {
imgIterate(links);
startExp();
$(this).removeClass('expSelected');
});
}