JSFiddle - React, Tailwind, and code Playground
by Ian Roberts
HTML
<!--\______________________________/-->
<!--Begin required simpleSlider HTML-->
<!--\______________________________/-->
<div class="slideshow">
<!-- now made by script //prepened after .slideshow
<a href="#" class="slidebtn prev" onclick="return false;"><img alt="previous arrow" src="http://placehold.it/50x50" /></a>
-->
<!-- now made by script //.after() .slidebtn.prev
<a href="#" class="slidebtn next" onclick="return false;"><img alt="next arrow" src="http://placehold.it/50x50" /></a>
-->
<!-- now made by script
<img class="slideshowimg active" alt="" src="" />
-->
<!-- now made by script //appended to .slidehow
<div class="description"></div>
-->
</div>
<!-- now made by script
<div class="thumbwrap">
<div class="thumbHolder"></div>
</div>
-->
<!--End required simpleSlider HTML-->CSS
/*------------------*\
|*-simpleSlider-CSS-*|
\*------------------*/
/*css3 transitions*/
.thumbHolder img.active,
.thumbHolder img:hover {transition: .2s ease-in}
/*slideshow settings*/
.slideshow { height:400px; width:690px; overflow: hidden; }
.slideshowimg { max-height:400px; max-width:690px; position: relative; left: 0px; }
/*thumbnail settings*/
.thumbWrap { width:690px; height:94px; overflow:hidden;}
.thumbHolder { height:80px; background:#000; border-top: 5px solid #fff;}
.thumbHolder img { width:20%; float:left; margin-right:0px; border-top: 5px solid #eaeaea; top: -5px; position: relative;}
.thumbHolder img:hover,
.thumbHolder img.active { border-top: 5px solid #fad400; position: relative; opacity:.8;}
/*description settings*/
.description { background: #333; background: rgb(51,51,51); background: rgba(51,51,51,.9); color: #eaeaea; position: relative; top: -200px; width: 80%; margin: 15px; text-align: left; left: 0px; }
/*button settings*/
.slidebtn.prev,
.slidebtn.next {
display: block;
position: absolute;
z-index: 999999;
opacity: 0;
top:0px;
}
.slidebtn.prev {left: -146px;}
.slidebtn.next {right: -146px;}
/*END simpleSlider CSS*/
/*edits for jerseysports.com*/
/*thumbnails*/
.thumbHolder img { border-top: 5px solid #0D3661;}
.thumbHolder img:hover,
.thumbHolder img.active {
border-top: 5px solid #fd2a00;
}
/*description*/
.description { padding: 8px 10px 15px 15px; top: -215px; left: 98px; background: #000; background: rgb(0,0,0); background: rgba(0,0,0,.75); }
.description h2 {
font-size: 42px;
color: #fff;
letter-spacing: 1px;
margin: 0px;
line-height:120%;
}
.description p {
font-family: 'oswald', sans-serif;
font-weight: 300;
font-size: 14px;
margin:0px;
}
/*buttons*/ /*btns are here b/c they are coded into the descriptions array*/
.btn {
display: block;
width: 110px;
height: 25px;
color: #fff;
font-family: sans-serif;
font-size: 11px;
font-weight: 300;
text-decoration: none;
text-align: center;
vertical-align: middle;
line-height:...JavaScript
// simpleSlider Implementation for CCM
// /*UPDATES*/
// √ - no thumbs option
// √ - no description option
// - array built from elements on page
// - script needs to swap out array content into div instead of swapping src in image
// - script also needs to match descriptions to content //this should be capable when sniffing and building array //may need to write additional sniffer to make emtpy descriptions a part of the array
// √ - HTML make .thumbwrap > .thumbHolder
// √ - HTML make .slidebtn.prev
// √ - HTML make .slidebtn.next
//Ian Roberts//
//
//
/////////////////////////////////////////////////////////////////////////
//Begin simpleSlider plugin
/////////////////////////////////////////////////////////////////////////
(function ($) {
//define some globes
images = ['http://placehold.it/691x400', 'http://placehold.it/692x400', 'http://placehold.it/693x400', 'http://placehold.it/694x400', 'http://placehold.it/695x400'];
descriptions = ['<h2>Edina Cruises To Section Finals</h2><p>Top-seeded Hornets take down Prior Lake in Section 2AA semifinals</p><a href="#" class="btn readmore">Read More</a>',
'<h2>Red Knights Get Revenge On Wayzata</h2><p>Greyhounds secure berth in Section 7AA title game with win over Thunderhawks</p><a href="#" class="btn readmore">Read More</a>',
'<h2>Eden Prairie Douses Fire</h2><p>Benidle-St. Margaret"s takes down top-seeded Trojans in Section 6AA semifinals</p><a href="#" class="btn readmore">Read More</a>',
'<h2>Bouten Scores Twice As Elk River Topples</h2><p>He is a great skater, and his shot was just on the mark tonight," Elk River coach Gordie Roberts said.</p><a href="#" class="btn readmore">Read More</a>',
'<h2>Bloomington Jefferson Upends Burnsville</h2><p>Mr. Hockey finalists Steven Spinner, Luc Snuggerud help propel Eagles past Holy Family Catholic</p><a href="#" class="btn readmore">Read More</a>'];
var width = $('.slideshowimg').width()
//let's define a custom ease value
//let's define a...