質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

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

JavaScript

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

HTML

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

CSS

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

Q&A

解決済

1回答

2835閲覧

Javascript Swiperでの画像の横スライド

revoiot

総合スコア188

HTML5

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

JavaScript

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2017/02/12 12:33

編集2017/02/12 12:53

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; }

イメージ説明

イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

path/to/ の部分はご自身の環境に合わせて書き換える箇所です。httpから始まるフルパスで書かれたほうが良いでしょう。

また、var mySwiper = new Swiper ('.swiper-container', { が2回書かれていますが、ページ下部の1回で十分だと思いますが、何か目的があってされているのでしょうか。

投稿2017/02/12 12:42

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

revoiot

2017/02/12 12:58

大変わかりやすいご回答ありがとうございます。さきほど、上の質問画面にデスクトップでの操作画面を添付させていただいたのですが、Javascriptを利用する際は、あるフォルダーに保存された index.html charge.html access.html style.cssに加えて swiper.css swiper.js(その他たくさん) などコードに書かれているファイルすべてを追加してから、FTP環境にuploadとすることでよろしいでしょうか?
kei344

2017/02/12 13:07

このライブラリの場合 swiper.min.css と swiper.min.js だけで問題ないでしょう。 本件とは関係ないですが、スクリーンショットから確認できるのですが、拡張子を非表示にされていますね。表示させたほうがわかりやすいことも多いと思いますよ。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問