この質問は昨日私がしたものと同じですが、回答者様の助言から、HTML,CSSコードを変えたり、js,cssファイルを新たにファイルに追加いたしました。
昨日いただいた回答を参考にコードを書き直したり、ファイルを付け加えても、メイン画像三枚が縦に並んでいる状況が改善できなかったため、新たに質問させていただくことにしました。
画像を正常に横スライドさせるために、どうすればいいでしょうか?
大変恐縮ですが、この質問がわかる方、ご教授頂けないでしょうか?
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> <title>京都一の美容院 美容所joze & ARCH OF JOZE 烏丸御池</title> <link rel="stylesheet" href="style.css" type="text/css"> <meta http-equiv="Content-Style-Type" content="text/css" charset="UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="canonical" href="http://home.rasysa.com/joze//" /> <meta name="google-site-verification" content="90gP3x903Ua67pxDZYw1bEZEahbU6ZMV04ttkuUdU8A" /> <meta name="Description" content="経験豊富な若手の男女スタッフが、お客様の思い通りのヘアスタイルを実現します" /> <meta name="Keywords" content="美容院,カラー,ヘッドスパ,烏丸御池" /> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-42814292-1', 'home.rasysa.com'); ga('send', 'pageview'); </script> <script type="text/javascript"> <link rel="stylesheet" href="C:\Users\snowman\Desktop\main files\swiper.min.css"> </head> <body> <div id="fb-root"> </div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <script src="C:\Users\snowman\Desktop\main files\swiper.min.js"></script> <script src="C:\Users\snowman\Desktop\main files\swiper.jquery.js"></script> <head> ~省略~ <script type="text/javascript"> <link rel="stylesheet" href="C:\Users\snowman\Desktop\main files\swiper.min.css"> </head> <body> <script src="C:\Users\snowman\Desktop\main files\swiper.min.js"></script> <script src="C:\Users\snowman\Desktop\main files\swiper.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> ~省略~ </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="C:\Users\snowman\Desktop\main files\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; } コード
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/13 06:32
2017/02/13 06:36
2017/02/13 06:46
2017/02/13 07:16
2017/02/13 08:27
2017/02/13 08:34