swiper について・・・
Q&A
解決したいこと
pc画面幅でswiperが表示されない
発生している問題・エラー
検証ツールでスマホ画面を選択してからpc画面に戻ると表示される
解決方法を教えて下さい。
または、問題・エラーが起きている画像をここにドラッグアンドドロップ
該当するソースコード
- 2021.01.01
-
ダミー_国内外から賞賛を受けた選りすぐりのデザイナーが集結し、あらゆる空間が誕生。
とってもおいしい、
ほっと落ち着くのんびり空間。
とってもおいしい、
ほっと落ち着くのんびり空間。
とってもおいしい、
ほっと落ち着くのんびり空間。
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
</div>
css言語
@media screen and (min-width: 680px) {
#g-nav{
position:static !important;
width:72% !important;
background: #F3EFEB !important;
}
}
#g-nav{
/position:fixed;にし、z-indexの数値を大きくして前面へ/
position:fixed;
z-index: 999;
/ナビのスタート位置と形状/
top:0;
right: -120%;
width:100%;
height: 100vh;/ナビの高さ/
background: #382620;;
/動き/
transition: all 0.6s;
}
/アクティブクラスがついたら位置を0に/
#g-nav.panelactive{
right: 0;
}
/ナビゲーションの縦スクロール/
#g-nav.panelactive #g-nav-list{
/ナビの数が増えた場合縦スクロール/
position: fixed;
z-index: 999;
width: 100%;
height: 100vh;/表示する高さ/
overflow: auto;
-webkit-overflow-scrolling: touch;
}
/ナビゲーション/
@media screen and (min-width: 680px) {
#g-nav ul {
left:13% !important;
}
}
#g-nav ul {
/ナビゲーション天地中央揃え/
position: absolute;
z-index: 999;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
/リストのレイアウト設定/
#g-nav li{
list-style: none;
text-align: center;
}
@media screen and (min-width: 680px) {
#g-nav li a{
color: #222 !important;
text-align: center;
font-size: 16px !important;
letter-spacing: 1.92px !important;
}
}
#g-nav li a{
color: #FFF;
font-family: Patua One;
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 2.88px;
text-decoration: none;
padding:10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;
}```
自分で試したこと
swiperの設定から戻りましたが表示の問題なのかcssの設定なのかわかりません💦
