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

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

ただいまの
回答率

88.80%

swiperをダウンロードしたが、スライドが実装できない

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 344

FujitaMaho

score 13

先日、swiperのデモをダウンロードして自分が作成しているサイトに反映させようと思ったのですが、スライドについているボタンを押しても次の要素が表示されません。
htmlには、swiper.min.cssとswiper.js・swiper.min.jsをリンクさせています。
原因がわからないので、ご教授願いたいです...。
特にエラーは出ていません。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Headphones - Beautiful Design, Great Great Sound|B&amp;O</title>
    <meta name="description" content="ヘッドフォン,BANG & OLUFSEN">
    <meta property="og:site_name" content="Headphones - Beautiful Design, Great Great Sound|B&amp;O">
    <meta property="og:title" content="日常に彩を">
    <meta property="og:type" content="website">
    <meta property="og:url" content="http://test007.members-dev.com/http://localhost:3000/">
    <meta property="og:image" content="http://test007.members-dev.com/[サイトのOGP画像※1]">
    <meta property="og:description" content="音質にこだわりを持つお金もちの女性(30代~40代)に対して「日常に彩を」というコンセプトをもとにヘッドフォンを紹介します。">
    <meta name="twitter:card" content="summary">
    <link rel="shortcut icon" href="/path/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css">
    <script type="text/javascript"src="./assets/js/fadein.js"></script>
    <script src="./assets/js/swiper.min.js"></script>
    <script src="./assets/js/swiper.js"></script>
    <link rel="stylesheet" href="./assets/css/style.css">
    <link rel="stylesheet" href="./assets/css/swiper.min.css">
</head>
<body>
        <script>
        var swiper;
    swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        direction: 'vertical',
        touchAngle: 90,
    });
         </script>
            <!-- ヘッダー -->
            <header class="l-header">
               <div class="l-header__topimage">
                 <div class="l-header__all">
              <nav class="l-header__nav">
                 <div class="l-header__logo">
                   <a href="#top"><img src="assets/images/logo.png"></a>
                 </div>
                  <ul class="l-header__list">
                    <li class="l-header__item"><a class="item__child" href="#top">Top</a></li>
                    <li class="l-header__item"><a class="item__child" href="#feature">Feature</a></li>
                    <li class="l-header__item"><a class="item__child" href="#gallery">Gallery</a></li>
                    <li class="l-header__item"><a class="item__child" href="#eventReport">Event&nbsp;Report</a></li>
                  </ul>      
              </nav>
                </div>
               </div>
              </header>
    <!-- ヒーローエリア -->
      <div class="p-heroArea">
           <div class="p-heroArea__catchCopy">
             <h1 class="p-heroArea__title1">BEOPLAY&nbsp;H6</h1>
             <p class="p-heroArea__sentence1">
               プレミアムな音で<br>プレミアムな時間を提供する。<br>
               世界最高の音質のヘッドフォン。
             </p>
             <div class="p-heroArea__catchCopy--btn">
              <a class="online--btn" href="#onlinestor">オンラインストアで購入する</a>
            </div>
          </div>
        </div>
       </div>
       <!-- 余白 -->
       <div class="u-yohaku"></div>
       <!-- プロダクト -->
       <!-- Featureエリア -->
       <div class="p-projectsArea">
           <div class="p-projectsArea__contents">
               <div class="p-projectsArea__feature">
               <h1 class="p-projectsArea__title1">Feature</h1>
               <div class="u-projectyohaku1"></div>
               <div class="swiper-container">
                <div class="swiper-wrapper">
                        <div class="swiper-slide">
                                    <img class="icons--btn" src="assets/images/PFM_icon.png" width="70px"heigth="70px">
                                    <img class="icons--btn" src="assets/images/Material2.png" width="70px" height="70px">
                                    <img class="icons--btn" src="assets/images/conect2.png" width="70px"height="70px">
                                 <div class="u-projectyohaku1"></div>
                                 <div class="allimage1">
                                         <div class="squareDeepred"></div>
                                         <div class="squarelightred"></div>
                                         <div class="youso1">
                                            <img class="imgfwoman" src="assets/images/F_woman.png">
                                                 <div class="contents__description1">
                                                    <h2 class="contents__heading1">Bang&amp;Olufsen Signature&nbsp;Sound</h2>
                                                     <p class="contents__sentence1">
                                                        カスタムデザインの40㎜を採用。自然な定位を実現するため、研究の結果から得られた最適な角度でドライバーを取り付けています。
                                                        また、ハウジングにはベースポートを内蔵し、量感豊かで迫力のある音程を再現。
                                                        さらに新たなチューニングを施し、広いサウンドステージと本格的でクリーンなサウンドパフォーマンスを実現しました。
                                                    </p>
                                                </div>
                                            </div>
                                    </div>
                            </div>
                            <div class="swiper-slide">
                                    <img class="icons--btn" src="assets/images/PFM_icon2.png" width="70px" height="70px">
                                    <img class="icons--btn" src="assets/images/Material.png" width="70px" height="70px">
                                    <img class="icons--btn" src="assets/images/conect2.png" width="70px" height="70px">
                                    <p class="contents__sentence1">
                                            カスタムデザインの40㎜を採用。自然な定位を実現するため、研究の結果から得られた最適な角度でドライバーを取り付けています。
                                            また、ハウジングにはベースポートを内蔵し、量感豊かで迫力のある音程を再現。
                                            さらに新たなチューニングを施し、広いサウンドステージと本格的でクリーンなサウンドパフォーマンスを実現しました。
                                           </p>
                            </div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>
    </div>
        <div class="u-yohaku"></div>
