JSFiddle - React, Tailwind, and code Playground

by dandiebolt

HTML

<div id="pageContainer">
  <h1><a href="http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/">Slick Slideshow using jQuery</a></h1>
  <!-- Slideshow HTML -->
  <div id="slideshow">
    <div id="slidesContainer">
      <div class="slide">
        <h2>Web Development Tutorial</h2>
        <p><a href="http://sixrevisions.com/tutorials/web-development-tutorials/using-xampp-for-local-wordpress-theme-development/"><img src="http://sixrevisions.com/demo/slideshow/img/img_slide_01.jpg" alt="An image that says Install X A M P P for wordpress." width="215" height="145" /></a>If you're into developing web apps, you should check out the tutorial called "<a href="http://sixrevisions.com/tutorials/web-development-tutorials/using-xampp-for-local-wordpress-theme-development/">Using XAMPP for Local WordPress Theme Development</a>" which shows you how to set up a local testing server for developing PHP/Perl based applications locally on your computer. The example also shows you how to set up WordPress locally!</p>
      </div>
      <div class="slide">
        <h2>Grunge Brushes, Anyone?</h2>
        <p><a href="http://sixrevisions.com/freebies/brushes/sr-grunge-free-high-resolution-photoshop-grunge-brushes/"><img src="http://sixrevisions.com/demo/slideshow/img/img_slide_02.jpg" width="215" height="145" alt="A thumbnail image that says S R grunge photoshop brushes 6 high resolution grunge brushes by six revisions." /></a>In this layout, I used <a href="http://sixrevisions.com/freebies/brushes/sr-grunge-free-high-resolution-photoshop-grunge-brushes/">SR Grunge</a>, which is a free set of high-resolution Photoshop brushes you can download here on Six Revisions.</p>
        <p> 
      </div>
      <div class="slide">
        <h2>How About Some Awesome Grunge Textures?</h2>
        <p><a href="http://sixrevisions.com/freebies/textures/grunge-extreme-15-high-resolution-grunge-textures/"><img...

CSS

/** 
* Slideshow style rules.
*/
#slideshow {
    margin:0 auto;
    width:640px;
    height:263px;
    background:transparent url(http://sixrevisions.com/demo/slideshow/img/bg_slideshow.jpg) no-repeat 0 0;
    position:relative;
}
#slideshow #slidesContainer {
    margin:0 auto;
    width:560px;
    height:263px;
    overflow:auto; /* allow scrollbar */
    position:relative;
}
#slideshow #slidesContainer .slide {
    margin:0 auto;
    width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
    height:263px;
}

/** 
* Slideshow controls style rules.
*/
.control {
    display:block;
    width:39px;
    height:263px;
    text-indent:-10000px;
    position:absolute;
    cursor: pointer;
}
#leftControl {
    top:0;
    left:0;
    background:transparent url(http://sixrevisions.com/demo/slideshow/img/control_left.jpg) no-repeat 0 0;
}
#rightControl {
    top:0;
    right:0;
    background:transparent url(http://sixrevisions.com/demo/slideshow/img/control_right.jpg) no-repeat 0 0;
}

/** 
* Style rules for Demo page
*/
* {
    margin:0;
    padding:0;
    font:normal 11px Verdana, Geneva, sans-serif;
    color:#ccc;
}
a {
    color: #fff;
    font-weight:bold;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
a img {border:2px solid #ccc;}
body {
    background:#393737 url(http://sixrevisions.com/demo/slideshow/img/bg_body.jpg) repeat-x top left;
}
#pageContainer {
    margin:0 auto;
    width:960px;
}
#pageContainer h1 {
    display:block;
    width:960px;
    height:114px;
    background:transparent url(http://sixrevisions.com/demo/slideshow/img/bg_pagecontainer_h1.jpg) no-repeat top left;
    text-indent: -10000px;
}
.slide h2, .slide p {
    margin:15px;
}
.slide h2 {
    font:italic 24px Georgia, "Times New Roman", Times, serif;
    color:#ccc;
    letter-spacing:-1px;
}
.slide img {
    float:right;
    margin:0 15px;
}
#footer {
    height:100px;
}
#footer p {
    margin:30px auto 0 auto;
    display:block;
  ...

JavaScript

var currentPosition = 0;
var slideWidth = 560;
var slides = $('.slide');
var numberOfSlides = slides.length;

// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');

// Wrap all .slides with #slideInner div
slides.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
    'float': 'left',
    'width': slideWidth
});

// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);

// Insert controls in the DOM
$('#slideshow').prepend('<span class="control" id="leftControl">Clicking moves left</span>').append('<span class="control" id="rightControl">Clicking moves right</span>');

// Hide left arrow control on first load
manageControls(currentPosition);

// Create event listeners for .controls clicks
$('.control').bind('click', function() {
    // Determine new position
    currentPosition = ($(this).attr('id') == 'rightControl') ? currentPosition + 1 : currentPosition - 1;

    // Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
        'marginLeft': slideWidth * (-currentPosition)
    });
});

// manageControls: Hides and Shows controls depending on currentPosition


function manageControls(position) {
    // Hide left arrow if position is first slide
    if (position == 0) {
        $('#leftControl').hide()
    } else {
        $('#leftControl').show()
    }
    // Hide right arrow if position is last slide
    if (position == numberOfSlides - 1) {
        $('#rightControl').hide()
    } else {
        $('#rightControl').show()
    }
}