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.

  

    <script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"></script>

  
  
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>
      
      <div class="cycle-slideshow" 
          data-cycle-fx=scrollHorz
          data-cycle-timeout=0
          data-cycle-prev="#prev"
          data-cycle-next="#next"
          >
          <img src="images/origami-paper-01.png">
          <img src="images/origami-paper-02.png">
          <img src="images/origami-paper-03.png">
      </div>
    </div>

  
  
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;
        width:300px;
      }