JSFiddle - React, Tailwind, and code Playground

by Oski Krawczyk

HTML

<script src="http://www.efectorelativo.net/laboratory/noobSlide/_class.noobSlide.packed.js"></script>
<link rel="stylesheet" href="http://www.efectorelativo.net/laboratory/noobSlide/_web.css">
<link rel="stylesheet" href="http://www.efectorelativo.net/laboratory/noobSlide/style.css">
<!-- SAMPLE 6 --> 
<h2>Sample 6</h2> 
<div class="sample sample6"> 
    <div class="thumbs" id="handles6_1"> 
        <div><img src="http://www.efectorelativo.net/laboratory/noobSlide/img1.jpg" alt="Photo Thumb" /></div> 
        <div><img src="http://www.efectorelativo.net/laboratory/noobSlide/img2.jpg" alt="Photo Thumb" /></div> 
        <div><img src="http://www.efectorelativo.net/laboratory/noobSlide/img3.jpg" alt="Photo Thumb" /></div> 
        <div><img src="http://www.efectorelativo.net/laboratory/noobSlide/img4.jpg" alt="Photo Thumb" /></div> 
    </div> 
    <div class="mask6"> 
        <div id="box6"> 
            <span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img1.jpg" alt="Photo" /></span> 
            <span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img2.jpg" alt="Photo" /></span> 
            <span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img3.jpg" alt="Photo" /></span> 
            <span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img4.jpg" alt="Photo" /></span> 
            <span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img5.jpg" alt="Photo" /></span> 
            <span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img6.jpg" alt="Photo" /></span> 
            <span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img7.jpg" alt="Photo" /></span> 
            <span><img src="http://www.efectorelativo.net/laboratory/noobSlide/img8.jpg" alt="Photo" /></span> 
        </div> 
        <div class="info"></div> 
    </div> 
    <div class="thumbs" id="handles6_2"> 
        <div><img src="http://www.efectorelativo.net/laboratory/noobSlide/img5.jpg"...

JavaScript

//SAMPLE 6 (on "mouseenter" walk)
var info6 = $('box6').getNext().set('opacity',0.5);
var nS6 = new noobSlide({
    mode: 'vertical',
    box: $('box6'),
    items: sampleObjectItems,
    size: 180,
    handles: $$('#handles6_1 div').extend($$('#handles6_2 div')),
    handle_event: 'mouseenter',
    addButtons: {
        previous: $('prev6'),
        play: $('play6'),
        stop: $('stop6'),
        playback: $('playback6'),
        next: $('next6')
    },
    button_event: 'click',
    fxOptions: {
        duration: 1000,
        transition: Fx.Transitions.Back.easeOut,
        wait: false
    },
    onWalk: function(currentItem,currentHandle){
        info6.empty();
        new Element('h4').set('html','<a href="'+currentItem.link+'">link</a>'+currentItem.title).inject(info6);
        new Element('p').set('html','<b>Autor</b>: '+currentItem.autor+' &nbsp; &nbsp; <b>Date</b>: '+currentItem.date).inject(info6);
        this.handles.set('opacity',0.3);
        currentHandle.set('opacity',1);
    }
});
//walk to next item
nS6.next();