Build a Custom Slider
To show the power behind ScotchPanel.js, this is a demo on how you could quickly build a completely custom and responsive slider with almost no work.
/*==================================
= LEFT SLIDE =
==================================*/
var leftPanel = $('.left-panel').scotchPanel({
type: 'image',
containerSelector: '#slider',
duration: 500,
transition: 'ease',
distanceX: '100%',
direction: 'left'
});
$('.open-left-panel').click(function() {
leftPanel.open();
return false;
});
$('.close-left-panel').click(function() {
leftPanel.close();
return false;
});
/*===================================
= RIGHT SLIDE =
===================================*/
var rightPanel = $('.right-panel').scotchPanel({
type: 'image',
containerSelector: '#slider',
duration: 500,
transition: 'ease',
distanceX: '100%',
direction: 'right'
});
$('.open-right-panel').click(function() {
rightPanel.open();
return false;
});
$('.close-right-panel').click(function() {
rightPanel.close();
return false;
});