</body>
</html>
body {
  margin: 0%;
  padding: 0%;
  width: 1400px;
  height: 4670px;
  font-family: 'Century Gothic' , Book Antiqua, UICentury Gothic, Noto Sans JP Light, Noto Serif JP Light, Yu Gothic;
  background: white;
  color: black; }
  @media (max-width: 750px) {
    body {
      background: yellow; } }

.l-lighting {
  position: relative; }

.l-header {
  width: 1400px;
  height: 770px; }

.l-header__topimage {
  width: 1400px;
  height: 770px;
  background-image: url("../images/top.jpg"); }

.l-header__all {
  margin: 0 auto;
  padding: 25px 0px;
  width: 1000px;
  height: 100px; }

.l-header__logo {
  position: absolute; }

.l-header__list {
  text-align: right;
  font-size: 20pt; }

.l-header__item {
  display: inline-block;
  padding: 0px 0px 0px 60px; }

.item__child {
  text-decoration-line: none;
  color: black; }

.p-heroArea {
  width: 500px;
  height: 536px;
  left: 200px;
  top: 160px;
  position: absolute; }

.p-heroArea__catchCopy {
  padding: 64px 0px;
  border-top: 1px solid black;
  border-bottom: 1px solid black; }

.p-heroArea__title1 {
  margin: 0%;
  font-weight: normal;
  font-size: 48px; }

.p-heroArea__sentence1 {
  font-size: 20pt; }

.p-heroArea__catchCopy--btn {
  width: 500px;
  height: 103px; }

.online--btn {
  padding: 20px;
  font-size: 20pt;
  text-decoration: none;
  text-align: center;
  display: block;
  color: white;
  background-color: black; }

.u-yohaku {
  height: 200px; }

.p-projectsArea {
  width: 1400px;
  height: 950px;
  position: relative; }

.p-projectsArea__contents {
  margin: 0 auto;
  width: 1000px;
  height: 950px; }

.p-projectsArea__title1 {
  margin: 0%;
  font-size: 40pt;
  font-weight: normal; }

.u-projectyohaku1 {
  height: 100px; }

.icons--btn {
  padding-left: 202px; }

.allimage1 {
  width: 1000px;
  height: 950px;
  position: relative; }

.squareDeepred {
  margin: 0%;
  width: 152px;
  height: 152px;
  position: absolute;
  float: left;
  background: #a17070; }

.squarelightred {
  width: 500px;
  height: 300px;
  margin-top: 55px;
  margin-left: 50px;
  float: left;
  background: #d99898; }

.youso1 {
  position: absolute; }

.contents__description1 {
  display: inline-block;
  width: 500px;
  vertical-align: bottom; }

.contents__heading1 {
  font-family: Book Antiqua;
  font-weight: normal;
  font-size: 38pt; }

.contents__sentence1 {
  width: 500px;
  font-size: 25px; }

.p-projectArea__gallery {
  margin: 0 auto;
  width: 1000px;
  height: 10007px; }

.p-projectsArea__title2 {
  margin: 0%;
  font-size: 40pt;
  font-weight: normal; }

スライドさせたい場所は、プロジェクトエリアのFeaTureのところです。
コードが未完成なのと、私の書き方が未熟なので見づらくなっていてすいません...
よろしくお願いします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/05/07 13:05

    Swiper部分だけを実装したミニマムコードをまず試してください。(結果を質問本文に追記してください)
    でないと何が影響するか分からないですし、問題の切り分けも難しくなります。

    キャンセル

  • FujitaMaho

    2019/05/07 13:59

    承知しました。

    キャンセル

回答 1

checkベストアンサー

0

下記部分を</body>の直前の位置まで移動してみてください。

        <script>
        var swiper;
    swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        direction: 'vertical',
        touchAngle: 90,
    });
         </script>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/07 14:02

    移動してみましたが、反応がありませんでした...。

    キャンセル

  • 2019/05/07 14:13 編集

    ごめんなさい!
    ちゃんと、動くようになりました!
    ありがとうございます。

    <script></script>にボタンの動きをつけて、direction: 'vertical'を削除したら横にスクロールされるようになりました。

    キャンセル

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

  • ただいまの回答率 88.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る