Howdy, i'm a complete newbie to js.  i'm trying to get this diagonal slider below to work in my wordpress website.

http://www.jqueryscript.net/slider/jQuery-Skewed-Accordion-Slider-Plugin-Diagonal-Slider.html

to work on this page http://www.deckpads.co.za/js/

i'm really struggling. i don't know if its the css that i need to change or here is something i'm not doing right with js.

When i try to reduce the size of the images - they stop expanding/contracting on the rollover.

I'm using Divi Theme from elegantthemes

I've put this html into the html of the wordpress page:

<div class="content_slider">
  <div class="content_title" data-default-text="Diagonal Slider">
    <div class="text">
      Diagonal Slider
    </div>
  </div>
  <div class="gallery_content">
    <div class="gallery_item">
      <img src="images/1.jpg" data-title="Image 1"/>
    </div>
    <div class="gallery_item">
      <img src="images/2.jpg" data-title="Image 2"/>
    </div>
    <div class="gallery_item">
      <img src="images/3.jpg" data-title="Image 3"/>
    </div>
    <div class="gallery_item">
      <img src="images/2.jpg" data-title="Image 4"/>
    </div>
    <div class="gallery_item">
      <img src="images/1.jpg" data-title="Image 5"/>
    </div>
  </div>    
</div>

no idea where to put this:

$(document).ready(function(){
  $('.gallery_content').createDiagonalSlider();
});

Any help will be most appreciated!  Thanks in advance!