Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
jquery plugin: previous next switcher for elements
<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

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

A Pen by Markus Potthast on CodePen.

License.

;
(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();
}
})($);
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
.switcher div {
.element {
line-height: 50px;
padding: 10px;
color: #000;
&:last-of-type {
background-color:red;
}
}
.next,
.previous {
margin: 10px !important;
width:150px;
}
}
<link href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.