Tutorial 1

Choose your pattern from the selection below!

Origami Paper Pattern Origami Paper Pattern Origami Paper Pattern

Great! Now it's time to fold your airplane!

© Christel Chan 2017 | For Educational Purposes Only

How it works

This tutorial will teach you how to add a slideshow like the one on the right by using the Cycle 2 slideshow plugin.

1 >

First, add the jQuery CDN by adding the following code into your HTML markup, right before the closing body tag.



2 >

Next, add the Cycle 2 plugin library by adding the following code in your HTML markup, after the jQuery CDN code.


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://malsup.github.com/jquery.cycle2.js"></script>

3 >

Next, add the following code into your HTMLmarkup, wherever you would like to place your slideshow. Replace the img sources with your own images.


      <div id=outside>
      <div class=center>
          <span id=prev>< </span>
          <span id=next> ></span>
      <div class="cycle-slideshow" 
          <img src="images/origami-paper-01.png">
          <img src="images/origami-paper-02.png">
          <img src="images/origami-paper-03.png">

4 >

You can style the slideshow in your CSS however you'd like. Here's how I styled mine.


      #outside .cycle-slideshow {
        margin: 0 auto;