• はてなアカウントでログイン
• 無料ユーザー登録

ベストアンサー

• a-kuma32015/03/06 23:47:33

  満足300pt

  まず、文字にする場合。
  index06.html の後半にある <script> に以下のように追記します。

  <script>
      var glide = $('.slider').glide().data('api_glide');
  
      $(window).on('keyup', function (key) {
          if (key.keyCode === 13) {
              glide.jump(3, console.log('Wooo!'));
          };
      });
  
      $('.slider__arrows-item').on('click', function() {
          console.log(glide.current());
      });
  
      // ★ここから
      var content = ['会社概要', '会社案内', '文字３', '文字４', '文字５', '文字６', '文字７',];
      $(".slider__nav-item").each(function(index) {
          $(this).text(content[index])
      });
      // ★ここまでを追加
  </script>
  
  <!-- ★以下のスタイルを追加 -->
  <style>
  div.slider__nav {
      width: 350px !important;
      margin-left: -175px !important;
  }
  </style>
  

  .slider__nav の width と margin-left の値は、適当に調整してください。
  width を表示する文字の幅に合わせて、その半分の値を margin-left に設定します。
  
  
  イメージファイルの場合。

  <script>
      var glide = $('.slider').glide().data('api_glide');
  
      $(window).on('keyup', function (key) {
          if (key.keyCode === 13) {
              glide.jump(3, console.log('Wooo!'));
          };
      });
  
      $('.slider__arrows-item').on('click', function() {
          console.log(glide.current());
      });
  
      // ★ここから
      var image_url = ['/images/1.jpg', '/images/2.jpg', '/images/3.jpg', '/images/4.jpg', '/images/5.jpg', '/images/6.jpg', '/images/7.jpg',];
      $(".slider__nav-item").each(function(index) {
          var img = $("<img />");
          img.attr("src", image_url[index]);
          $(this).append(img);
      });
      // ★ここまでを追加
  </script>
  
  <!-- ★以下のスタイルを追加 -->
  <style>
  div.slider__nav {
      width: 300px !important;
      margin-left: -150px !important;
  }
  .slider__nav-item img { /* これは無くても良いかも */
      width: 100px;
  }
  </style>
  

  .slider__nav の width と margin-left の調整の仕方は、文字の場合と同じです。

  スター

  • 

    2件のコメントを見る

  • kohhi 2015/03/07 11:49:23

    早速お返事いただき、ありがとうございます。

    スター

  • kohhi 2015/03/07 12:00:07

    出来ました。いつもありがとうございます。

    スター

その他の回答

この質問へのコメント

質問の情報

登録日時

2015-03-06 22:07:35

終了日時

2015-03-07 12:00:32

回答条件

1人1回まで

この質問のカテゴリ

• ウェブ制作

この質問に含まれるキーワード

人気の質問

• こんにちは。 学生です。友達が学校にスマホを持ってきているんです。私は正義感が強いので見て見ぬふり出…匿名質問者11日前
• SPO（https://…）のドキュメントライブラリ内にVBAでフォルダを作成する方法 ドライブレターが付与された…keijun51451日前
• 蒙古襞形成術で、目を小さくするという手術はありますが、どれくらいの小ささになるのでしょうか。目の間を…匿名質問者12日前
• 運輸業者、輸出業者、輸入業者、というときにと使う「輸」という文字ですけど、中国語ですと、「負ける」と…匿名質問者113日前
• 日本政治家が、中国企業からお金を貰い、日本人の税金を使い、中国商品１つにつき補助金８０万円とかで配布…匿名質問者2日前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