質問編集履歴

1 画像の追加

revoiot

revoiot score 157

2017/02/12 21:53  投稿

Javascript Swiperでの画像の横スライド
Javascriptを使って、メインの画像を横スライドさせるために、Swiperというソフトウェアを使っているのですが、メインの画像が下記にある写真のように、縦に三枚並んでしまい、画像を横スライドさせることができません。
Websiteで、Swiperの使い方を調べ、実際にコードを何回も改善を試行したのですが、直りません。
下記に今回javascriptを使う際、付け加えた部分のコードを記させていただきました。
画像を正常に横スライドさせるために、どうすればいいでしょうか?
大変恐縮ですが、この質問がわかる方、ご教授頂けないでしょうか?
Atom version 1.14.1を編集に使っていて、atom-html-previewで基本的に動作の確認をしています。
私のPCのOSのバージョンは
Microsoft Windows [Version 10.0.14393] です。
**HTML**
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
~省略~
<script type="text/javascript">
<link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
<script src="path/to/swiper.min.js"></script>
<script src="path/to/jquery.js"></script>
~省略~
<div id="wrapper">
 <div id="header">
~省略~
   <div id="container">
~省略~
<div id="main">
         <!-- Slider main container -->
         <div class="swiper-container">
             <!-- Additional required wrapper -->
             <div class="swiper-wrapper">
                 <!-- Slides -->
                 <div class="swiper-slide"><img src="img/mainimage.png" alt="" class="boo"></div>
                 <div class="swiper-slide"><img src="img/mainpage.png" alt="" class="woo"></div>
                 <div class="swiper-slide"><img src="img/mainimage2.png" alt="" class="doo"></div>
                 ...
             </div>
             <!-- If we need pagination -->
             <div class="swiper-pagination"></div>
             <!-- If we need navigation buttons -->
             <div class="swiper-button-prev"></div>
             <div class="swiper-button-next"></div>
             <!-- If we need scrollbar -->
             <div class="swiper-scrollbar"></div>
         </div>
         <script>
         var mySwiper = new Swiper ('.swiper-container', {
           // Optional parameters
           direction: 'vertical',
           loop: true,
           // If we need pagination
           pagination: '.swiper-pagination',
           // Navigation arrows
           nextButton: '.swiper-button-next',
           prevButton: '.swiper-button-prev',
           // And if we need scrollbar
           scrollbar: '.swiper-scrollbar',
         })
         </script>
~省略~
</div>
           </div>
           <!--footer-area-end-->
       </div>
       <!--/footer_topbg-->
   </div>
   <!--footer-end-->
</div><!--wrapper-end-->
<script>
var mySwiper = new Swiper ('.swiper-container', {
  // Optional parameters
  direction: 'vertical',
  loop: true,
  // If we need pagination
  pagination: '.swiper-pagination',
  // Navigation arrows
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  // And if we need scrollbar
  scrollbar: '.swiper-scrollbar',
})
</script>
<script src="path/to/swiper.jquery.min.js"></script>
</body>
</html>
```
**CSS**
```ここに言語を入力
img.mainimage{
 width:560px;
 height:295.4px;
}
img.mainpage{
 width:560px;
 height:295.4px;
}
.woo{
 width:560px;
 height:295.4px;
}
.boo{
 width:560px;
 height:295.4px;
}
.doo{
 width:560px;
 height:295.4px;
}
.swiper-container {
   width: 600px;
   height: 300px;
}
.swiper-slide img {
   display: block;
   margin: 0 0 .2em;
   width: 100%;
   height: auto;
}
img.mainimage2{
 width:560px;
 height:295.4px;
}
```
![イメージ説明](af15dc620f6ffb355a2b2e1b92ea70fc.png)
![イメージ説明](af15dc620f6ffb355a2b2e1b92ea70fc.png)
![イメージ説明](55b255cbf6e9b6ad2fb249111e5b23ff.png)
  • JavaScript

    27759 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    16913 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    11613 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    7430 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る