JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<script src="http://www.dyn-web.com/code/scrollers/continuous/js/dw_con_scroller.js"></script>
<div id="wn">
    <div id="lyr1">
        <div id="inner1"> 
            
            <a target="_blank" href="www.google.com"><img src="http://www.basketball.org.nz/_r/img/sponsor-peak.jpg" width="164" height="145" alt="" /></a>
            <img src="http://www.basketball.org.nz/_r/img/sponsor-peak.jpg" width="132" height="145" alt="" />
            <img src="http://www.basketball.org.nz/_r/img/sponsor-peak.jpg" width="176" height="145" alt="" />
            <img src="http://www.basketball.org.nz/_r/img/sponsor-peak.jpg" width="176" height="145" alt="" />
            <img src="http://www.basketball.org.nz/_r/img/sponsor-peak.jpg" width="176" height="145" alt="" />
            <img src="http://www.basketball.org.nz/_r/img/sponsor-peak.jpg" width="176" height="145" alt="" />
            
 
            <img id="rpt1" src="http://www.basketball.org.nz/_r/img/sponsor-peak.jpg" width="164" height="145" alt="" />
            <img id="rpt1" src="http://www.basketball.org.nz/_r/img/sponsor-peak.jpg" width="164" height="145" alt="" />
            <img id="rpt1" src="http://www.basketball.org.nz/_r/img/sponsor-peak.jpg" width="164" height="145" alt="" />
            <img id="rpt1" src="http://www.basketball.org.nz/_r/img/sponsor-peak.jpg" width="164" height="145" alt="" />
            <img id="rpt1" src="http://www.basketball.org.nz/_r/img/sponsor-peak.jpg" width="164" height="145" alt="" />
        </div>
    </div>
</div>
<!-- end wn div -->

CSS

body{ background: #bbb; }

div#wn {
    
    position:relative;
    width:600px;
    height:145px;
    overflow:hidden;
}
div#inner1 {
    white-space:nowrap;
}
div#inner1 img {
    padding-right:4px;
}

JavaScript

if (DYN_WEB.Scroll_Div.isSupported()) {

    DYN_WEB.Event.domReady(function () {

        // arguments: id of scroll area div, id of content div
        var wndo = new DYN_WEB.Scroll_Div('wn', 'lyr1');
        // see info online at http://www.dyn-web.com/code/scrollers/continuous/documentation.php
        wndo.makeSmoothAuto({
            axis: 'h',
            bRepeat: true,
            repeatId: 'rpt1',
            speed: 100,
            bPauseResume: true
        });

        

    });
}