いつもお世話になっております。
Dawnテーマでの、Swiperカスタマイズでつまづいており、お分かりになる方がいらっしゃいましたらご教授頂けますと幸いです。
【完成形】
センターモードで.swiper-slide-activeを大きさ100%、その他は大きさ85%で透過50%のスライダー
【課題】
◆.swiper-slide、.swiper-slide-activeにcssが効かない ( 仕方なく現状では.swiper-slide img、.swiper-slide-active imgに適用している)
◆prev、nextの矢印が表示されない
【swiper.liquid】
{% style %}
.slider {
position: relative;
width: 100%;
margin: 40px auto;
}
.swiper {
max-width: 100%;
height: auto;
}
.swiper-pagination {
bottom: -40px!important;
text-align: right!important;
padding-right: 2.0rem;
}
.swiper-button-next {
right: 50px!important;
}
.swiper-button-prev {
left: 50px!important;
}
.slide-img img{
width: 100%;
height: auto;
}
.swiper-slide img {
opacity: .5;
transform: scale(.85);
transition: .8s;
}
.swiper-slide-active img {
opacity: 1;
transform: scale(1);
z-index: 1;
}
{% endstyle %}
<section class="slider">
<div class="swiper">
<div class="swiper-wrapper">
{%- for block in section.blocks -%}
<a href="{{ block.settings.link }}" class="swiper-slide">
<picture class="slide-img">
<source media="(max-width: 768px)" srcset="{{ block.settings.image_sp | img_url: 'master' }}">
<source media="(min-width: 769px)" srcset="{{ block.settings.image_pc | img_url: 'master' }}">
<img src="{{ block.settings.image_noimg | img_url: 'master' }}" alt="image" loading="lazy">
</picture>
</a>
{% endfor %}
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</section>
{% schema %}
{
"name": "slider",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "header",
"content": "スライドショーの表示"
}
],
"blocks": [
{
"type": "heading",
"name": "画像",
"limit": 10,
"settings": [
{
"type": "url",
"id": "link",
"label": "リンク"
},
{
"type": "image_picker",
"id": "image_noimg",
"label": "代替画像",
"info": "設定がない場合に表示される画像"
},
{
"type": "header",
"content": "PC用"
},
{
"type": "image_picker",
"id": "image_pc",
"label": "PC用画像",
"info": "769px以上で表示 推奨画像サイズ：1920×1080px(16:9)"
},
{
"type": "header",
"content": "スマホ用"
},
{
"type": "image_picker",
"id": "image_sp",
"label": "スマホ用画像",
"info": "768px以下で表示 推奨画像サイズ：750×1500px"
}
]
}
],
"presets": [
{
"name": "swiper slider",
"blocks": [
]
}
]
}
{% endschema %}
{% javascript %}
const swiper = new Swiper('.swiper', {
loop: true,
effect: 'slide',
spaceBetween: 0,
slidesPerView: 1.8,
centeredSlides: true,
speed: 800,
autoplay: {
delay: 6000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
{% endjavascript %}
