Skippr.js Made Easy! Complete Guide to Creating a Beautiful Slideshow

This time, we will introduce how to implement a slideshow using “skippr.js”. This article provides a step-by-step guide that even beginners can easily follow. Let’s take your website to the next level!

Set up CSS to build the foundation

First, let’s configure the basic CSS.
Load skippr.css and apply styles to cover the entire screen on html and body. Set the height and width of the html and body tags to 100%.
Here, we also adjust the font size and text alignment. Below is an example of the basic CSS settings.

<style>
html, body {
  height: 100%;
  width: 100%;
}
body {
  font-size: 16px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 1.6em;
  padding: 20px 0 30px 0;
}
#container{
    width: 100%;
    height: 80%;
    min-height: 500px;
    position: relative;
}
</style>
<link rel="stylesheet" href="skippr.css">

Create the slideshow structure with HTML

Next, let’s build the HTML structure for the slideshow.
Here, set the display area (id=”theTarget”) for the slideshow and place the images (1 ～ 3.jpg) that you want to show inside it.
Here’s a simple example:

<h1>Display a simple slideshow using skippr.js</h1>

<div id="container">
<div id="theTarget">
  <div style="background-image: url(1.jpg)"></div>
  <div style="background-image: url(2.jpg)"></div>
  <div style="background-image: url(3.jpg)"></div>
</div>
</div>

Add motion with JavaScript using skippr.js

Once the layout is ready, let’s add motion to the slideshow with JavaScript.
Here, we use jQuery and skippr.js.
Load jquery-1.12.0.min.js and skippr.min.js files. Then write $(“slideshow area”).skippr({options}). You can freely configure options such as autoplay settings and slide speed.

<script src="jquery-1.12.0.min.js"></script>
<script src="skippr.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("#theTarget").skippr({
      autoPlay : true,
      autoPlayDuration : 2000,
      logs : true
    });
  });
</script>

Demo page: Displaying a simple slideshow with skippr.js

To deepen your understanding, be sure to check out the demo page we created below.

Demo page: Displaying a simple slideshow with skippr.js

Source: Skippr. A jQuery plugin for creating tasteful slideshows.

For more details on skippr.js, please refer to the official documentation below.

Skippr. A jQuery plugin for creating tasteful slideshows.

Conclusion

skippr.js is a wonderful tool that enables you to create simple yet multifunctional slideshows. I hope this article will be helpful in your web development.
If you have any questions, feel free to ask in the comments section.

　
※Please use at your own responsibility when reusing.
　Do not reuse the Google Analytics tag inside the head tag of the demo page.