pptxファイルをフォルダに入れる
何もない
bxSliderをダウンロードする
ホームページ:
https://bxslider.com/
installボタンを押して、インストールページにアクセスする。
最も簡単な方法でやる
「The Easy Way」が書かれた部分のコードをコピーして、headとbodyをそれぞれHTML5ファイルに記載する。
body部分を修正する
<div class="slider">
<div>I am a slide.</div>
<div>I am another slide.</div>
</div>
上記コード、真ん中の2行をpptxファイルの情報に書き換える。srcの部分を、pptxのディレクトリに書き換える。
例:
<div class="slider">
<div><img src="/stats/pic/P1.png" width="750px" height="400px"></div>
<div><img src="/stats/pic/P2.png" width="750px" height="400px"></div>
</div>
imgタグは、別の属性もある。ネットで調べて出てくる。
HTML5にiframeタグを使ってやりたい時
HTML5ファイルに挿入したい場所でiframeタグを書く。
例:
homepage.html
<html>
<head>
...
<iframe src="slideshow.html" width="750px" height="480px"></iframe>
...
</head>
</html>
slideshow.html
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script>
$(document).ready(function(){
$('.slider').bxSlider();
});
</script>
</head>
<body>
<div class="slider">
<div><img src="/stats/pic/P1.png" width="750px" height="400px"></div>
<div><img src="/stats/pic/P2.png" width="750px" height="400px"></div>
</div>
</body>
</html>