jQuery bxsliderを使ってページ内にパワポのスライドショーを表示する簡単な方法 #jQuery

①表示したいパワポを「画像で保存」して1スライドずつ画像で保存する

②以下サイトの方法でスライドのみのページを作る
http://fukafuka295.jp/hp/hp_no3.html

↓こんな感じ
※「auto: true,」について、「true」の後をセミコロン「;」にしないように注意
※li内のimgが左に寄ってしまうのでstyleで真ん中に持ってくる
```

<head>
    <!-- bxsliderのファイル読み込み -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/jquery.bxslider.min.js"></script>
    <link href="css/jquery.bxslider.css" rel="stylesheet"/>
    <!-- bxsliderの呼び出し -->
    <script type="text/javascript">
        $(document).ready(function(){
            $('.bxslider').bxSlider({
                mode:'fade',
            });
        });
    </script>
</head>
<body>
        <ul class="bxslider">
            <li><img src="slide/1-1/slide01.jpg" width="720px" height="540px" style="margin:auto;left:0;right:0;"></li>
            <li><img src="slide/1-1/slide02.jpg" width="720px" height="540px" style="margin:auto;left:0;right:0;"></li>
            <li><img src="slide/1-1/slide03.jpg" width="720px" height="540px" style="margin:auto;left:0;right:0;"></li>
            <li><img src="slide/1-1/slide04.jpg" width="720px" height="540px" style="margin:auto;left:0;right:0;"></li>
            <li><img src="slide/1-1/slide05.jpg" width="720px" height="540px" style="margin:auto;left:0;right:0;"></li>
            <li><img src="slide/1-1/slide06.jpg" width="720px" height="540px" style="margin:auto;left:0;right:0;"></li>
            <li><img src="slide/1-1/slide07.jpg" width="720px" height="540px" style="margin:auto;left:0;right:0;"></li>
            <li><img src="slide/1-1/slide08.jpg" width="720px" height="540px" style="margin:auto;left:0;right:0;"></li>
            <li><img src="slide/1-1/slide09.jpg" width="720px" height="540px" style="margin:auto;left:0;right:0;"></li>
            <li><img src="slide/1-1/slide10.jpg" width="720px" height="540px" style="margin:auto;left:0;right:0;"></li>
            <li><img src="slide/1-1/slide11.jpg" width="720px" height="540px" style="margin:auto;left:0;right:0;"></li>
        </ul>
</body>

②スライドを表示したいページにiframeを記述して、src属性に上記ページのURLを指定する
↓こんな感じ
※高さは元ページのスライドの高さに合わせる(デベロッパーツールで確認)
<iframe src="slideshow.html" seamless width="720px" height="610px"></iframe>