JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<script src="http://manos.malihu.gr/tuts/jquery.thumbnailScroller.js"></script>
<div id="tS2" class="jThumbnailScroller">    <div class="jTscrollerContainer">
        <div class="jTscroller">
            <a href="#">Un texte</a>
            <a href="#">Un texte plus long</a>
            <a href="#">Deux mots</a>
            <a href="#">Ou plutĂ´t trois</a>
            <a href="#">Non</a>
        </div>
    </div>
    <a href="#" class="jTscrollerPrevButton"></a>
    <a href="#" class="jTscrollerNextButton"></a>
</div>

CSS

@charset "utf-8"; /* Thumbnail scroller jQuery plugin scrollers styling */ .jThumbnailScroller{position:relative; width:200px; height:122px; margin:160px auto 0 auto; border:5px solid #eee; background:#bbb; padding:0; overflow:hidden; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;} .jThumbnailScroller .jTscrollerContainer{position:absolute;} .jThumbnailScroller .jTscroller{position:relative; height:100%; margin:0; left:0; top:0; display:inline-block; *display:inline;} .jThumbnailScroller .jTscrollerNextButton,.jThumbnailScroller .jTscrollerPrevButton{position:absolute; display:block; width:40px; height:40px; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; opacity:0.7;} .jThumbnailScroller .jTscrollerNextButton{background:#000 url(nextArrow.png) center center;} .jThumbnailScroller .jTscrollerPrevButton{background:#000 url(prevArrow.png) center center;} .jThumbnailScroller .jTscrollerNextButton:hover,.jThumbnailScroller .jTscrollerPrevButton:hover{background-color:#d56916; opacity:1;} .jThumbnailScroller .jTscroller a{display:block; float:left; border:5px solid #ddd; margin:6px 10px 6px 0; background:#fff; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;} .jThumbnailScroller .jTscroller a:hover{border-color:#fff;} .jThumbnailScroller .jTscroller a:first-child{margin-left:10px;} .jThumbnailScroller .jTscroller a img{border:none;} /* different styled scrollers */ /* liquid width scroller */ .jThumbnailScroller#tS1{width:95%;} .jThumbnailScroller#tS2{margin:30px auto;} .jThumbnailScroller#tS2 .jTscroller a{opacity:0.7;} .jThumbnailScroller#tS2 .jTscroller a:hover{opacity:1;} .jThumbnailScroller#tS2 .jTscrollerNextButton{margin:-20px 10px 0 10px; right:0; top:50%;} .jThumbnailScroller#tS2 .jTscrollerPrevButton{margin:-20px 10px 0 10px; left:0; top:50%;} /* a vertical scroller */ .jThumbnailScroller#tS3{position:absolute; left:40px; top:322px; width:122px; height:400px; margin:0; background:#eee;}...

JavaScript

$("#tS2").thumbnailScroller({          scrollerType:"clickButtons",          scrollerOrientation:"horizontal",          scrollSpeed:2,          scrollEasing:"easeOutCirc",          scrollEasingAmount:600,          acceleration:4,          scrollSpeed:800,          noScrollCenterSpace:10,          autoScrolling:0,          autoScrollingSpeed:2000,          autoScrollingEasing:"easeInOutQuad",          autoScrollingDelay:500      });