Handwritten jQuery div Slider

Handwritten jQuery div Slider.md

Handwritten jQuery div Slider

A generated gist from a pen by me.

Spent 4 hours to build the simplest div carousel from scratch. I studied setInterval(), animate(), flag variables, the principles of z-index and so on for the first time. Damn sorifestival I really thank you so much.

index.html

<!--
    This is some part of the blog page where I'd better not load Bootstrap carousel script.
    So I tried to write my own one with the divs that the blog generates.
-->
<div id="slider-wrapper">
    <div id="slider-indicator">
        <!-- these indicators are dynamically appended. -->
        <a href="#" class="slide-indicator no1">1</a>
        <a href="#" class="slide-indicator no2">2</a>
        <a href="#" class="slide-indicator no3">3</a>
        <a href="#" class="slide-indicator no4">4</a>
        <a href="#" class="slide-indicator no5">5</a>
    </div>
    <!-- below are the slide divs which are also produced by another javascript (which is, https://gist.github.com/yuptogun/38a81e93af3db4f1932d#file-get_slides-js) -->
    <div class="slide" id="no1" style="background-image:url('http://cfile28.uf.tistory.com/image/272BAA3455B59D001A8E42')">
        <a href="http://blog.sorifestival.com/829" target="_self" class="slide-title">dummy text #5 for English news 2015</a>
    </div>
    <div class="slide" id="no2" style="background-image:url('http://cfile6.uf.tistory.com/image/2615B53855B59CD72A3E16')">
        <a href="http://blog.sorifestival.com/828" target="_self" class="slide-title">테스트 글 4 김선국님</a>
    </div>
    <div class="slide" id="no3" style="background-image:url('http://cfile3.uf.tistory.com/image/2646C73355B59CBB175C4D')">
        <a href="http://blog.sorifestival.com/827" target="_self" class="slide-title">테스트 3 월드뮤직을 찾아서</a>
    </div>
    <div class="slide" id="no4" style="background-image:url('http://cfile29.uf.tistory.com/image/261D5D3555B59CA026237B')">
        <a href="http://blog.sorifestival.com/826" target="_self" class="slide-title">안나를 위한 테스트 글 2</a>
    </div>
    <div class="slide" id="no5" style="background-image:url('http://cfile9.uf.tistory.com/image/2149BE3B55B59C7A1407A6')">
        <a href="http://blog.sorifestival.com/825" target="_self" class="slide-title">테스트 글 1</a>
    </div>
</div>

script.js

// set the flag to check if there's a hover event over #slider-wrapper.
var ispaused = false;

// this function rolls the slides...
function rollIt() {
  // only when nobody hovered anything over the slider wrapper.
  if (!ispaused) {
    // let the currently shown div be the "before" one
    var before = $('.shown');
    // let's choose what div to be the "after" one -- the logic is dead simple, take a look
    if (before.next('.slide').length) {
      var after = before.next('.slide');
    } else {
      var after = $('.slide').first();
    }
    // it's quite complicated to pull one div to cover another one:
    // you need 3 kinds of z-index -- "backstage", "exiting" and "entering."
    // first, the before one should be exiting, or, its z-index should be 0.
    before.css({
      'z-index': '0',
      'position': 'absolute',
      'left': '0'
    });
    // now that the before one is getting out, the after one can enter.
    after.css('z-index', '1').animate({
      'left': '0%'
    }, 600, function() {
      // now the before one cannot be seen, so you can put it backstage...
      before.css({
        'z-index': '-1',
        'position': 'absolute',
        'left': '100%'
      }).removeClass('shown');
      after.css('z-index', '1').addClass('shown');
      // and tell the indicators what slide is on the spot.
      var nowshowing = after.attr('id');
      $('.slide-indicator').each(function() {
        if ($(this).hasClass(nowshowing)) {
          $(this).addClass('hover');
        } else {
          $(this).removeClass('hover');
        }
      });
    });
  }
}

// okay, now let the show begin
$(document).ready(function() {
  // get the first ones ready...
  $('.slide').first().addClass('shown');
  $('.slide-indicator').first().addClass('hover');

  // ...and here we go!
  setInterval(rollIt, 5000);

  // what if someone puts something over the slider? just tell the flag.
  $('#slider-wrapper').hover(
    function() {
      ispaused = true;
    },
    function() {
      ispaused = false;
    }
  );
  
  // what if someone wants to choose what slide to see?
  $('.slide-indicator').each(function(){
    $(this).click(function(){
      // first, reset all the marks on any indicator
      $('.slide-indicator').removeClass('hover');
      // second, get the number on the clicked indicator
      var whattoshow = $(this).attr('class').match(/no\d/);
      // third, show no slide
      $('.slide').css({
        'z-index': '-1',
        'position': 'absolute',
        'left': '100%'
      }).removeClass('shown');
      // fourth, pick the slide with the number
      $('div[id='+whattoshow+']').css({
        'z-index': '1',
        'position': 'absolute',
        'left': '0%'
      }).addClass('shown');
      // finally, tell him/her that here is your slide
      $(this).addClass('hover');
    });
  });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

a,
a:visited {
  text-decoration: none;
  color: white;
}

#slider-wrapper {
  width: 577px;
  height: 320px;
  overflow: hidden;
  position: relative;
  background: rgb(54, 54, 54);
}

#slider-indicator {
  text-align: right;
  z-index: 9;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(27, 27, 27, 0.5);
  width: 100%;
  height: 28px;
  color: white;
}

#slider-indicator a {
  vertical-align: middle;
  padding: 4px 10px;
  font-size: 16px;
}
a.slide-indicator:focus {
  background:;
}
#slider-indicator a.hover,
.slide-indicator:hover {
  background: rgba(0, 0, 0, 0.5);
}

.slide {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  z-index: -1;
  cursor: pointer;
}

.slide-title {
  font-size: 24px;
  position: absolute;
  left: 24px;
  bottom: 24px;
  padding: 4px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0);
  background: rgba(0,0,0,0.5);
  border-radius: 8px;
  text-shadow: 0 0 8px black;
}
.slide-title:hover {
  background: rgba(0,0,0,0.75);
}

.slide.shown {
  left: 0;
  z-index: 1;
}

To do: let's make it a plugin (as a good exercise.)

To debug: the indicator click event goes quite silly on a touch screen device. Consider the timeout reset to the clearInterval.

To check: it hardly handles the potential exceptions. Must expect it beforehand.