Vue Carousel 3Dのカスタマイズについて教えてください！
解決したいこと
Vue Carousel 3Dのカスタマイズについて教えてください。
Vue Carousel 3Dを使ってスライダーを実装したいのですが、
スライドサイズの調整ができません。
レスポンシブにも対応させたいのですが、できるのでしょうか？
【詳細】
・ワードプレスのページ内に、スライダーを実装
・1ページに３つのスライダーを設置し、それぞれタブ切り替えで表示させる
・スライドの表示枚数は5枚（総スライド数は15枚程度）
・スライドサイズ？コンテナサイズ？を可変にして、レスポンシブにも対応させたい
・現状1枚のスライドサイズが固定される
発生している問題・エラー
スライドサイズの調整ができない
該当するソースコード
<div class="p-carousel">
<div id="carousel01">
<carousel-3d :controls-visible="true" :clickable="true" :perspective="0" :space="200">
<slide :index="0">
<span class=num">1</span>
<div class="p__img">
<img src="<?php img_path() ?>/aaa/aaa.webp" alt="省略">
</div>
<p class="p__title">aaaaa</p>
<p class="p__title">aaaaaaaaaaaaaaaaaa</p>
</slide>
<slide :index="1">
<span class=num">2</span>
<div class="p__img">
<img src="<?php img_path() ?>/aaa/aaa.webp" alt="省略">
</div>
<p class="p__title">aaaaa</p>
<p class="p__title">aaaaaaaaaaaaaaaaaa</p>
</slide>
<slide :index="2">
<span class=num">3</span>
<div class="p__img">
<img src="<?php img_path() ?>/aaa/aaa.webp" alt="省略">
</div>
<p class="p__title">>aaaaa</p>
<p class="p__title">aaaaaaaaaaaaaaaaaa</p>
</slide>
<slide :index="3">
<span class=num">4</span>
<div class="p__img">
<img src="<?php img_path() ?>/aaa/aaa.webp" alt="省略">
</div>
<p class="p__title">aaaaa</p>
<p class="p__title">>aaaaaaaaaaaaaaaaaa</p>
</slide>
中略
<slide :index="8">
<span class=num">9</span>
<div class="p__img">
<img src="<?php img_path() ?>/aaa/aaa.webp" alt="省略">
</div>
<p class="p__title">aaaaa</p>
<p class="p__title">aaaaaaaaaaaaaaaaaa</p>
</slide>
<slide :index="9">
<span class=num">10</span>
<div class="p__img">
<img src="<?php img_path() ?>/aaa/aaa.webp" alt="省略">
</div>
<p class="p__title">aaaaa</p>
<p class="p__title">aaaaaaaaaaaaaaaaaa</p>
</slide>
</carousel-3d>
</div>
</div>
//【functions.php】
// // Vue Carousel 3D読み込み
function load_carousel3d_script() {
// 特定のページスラッグまたはIDに合わせて条件を設定
if (is_page('aaa')) {
// Vue.jsの読み込み（CDNから）
wp_enqueue_script('vuejs', 'https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js', array(), null, true);
// Carousel3Dのスクリプトの読み込み
wp_enqueue_script('carousel3d', '//cdn.jsdelivr.net/npm/vue-carousel-3d@0.2.0/dist/vue-carousel-3d.min.js', array('vuejs'), null, true);
// カスタムJSの追加
wp_add_inline_script('carousel3d', '
window.addEventListener("load", function() {
// Carousel01のVueインスタンス
new Vue({
el: "#carousel01",
data: {
slides: 3,
width: "auto", // widthを自動に設定
height: "auto" // heightを自動に設定
},
components: {
"carousel-3d": Carousel3d.Carousel3d,
"slide": Carousel3d.Slide
},
mounted() {
this.$el.style.visibility = "visible";
},
});
// Carousel02のVueインスタンス
new Vue({
el: "#carousel02",
data: {
slides: 16,
width: "auto", // widthを自動に設定
height: "auto" // heightを自動に設定
},
components: {
"carousel-3d": Carousel3d.Carousel3d,
"slide": Carousel3d.Slide
},
mounted() {
this.$el.style.visibility = "visible";
},
});
// Carousel03のVueインスタンス
new Vue({
el: "#carousel03",
data: {
slides: 16,
width: "auto", // widthを自動に設定
height: "auto" // heightを自動に設定
},
components: {
"carousel-3d": Carousel3d.Carousel3d,
"slide": Carousel3d.Slide
},
mounted() {
this.$el.style.visibility = "visible";
},
});
});
');
}
}
add_action('wp_enqueue_scripts', 'load_carousel3d_script');
// Vue Carousel 3D
// 必要そうな箇所だけ抽出しました。
//無駄な記述が多いので、このあたり調整していただけるとありがたいです。
.carousel-3d-container{
height: auto !important;
overflow: visible !important;
}
.p-carousel{
visibility: hidden;
}
.carousel-3d-slide{
border: none !important;
background: none !important;
max-width: prem(400) !important;
width: prem(500) !important;
height: auto !important;
@include mq(md){
width: prem(200) !important;
}
&.current{
.p__text{
display: block;
}
}
}
自分で試したこと
・cssでwidthとheightをautoにした
・widthとheighを「％」で指定すると、スライダー自体が表示されなくなる
他必要な情報がありましたらコメントください。
※当方、Qiitaも初心者ですので、お手柔らかにお願いいたします
0 likes
