I started implementing a Javascript slider called Sly to my wordpress based website which is designed with this template (http://wpshower.com/themes/expositio/) by using child theme. When I inspect element, I can see that the plug-in is working almost properly such as calculating total width, addding the class active to the items when I click the prev and next buttons as well as the class dragged when I drag the slidees.
The problems I found are translate X doesn’t appear in the slidee’s style and browser console says “Uncaught TypeError: undefined is not a function: render: sly.js?ver=4.1.1:467”
I would appreciate any of your advices.
Below is my code:
CSS:
#frame { width: 100%; height: 100%; padding: 0; overflow:hidden;}
#frame .slidee { margin: 0; padding: 0; height: 100%; list-style: none; }
#frame .slidee li {
display: inline-block;
margin: 0 40px 0 0;
margin: 0 4rem 0 0;
padding: 0;
width: 600px;
height: 100%;
}
HTML:
http://bit.ly/1EYMe4q
JS:
jQuery(document).ready(function($){
'use strict';
(function () {
var $frame = $('#frame');
var $wrap = $frame.parent();
$frame.sly({
horizontal: 1,
itemNav: 'centered',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 0,
scrollBy: 1,
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
prev: $wrap.find('.prev'),
next: $wrap.find('.next')
});
}());
});