jquery plugin: previous next switcher for elements

index.html

<div class="row">
  <!-- root Element from Switcher  -->
  <div class="switcher colums">
    <div>
      <!-- First Element of Switcher, this is visible -->
      <a href="#" class="element">hello world, here is the 1. news</a>
      <a href="#" class="element">hello world, here is the 2. news</a>
      <a href="#" class="element">hello world, here is the 3. news</a>
      <a href="#" class="element">hello world, here is the 4. news</a>
      <a href="#" class="element">hello world, here is the 5. news</a>
      <a href="#" class="element">hello world, here is the 6. news</a>
      <a href="#" class="element">hello world, here is the 7. news</a>
      <a href="#" class="element">hello world, here is the 8. news</a>
      <a href="#" class="element">hello world, here is the 9. news</a>
    </div>
    <div class="pannel clearfix">
      <a class="button float-left previous">Previous</a>
      <a class="button float-right next">Next</a>
    </div>
  </div>
</div>
<script>
  $(document).ready(function() {
    $.switcher({
      sleep: 5
    });
  });
</script>

jquery-plugin-previous-next-switcher-for-elements.markdown

jquery plugin: previous next switcher for elements

shows oder hides news elements automaticly or by click on previous or next button

A Pen by Markus Potthast on CodePen.

License.

script.js

;
(function($) {
  $.switcher = function(options) {
    var defaultOptions = {
      switcherSelector: '.switcher',
      previousSelector: '.previous',
      nextSelector: '.next',
      elementSelector: '.element',
      sleep: 10
    };

    var options = $.extend(defaultOptions, options || {});

    var $switcher = $(options.switcherSelector);
    var $previousButton = $(options.previousSelector, $switcher);
    var $nextButton = $(options.nextSelector, $switcher);
    var $elements = $(options.elementSelector, $switcher);

    var tid = null;
    var length = $elements.length;
    var pos = 0;

    $nextButton.on('click',function(event) {
      event.preventDefault();
      view('+');
    });

    $previousButton.on('click',function(event) {
      event.preventDefault();
      view('-');
    });

    var init = function() {
      $elements.hide();
      $elements.first().show();

    }

    var view = function(direction) {
      if (direction === '-') {
        pos--;
        if ($elements.get(pos) == null) {
          pos = length - 1;
        }
      } else if (direction === '+') {
        pos++;
        if ($elements.get(pos) == null) {
          pos = 0;
        }
      } else {
        console.log('error on view');
        return;
      }
      resetTimer();
      $elements.hide();
      $($elements.get(pos)).show();
    }

    /**
        Reset Timer
    */
    var resetTimer = function() {
        if (tid != null) {
          clearInterval(tid);
        }
        startTimer();
      }
      /**
         start Timer
      */
    var startTimer = function() {
      tid = setInterval(timer, (options.sleep * 1000));
    }

    function timer() {
      view('+');
    }

    init();
    startTimer();
  }
})($);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

style.scss

.switcher div {
  .element {
    line-height: 50px;
    padding: 10px;
    color: #000;
    &:last-of-type {
      background-color:red;
    }
  }
  .next,
  .previous {
    margin: 10px !important;
    width:150px;
  }
}

styles

<link href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css" rel="stylesheet" />