①表示したいパワポを「画像で保存」して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>
Q&A
自己解決
