カルーセル、モーダルの表示方法について
解決したいこと
今、画面上部にカルーセル、下部にモーダルを表示しようとしています。
ただ、カルーセルのコードの下にモーダルを書いても、画像のように記入されている痕跡はあるのに画面に上手く表示できません。
この後、コードのようにモーダルの画像をクリックしたら画像と説明文が表示され、画面上部のバツボタンを押すと閉じる仕組みを三枚の画像にあてたいと思っています。
どなたかアドバイスお願いします。
または、問題・エラーが起きている画像をここにドラッグアンドドロップ
該当するソースコード
ソースコードを入力
HTMLのコード
```<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>カルーセルのサンプル</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
<style>
.content {
position: relative;
}
/* 画像に合わせてカルーセルの高さを調整 */
.slick-slide {
height: auto;
}
/* 背景の色に合わせて前後の矢印の色を調整 */
.slick-prev:before,
.slick-next:before {
color: #000;
}
</style>
</head>
<body>
<header>
<div class="container">
<h1><img src="images/logo.png" alt="CookCampロゴ" </h1>
</div>
</header>
<div class="box">
<div class="carousel">
<!-- このセレクタを JavaScript で指定する -->
<img src="images/key_visual.jpg" alt="画像1">
<img src="images/key_visual2.jpg" alt="画像2">
<img src="images/key_visual3.jpg" alt="画像3">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js" integrity="sha256-DHF4zGyjT7GOMPBwpeehwoey18z8uiz98G4PRu2lV0A=" crossorigin="anonymous"></script>
<script type="text/javascript" src="提出課題.js">
// カルーセルにするセレクタを指定する
</script>
<div>
<ul>
<li><a href="images/image01.jpg" data-group="gallery" class="show" data-modaal-desc="様々な食材を使用し作り上げた色とりどりの前菜はテーブルをカラフルに彩ります♪" alt="" width="100"></a></li>
</ul>
</div>
</body>
</html>
CSSのコード
.box {
position: relative;
overflow: hidden;
}
.carousel {
max-width: 100%;
margin: 0 auto;
overflow: visible;
}
.slick-arrow {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
/*.arrow {
left: 0;
z-index: 10;
}
.arrow2 {
right: 0;
}*/
.slide-arrow{
position: absolute;
top: 50%;
margin-top: -16px;
width: 20px;
height: 33px;
opacity:0.7;
z-index:10;
}
.prev-arrow{
left: 5px;
}
.next-arrow{
right: 5px;
}
JSのコード
$('.carousel').slick({
// ここに slick のオプションを指定
dots: true,
autoplay: true,
autoplaySpeed: 5000,
prevArrow: '<img src="images/arrow.png" class="slide-arrow prev-arrow">',
nextArrow: '<img src="images/arrow2.png" class="slide-arrow next-arrow">',
});
自分で試したこと
ここに問題・エラーに対して試したことを記載してください。
0
