Sly doesn’t work on a wordpress template

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”

Read More

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')
    });
  }());

});

Related posts

Leave a Reply