Trying to get my head around slideshows! Seeking help resizing. HTML, CSS & JS

I am trying to implement the slideshow from example two on the website below to my website:

http://ift.tt/1GPSTgv

I have downloaded the css file, the JS file and copied the code exactly as displayed and I still have no luck.

Here is my HTML code:

<div class="bss-slides num2" tabindex="2">

<figure> <img src="images/backpacker.jpg" width="100%" /> 

<figcaption>"Test" by <a href="#">Test1</a>.</figcaption>

</figure>

<figure>

 <img src="images/desert_cycle.jpg" width="100%" /> 

<figcaption>"Test" by <a href="#">Test2</a>.</figcaption>

</figure>

<figure> <img src="images/italy_bikes.jpg" width="100%" /> 

<figcaption>"Test" by <a href="#">Test3</a>.</figcaption>

</figure>

<figure> <img src="images/toes_sand.jpg" width="100%" /> 

<figcaption>"Test" by <a href="#">Test4</a>.</figcaption>

</figure>

</div>

CSS.

The CSS is the exact same as the website so I don't see the need to paste it in here, however it can be found here:

http://ift.tt/1QEr5Ex

JS:

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

<script src="scripts/better-simple-slideshow.min.js"></script>

var opts = {

auto : false, fullScreen : true, swipe : false 

};

makeBSS('.num2', opts);

</script>

However the image is very big, how do I resize this?

Epic visual tool

Epson 5030UB 2D/3D 1080p 3LCD Projector Submitted January 28, 2016 at 12:20AM by brianmonks48 http://ift.tt/1nQ3ANn