JSFiddle - React, Tailwind, and code Playground

by dubeynee

HTML

<div style="width: 560; overflow: hidden" align="center">
  <!-- Slideshow HTML -->
  <div id="timer">
  </div>
  <div id="slideshow">
    <div id="slidesContainer">
      <div class="slide">
        <!-- Content for slide 1 goes here -->
        <img src="http://www.themobileindian.com/images/nnews/2012/10/8999/Apple-logo.jpg" />
        <span>I need some he file. I have normal javascript, as well as Jquery. Here </span>
      </div>
      <div class="slide">
        <!-- Content for slide 2 goes here. -->
        <img src="http://www.maxxpotential.com/stephen2/wp-content/uploads/2013/03/Images-from-Deep-in-the-Woods-by-Astrid-Yskout-4.jpg">
        <span>I to move it to it's own file. I have normal javascript, as well as Jquery. Here
                    </span>
      </div>
      <div class="slide">
        <!-- Content for slide 3 goes here. -->
        <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSnyrnGRAcKu3bY2bLUiCDnPetbKT97o892huSfYQv148ERpRFJ" />
        <span>I need some help with this... I wrote all of my javascript code within the .html
                        file withing the brackets. I need to move it to it's own file. I have normal javascript,
                        as well as Jquery. Here </span>
      </div>
      <div class="slide">
        <img src="http://i.livescience.com/images/i/000/034/622/i02/bioscapes3.jpg" />
        <span>within the .html file withing the brackets. I need to move it to it's own file.
                        I have normal javascript, as well as Jquery. Here </span>
      </div>
      <div class="slide">
        <img src="http://www.thinkstockphotos.in/CMS/StaticContent/WhyThinkstockImages/Best_Images.jpg" />
        <span>I need some help with this.. have normal javascript, as well as Jquery. Here
                    </span>
      </div>
    </div>
    <div id="slider">
      <a href="javascript:void(0)">1</a> <a href="javascript:void(0)">2</a> <a href="javascript:void(0)">
                    3</a> <a...

CSS

#slideshow #slidesContainer {
          margin: 0 auto;
          width: 300px;
          height: 263px;
          overflow: auto;
          /* allow scrollbar */
          position: relative;
        }
        
        #slideshow #slidesContainer .slide {
          margin: 0 auto;
          width: 300px;
          /* reduce by 20 pixels to avoid horizontal scroll */
          height: 263px;
          display: none;
        }
        
        #slideshow #slidesContainer .slide img {
          margin: 0 auto;
          width: 290px;
          /* reduce by 20 pixels 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://cdn1.iconfinder.com/data/icons/fs-icons-ubuntu-by-franksouza-/128/go-previous.png) no-repeat 0 0;
        }
        
        #rightControl {
          top: 0;
          right: 0;
          background: transparent url(http://cdn4.iconfinder.com/data/icons/cc_mono_icon_set/blacks/48x48/sq_br_next.png) no-repeat 0 0;
        }
        
        .active {
          color: red;
        }

JavaScript

var currentPosition = 0;
            var slideWidth = 300;
            var slides = $('.slide');
            var numberOfSlides = slides.length;
            var timer = 3000;
            var img1, img2;
            var sliderLink = $("#slider a");
            var direction = 1;
            // Remove scrollbar in JS
            $('#slidesContainer').css('overflow', 'hidden');

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

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

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

            // Hide left arrow control on first load
            // manageControls(currentPosition);
            // manageSlide();
            // Create event listeners for .controls clicks
            $('#rightControl').bind('click', rightControl);
            $('#leftControl').bind('click', leftControl);

            function leftControl() {
              var butonid = 0;
              direction = 0;
              $("#slideInner").stop();
              $("#slideInner").dequeue();
              $('#timer').stop();
              $('#timer').dequeue();
              $('#leftControl').unbind('click');

              manageSlide(0, direction);
              setTimeout(function() {

                $('#leftControl').bind('click', leftControl);
              }, timer, null);


            }

            function rightControl() {
              var butonid = 1;
              direction = 1;
              $("#slideInner").stop();
              $("#slideInner").dequeue();
           ...