大きい画像を上に表示して、左右のボタンで切り替えられるようにしたい。
ここに実現したいことを箇条書きで書いてください。
- 大きい画像を上に表示して、左右の矢印ボタンで画像を切り替えられるようにしたい。
- 切り替える画像が八枚あるのでその画像を大きい画像の下に一列四枚の二段で表示したい。
- ついでに下に表示してある画像をクリックすると上の大きい画像が切り替わるようにしたい。
前提
専門一年生です。
授業でWeb画面制作の課題が出たのですが上手くいかなくなってしまったので質問させていただきます。
わかりにくい説明になってしまっていたら申し訳ないです。
どこが間違っているのかわからないので今書いているコードを全て載せています。
見にくいと思いますがご了承ください。
今上記の実現したいことで書いたようなWeb画面を作りたいと思っています。今は矢印で画像を切り替えたり、下の小さい画像を押すと画像を切り替えるといったシステムは作れているのですが、下の小さい画像がうまく二列に並べることができなくて困っています。Webで開発者ツールを使って確認したのですが、何が悪いのかわからなかったです。
発生している問題・エラーメッセージ
該当のソースコード
html
ホーム画面js
//上部画像の設定
$('.gallery').slick({
infinite: true, //スライドをループさせるかどうか。初期値はtrue。
fade: true, //フェードの有効化
arrows: true,//左右の矢印あり
prevArrow: '<div class="slick-prev"></div>',//矢印部分PreviewのHTMLを変更
nextArrow: '<div class="slick-next"></div>',//矢印部分NextのHTMLを変更
});
//選択画像の設定
$('.choice-btn').slick({
infinite: true, //スライドをループさせるかどうか。初期値はtrue。
slidesToShow: 8, //表示させるスライドの数
focusOnSelect: true, //フォーカスの有効化
asNavFor: '.gallery', //連動させるスライドショーのクラス名
});
//下の選択画像をスライドさせずに連動して変更させる設定。
$('.gallery').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
var index = nextSlide; //次のスライド番号
//サムネイルのslick-currentを削除し次のスライド要素にslick-currentを追加
$(".choice-btn .slick-slide").removeClass("slick-current").eq(index).addClass("slick-current");
});
css
@charset "utf-8";
/* 共通部分 */
*, *::before, *::after {
box-sizing: border-box;
}
html {
font-size: 100%;
}
body{
font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
line-height: 1.7;
color: #432;
}
a {
text-decoration: none;
}
img {
width: 100%;
height: auto;
vertical-align: bottom;
}
.wrapper {
width: 94%;
max-width: 900px;
margin: 0 auto;
padding: 0 4%;
}
/* 背景画像 */
.big-bg {
background-size: cover;
background-position: center top;
}
/* タイトル */
.page-title {
font-size: 4rem;
font-family: 'Philosopher', serif;
text-transform: uppercase;
font-weight: normal;
}
/* ボタン */
.button {
font-size: 1rem;
background-color: #0bd;
color: #fff;
border-radius: 5px;
padding: 18px 32px;
}
/* header */
#index {
background-image: url();
min-height: 100vh;
}
.page-header {
display: flex;
justify-content: space-between;
}
.page-header a {
color: #432;
}
.main-nav {
display: flex;
font-size: 1.25rem;
margin-top: 34px;
list-style: none;
}
.main-nav li {
margin-left: 36px;
}
.main-nav a {
color: #432;
}
/ホーム/
.gallery {
margin: 0 0 5px 0;
}
.slick-prev,
.slick-next {
position: absolute;/絶対配置にする/
z-index: 3;
top: 42%;
cursor: pointer;/マウスカーソルを指マークに/
outline: none;/クリックをしたら出てくる枠線を消す/
border-top: 2px solid #ccc;/矢印の色/
border-right: 2px solid #ccc;/矢印の色/
height: 25px;
width: 25px;
}
.slick-prev {/戻る矢印の位置と形状/
left:2.5%;
transform: rotate(-135deg);
}
.slick-next {/次へ矢印の位置と形状/
right:2.5%;
transform: rotate(45deg);
}
.choice-btn li{
cursor: pointer;
outline: none;
background:#333;
width:25%!important;
}
.choice-btn li img{
opacity: 0.4;/選択されていないものは透過40%/
}
.choice-btn li.slick-current img{
opacity: 1;/選択されているものは透過しない/
}
.choice-btn .slick-track {
transform: unset !important;/画面幅サイズ変更に伴うサムネイル固定/
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
a:hover,
a:active {
text-decoration: none;
}
h1 {
text-align: center;
font-size:6vw;
letter-spacing: 0.1em;
text-transform: uppercase;
margin:30px 0;
}
p {
margin:30px 0;
word-wrap : break-word;
}
/お問い合わせ画面/
#contact {
background-image: url(../img/haikei/contacthaikei1.jpg);
min-height: 100vh;
}
/* フォーム */
form div {
margin-bottom: 14px;
}
label {
font-size: 1.125rem;
margin-bottom: 10px;
display: block;
}
input[type="text"],
input[type="email"],
textarea {
background: rgba(255,255,255,.5);
border: 1px #fff solid;
border-radius: 5px;
padding: 10px;
font-size: 1rem;
}
input[type="text"],
input[type="email"] {
width: 100%;
max-width: 240px;
}
textarea {
width: 100%;
max-width: 480px;
height: 6rem;
}
input[type="submit"] {
border: none;
cursor: pointer;
line-height: 1;
}
試したこと
開発者ツールでチェックを付けたり外したり、波線が出ているところを少しいじってみたりしましたが、何がエラーなのかわかりませんでした。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
0 コメント