@Tk0707posted at 2023-01-16

カルーセルスライダーの画像から各リンクへ移動できるようにしたいです。

Q&A

Closed

HTML CSS JavaScript スライダーカルーセル

解決したいこと

初めまして。初投稿させていただきます。
（書き方間違っていましたら申し訳ありません。）

上記のカルセールスライダーを作成し、サイトの通りに動きました。
ですが、画像にリンクをつけたく、をつけると、
画像が１つ目のものだけになったり、画像が消えたり、移動できなかったりしました。

どのようにしたら、各画像をクリックし、各リンクへ移動できるようになりますか？
教えていただけますと幸いです。

HTMl と　　CSSだけ元のサイトより変更して書いています。（コメントに変更点を書きました。）

該当するソースコード　HTML

<body>
  <h1 class="demo-title">カルーセル　デモサイト</h1>
  <div class="carousel">
    <ul class="carousel-area">
     
　　　　　　　 <!-- 意味的に画像はimgタグで配置してるが、CSSで非表示にする。 -->
　　　　　　　　　　　　　<!-- ここから元のコードと違います　--> 
　　　　　　　　　　　　<li class="carousel-list">　<a href = "1.html">
　　　　　　　　　　　　<img class="carousel-img" src="A.jpg" alt="ハムスターの画像"> </a> </li>
      <li class="carousel-list"> 　<a href = "2.html">
      <img class="carousel-img" src="B.jpg" alt="羊の画像"> </a> </li>
      <li class="carousel-list">　<a href = "3.html">
      　<img class="carousel-img" src="C.jpg" alt="亀の画像"></li>
      <li class="carousel-list"><a href = "4.html">
      <img class="carousel-img" src="D.jpg" alt="鳥の画像"></li>
      <li class="carousel-list"> <a href = "5.html">
      <img class="carousel-img" src="E.jpg" alt="ライオンの画像"></li>
    <!-- ここまで元のコードと違います　-->

　　　　　　 </ul>
    <div class="arow-wrap">
      <div class="arrow-left">
        <button class="arrow-btn js-btn-back" type="button"></button>
      </div>
      <div class="arrow-right">
        <button class="arrow-btn js-btn-next" type="button"></button>
      </div>
    </div>
    <div class="pagination">
      <span class="pagination-circle target"></span>
      <span class="pagination-circle"></span>
      <span class="pagination-circle"></span>
      <span class="pagination-circle"></span>
      <span class="pagination-circle"></span>
    </div>
  </div>
  <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
  <script type="text/javascript" src="script.js"></script>
</body>

CSS

/* ベースCSS・リセットCSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}
button {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: none;
  border-radius: 0;
}
body {
  overflow: hidden;
}
.demo-title {
  font-size: 24px;
  margin-bottom: 1em;
  padding: 1em 0;
  text-align: center;
  color: #fefefe;
  background-color: royalblue;
}
/*********** ここまでベースCSS・リセットCSS ***********/
.carousel {
  width: 600px;
  height: calc(600px * 0.5625);
  position: relative;
  margin: 0 auto;
}
.carousel-area {
  /* リスト数×リスト幅を計算してwidth指定してもいいが、汎用性を考慮してjQueryで計算代入する */
  height: 100%;
  position: absolute;
  display: flex;
}
/* object-fitを使用せずに画像トリミングさせるためにbackgroundで指定 */
.carousel-list {
  width: 600px;
  height: 100%;
  margin-right: 30px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media screen and (max-width: 600px) {
  .carousel {
    width: 300px;
    height: calc(300px * 0.5625);
  }
  .carousel-list {
    width: 300px;
    height: calc(300px * 0.5625);
    margin-right: 0;
  }
}

/*********** ここから元のコードと違います ***********/
.carousel-list:nth-child(1) {
  background-image: url(A.jpg);
}
.carousel-list:nth-child(2) {
  background-image: url(B.jpg);
}
.carousel-list:nth-child(3) {
  background-image: url(C.jpg);
}
.carousel-list:nth-child(4) {
  background-image: url(D.jpg);
}
.carousel-list:nth-child(5) {
  background-image: url(E.jpg);
}
/*********** ここまで元のコードと違います ***********/

/* clipで非表示指定（スクリーンリーダー対策） */
.carousel-img {
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute;
}
/*********** スライド送りボタン ***********/
/* 共有パーツ */
.arow-wrap {
  width: 90%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.arrow-btn {
  width: 48px;
  height: 48px;
  background-color: rgba(113, 135, 245, 0.8);
  border-radius: 50%;
  transition: .2s;
}
.arrow-btn:focus {
  box-shadow: 0px 1px 10px -2px rgba(0, 0, 0, 0.8);
}
.arrow-btn:hover {
  background-color: rgb(51, 79, 216);
  box-shadow: 0px 1px 10px -2px rgba(0, 0, 0, 0.8);
}
/* 左 */
.arrow-left {
  position: relative
}
.arrow-left:before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #fefefe;
  border-left: 2px solid #fefefe;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-30%, -50%)rotate(-45deg);
}
/* 右 */
.arrow-right {
  position: relative
}
.arrow-right:before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #fefefe;
  border-left: 2px solid #fefefe;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-70%, -50%)rotate(135deg);
}
@media screen and (max-width: 600px) {
  .arrow-btn {
    width: 30px;
    height: 30px;
  }
}
/*********** ページネーション ***********/
.pagination {
  width: 150px;
  margin: 5% auto 0;
  display: flex;
  justify-content: space-around;
}
.pagination-circle {
  width: 20px;
  height: 20px;
  border: 1px solid #333;
  border-radius: 50%;
  background-color: rgba(83, 97, 223, 0.3);
}
/* jsでtargetクラスがついたら背景色を変える */
.pagination-circle.target {
  background-color: rgba(83, 97, 223, 0.8);
}

