0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

HTML5にpptxを挿入します

Last updated at Posted at 2019-09-09

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>

iframeタグを使ってできたやつ

(これはキャプチャ)

キャプチャ.PNG

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?