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; }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/12 12:58
2017/02/12 13:07