JavaScript　元のサイトからそのまま引用しています

$(function () {
  //////////////////////////// 【必要な変数を定義】////////////////////////////
  //////////  スライドリストの合計幅を計算→CSSでエリアに代入
  let width = $('.carousel-list').outerWidth(true); // .carousel-listの1枚分の幅
  let length = $('.carousel-list').length; // .carousel-listの数
  let slideArea = width * length; // レール全体幅 = スライド1枚の幅 × スライド合計数
  $('.carousel-area').css('width', slideArea); // カルーセルレールに計算した合計幅を指定
  //////////  スライド現在値と最終スライド
  let slideCurrent = 0; // スライド現在値（1枚目のスライド番号としての意味も含む）
  let lastCurrent = $('.carousel-list').length - 1; // スライドの合計数＝最後のスライド番号
  ////////////////////////////【スライドの動き方+ページネーションに関する関数定義】////////////////////////////
  ////////// スライドの切り替わりを「changeslide」として定義
  function changeslide() {
    $('.carousel-area').stop().animate({ // stopメソッドを入れることでアニメーション1回毎に止める
      left: slideCurrent * -width // 代入されたスライド数 × リスト1枚分の幅を左に動かす
    });
    ////////// ページネーションの変数を定義（＝スライド現在値が必要）
    let pagiNation = slideCurrent + 1; // nth-of-typeで指定するため0に＋1をする
    $('.pagination-circle').removeClass('target'); // targetクラスを削除
    $(".pagination-circle:nth-of-type(" + pagiNation + ")").addClass('target'); // 現在のボタンにtargetクラスを追加
  };
  /////////////////////////【自動スライド切り替えのタイマー関数定義】/////////////////////////
  let Timer;
  ////////// 一定時間毎に処理実行する「startTimer」として関数を定義
  function startTimer() {
    // 変数Timerに下記関数内容を代入する
    Timer = setInterval(function () { // setInterval・・・指定した時間ごとに関数を実行
      if (slideCurrent === lastCurrent) { // 現在のスライドが最終スライドの場合
        slideCurrent = 0;
        changeslide(); // スライド初期値の値を代入して関数実行（初めのスライドに戻す）
      } else {
        slideCurrent++;
        changeslide(); // そうでなければスライド番号を増やして（次のスライドに切り替え）関数実行
      };
    }, 3000); // 上記動作を3秒毎に
  }
  ////////// 「startTimer」関数を止める「stopTimer」関数を定義
  function stopTimer() {
    clearInterval(Timer); // clearInterval・・・setIntervalで設定したタイマーを取り消す
  }
  //////// 自動スライド切り替えタイマーを発動
  startTimer();
  /////////////////////////【ボタンクリック時関数を呼び出し】/////////////////////////
  // NEXTボタン
  $('.js-btn-next').click(function () {
    // 動いているタイマーをストップして再度タイマーを動かし直す（こうしないとページ送り後の秒間隔がズレる）
    stopTimer();
    startTimer();
    if (slideCurrent === lastCurrent) { // 現在のスライドが最終スライドの場合
      slideCurrent = 0;
      changeslide(); // スライド初期値の値を代入して関数実行（初めのスライドに戻す）
    } else {
      slideCurrent++;
      changeslide(); // そうでなければスライド番号を増やして（次のスライドに切り替え）関数実行
    };
  });
  // BACKボタン
  $('.js-btn-back').click(function () {
    // 動いているタイマーをストップして再度タイマーを動かし直す（こうしないとページ送り後の時間間隔がズレる）
    stopTimer();
    startTimer();
    if (slideCurrent === 0) { // 現在のスライドが初期スライドの場合
      slideCurrent = lastCurrent;
      changeslide(); // 最終スライド番号を代入して関数実行（最後のスライドに移動）
    } else {
      slideCurrent--;
      changeslide(); // そうでなければスライド番号を減らして（前のスライドに切り替え）関数実行
    };
  });
});

自分で試したこと

をの前に書いたり、後ろに書きましたがうまくいきません。
また、を、li class="listA">・・listB・・・と一つ一つクラス各方法も試してみましたが
うまくいきませんでした。

0 likes

Are you sure you want to delete the question?

カルーセルスライダーの画像から各リンクへ移動できるようにしたいです。

解決したいこと

該当するソースコード　HTML

自分で試したこと

1Answer

Comments

Your answer might help someone💌

カルーセルスライダーの画像から各リンクへ移動できるようにしたいです。

解決したいこと

該当するソースコード HTML

自分で試したこと

1Answer

Comments

Your answer might help someone💌

該当するソースコード　HTML