デイトラweb制作上級編 DAY31~44③
nakano
卒業制作課題 3日目
PC版
スマホ版
苦戦したところ
①ループするスライドショーの実装
<div class="swiper__container-pc">
<div class="swiper infinite-slider">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/img-mv01_pc.png" alt="画像1" /></div>
<div class="swiper-slide"><img src="./img/img-mv02_pc.png" alt="画像2" /></div>
<div class="swiper-slide"><img src="./img/img-mv03_pc.png" alt="画像3" /></div>
</div>
</div>
</div>/* コンテナー */
.swiper__container-pc {
position: relative;
@include mq('sp') {
display: none;
}
}
/* スライダーのwrapper */
.swiper-wrapper {
transition-timing-function: linear;
}
/* スライド */
.swiper-slide {
height: 100% !important;
/* 高さを指定 */
width: 100% !important;
img {
height: 100%;
}
}window.addEventListener("DOMContentLoaded", () => {
const infiniteSlider = new Swiper(".infinite-slider", {
loop: true,
slidesPerView: "auto",
speed: 13000,
autoplay: {
delay: 0,
disableOnInteraction: false,
},
});
});demoサイトのようなスライドの場合↓
window.addEventListener("DOMContentLoaded", () => {
const infiniteSlider = new Swiper(".infinite-slider", {
loop: true,
slidesPerView: "auto",
autoplay: {
delay: 3000,
disableOnInteraction: false
},
});
});参考記事
②斜線が入った背景
<section class="about">
<div class="about__bg">
・
・
・
</div>
</div>.about {
background: linear-gradient(transparent 31%, #EDF3F8 31%);
transform: skewY(10deg);
}
.about__bg {
transform: skewY(-10deg);
}transform: skewY(10deg); で全体を斜めにした後に
transform: skewY(-10deg); で中の要素を元に戻して、背景だけ斜めにする
参考記事
まとめ
今回も卒業制作課題を進めました。
やっぱり難しい。。。
PC表示はできてもスマホ表示がなかなかうまくできなくて、行っては戻ってを繰り返してました。
反省点はいろいろあるので、しっかり反省して明日以降に活かしたいと思います！
