ワードプレスのWEBサイト構築を行う中で、swiperの挙動がモバイルのときのみおかしくなる
解決したいこと
swiperで実装したスライダーがモバイルのみ挙動がおかしくなる。
レイアウトやデスクトップでの表示はうまくいっています。
発生している問題・エラー
読み込み時はよいのですがタップしたり、スクロールすると同じスライドが表示され続けたり、スライド切り替えの速度が速まってしまいます。
//読み込みはCDN,swiper-bundle
function theme_enqueue_swiper()
{
// Swiper CSSの追加
wp_enqueue_style('swiper-css', 'https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css');
// Swiper JSの追加
wp_enqueue_script('swiper-js', 'https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js', array(), false, true);
}
add_action('wp_enqueue_scripts', 'theme_enqueue_swiper');
//スライダー
<div class="slider-wrap">
<div class="slider-wrap__inner">
<?php if (is_front_page()) :
$slider_text = get_theme_mod('slider_text', 'デフォルトテキスト'); // カスタマイザーからテキストを取得
$args = array(
'post_type' => 'slider_images',
'posts_per_page' => -1,
);
$the_query = new WP_Query($args);
if ($the_query->have_posts()) :
echo '<div class="swiper swiper-container custom-swiper">';
echo '<div class="swiper-wrapper">';
while ($the_query->have_posts()) : $the_query->the_post();
$image_url = get_the_post_thumbnail_url(get_the_ID(), 'full');
// スライダーテキストの表示、改行を反映させる
echo '<div class="swiper-slide custom-slide">';
echo '<img src="' . $image_url . '" alt="' . get_the_title() . '">';
echo '<div class="slider-text">' . nl2br(esc_html($slider_text)) . '</div>'; // ここで nl2br() を適用
echo '</div>';
endwhile;
echo '</div>';
echo '<div class="swiper-button-prev custom-prev"><img src="' . get_stylesheet_directory_uri() . '/image/box-arrow__left.svg" alt="Previous"></div>';
echo '<div class="swiper-button-next custom-next"><img src="' . get_stylesheet_directory_uri() . '/image/box-arrow__right.svg" alt="Next"></div>';
echo '</div>';
endif;
wp_reset_postdata();
endif; ?>
</div>
<div class="swiper-pagination-outside custom-pagination"></div>
</div><!-- slider-wrap -->
//バナー
<div class="banner-wrap">
<div class="banner-wrap__inner">
<div class="banner__header l-title">
<span class="banner__sub sub-title">Links</span>
<h2 class="banner__title">リンク</h2>
</div>
<?php
if (is_front_page()) {
$args = array(
'post_type' => 'banner_images',
'posts_per_page' => -1,
);
$banner_query = new WP_Query($args);
if ($banner_query->have_posts()) {
echo '<div class="swiper banner-swiper swiper-container">';
echo '<div class="swiper-wrapper">';
while ($banner_query->have_posts()) {
$banner_query->the_post();
$banner_link = get_post_meta(get_the_ID(), '_banner_link', true);
$image_url = get_the_post_thumbnail_url(get_the_ID(), 'full');
// リンクが設定されている場合、画像をリンクでラップ
if (!empty($banner_link)) {
echo '<div class="swiper-slide"><a href="' . esc_url($banner_link) . '" target="_blank"><img src="' . esc_url($image_url) . '" alt="' . get_the_title() . '"></a></div>';
} else {
echo '<div class="swiper-slide"><img src="' . esc_url($image_url) . '" alt="' . get_the_title() . '"></div>';
}
}
echo '</div>';
echo '<div class="swiper-button-prev banner-swiper-button-prev"><img src="' . get_stylesheet_directory_uri() . '/image/box-arrow__left.svg" alt="Previous"></div>';
echo '<div class="swiper-button-next banner-swiper-button-next"><img src="' . get_stylesheet_directory_uri() . '/image/box-arrow__right.svg" alt="Next"></div>';
echo '</div>';
}
wp_reset_postdata();
}
?>
</div>
</div><!-- banner-wrap -->
//swiper Javascript
document.addEventListener('DOMContentLoaded', function () {
function initializeSwiper(sliderSelector, swiperOptions) {
var sliderContainer = document.querySelector(sliderSelector + ' .swiper-wrapper');
var slides = sliderContainer.querySelectorAll('.swiper-slide');
if (slides.length <= 4) {
slides.forEach(function (slide) {
var clone = slide.cloneNode(true);
sliderContainer.appendChild(clone);
});
swiperOptions.loopedSlides = slides.length;
}
// 新しいSwiperインスタンスを作成
var slider = new Swiper(sliderSelector, swiperOptions);
// スライダーの初期化時とスライド変更時に実行される関数
function updateSliderTextVisibility() {
// すべてのスライダーテキストを非表示にする
slider.slides.forEach(function (slide) {
var text = slide.querySelector('.slider-text');
if (text) text.style.display = 'none';
});
// アクティブなスライドのテキストのみを表示する
var activeText = slider.slides[slider.activeIndex].querySelector('.slider-text');
if (activeText) activeText.style.display = 'block';
}
// スライダーの初期化時にテキストの表示を更新
updateSliderTextVisibility();
// スライドが変更されたときにテキストの表示を更新
slider.on('slideChange', function () {
updateSliderTextVisibility();
});
}
function updateSwiperOptions() {
var screenWidth = window.innerWidth;
var customSwiperOptions = {
loop: true,
touchStartPreventDefault: false,
touchMoveStopPropagation: false,
centeredSlides: true,
slidesPerView: screenWidth <= 1200 ? 1 : 1.01,
spaceBetween: 25,
navigation: {
nextEl: '.swiper-button-next.custom-next',
prevEl: '.swiper-button-prev.custom-prev',
},
pagination: {
el: '.swiper-pagination-outside',
clickable: true,
type: 'bullets',
},
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
};
var bannerSwiperOptions = {
loop: true,
centeredSlides: screenWidth <= 960,
slidesPerView: screenWidth <= 960 ? 1.3 : 2,
spaceBetween: screenWidth <= 960 ? 15 : 25,
speed: 600,
loopAdditionalSlides: 3,
initialSlide: 1,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
autoplay: {
delay: 2000,
disableOnInteraction: false,
},
};
initializeSwiper('.custom-swiper', customSwiperOptions);
initializeSwiper('.banner-swiper', bannerSwiperOptions);
}
// 画面サイズの変更を監視して、Swiperオプションを更新
window.addEventListener('resize', updateSwiperOptions);
// 初期ロード時にSwiperオプションをセット
updateSwiperOptions();
});
//css
/****** スライダー ******/
.slider-wrap,
.banner-wrap {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
overflow: hidden;
padding-bottom: 40px;
}
@media screen and (max-width: 960px) {
.slider-wrap,
.banner-wrap {
padding-bottom: 0;
}
}
.slider-wrap__inner,
.banner-wrap__inner {
width: 100%;
max-width: 1250px;
margin: 0 auto;
}
.swiper {
z-index: auto;
}
.swiper.custom-swiper, .swiper.banner-swiper {
overflow: visible;
margin: 0 auto;
box-sizing: border-box;
}
.swiper.custom-swiper .custom-slide img,
.swiper.custom-swiper .banner-slide img, .swiper.banner-swiper .custom-slide img,
.swiper.banner-swiper .banner-slide img {
height: 73vh;
width: 100%;
object-fit: cover;
object-position: top;
}
@media screen and (max-width: 960px) {
.swiper.custom-swiper .custom-slide img,
.swiper.custom-swiper .banner-slide img, .swiper.banner-swiper .custom-slide img,
.swiper.banner-swiper .banner-slide img {
object-fit: contain;
height: auto;
}
}
.swiper.custom-swiper .slider-text, .swiper.banner-swiper .slider-text {
position: absolute;
top: 30%;
left: 53%;
transform: translate(-50%, -50%);
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
font-size: 2.25rem;
font-weight: 600;
line-height: 2;
color: #fff;
text-shadow: 5px 5px 50px var(--color_text), -3px -3px 50px var(--color_text);
letter-spacing: 0.2em;
}
@media screen and (max-width: 1300px) {
.swiper.custom-swiper .slider-text, .swiper.banner-swiper .slider-text {
font-size: 2.125rem;
left: 48%;
}
}
@media screen and (max-width: 960px) {
.swiper.custom-swiper .slider-text, .swiper.banner-swiper .slider-text {
font-size: 1.75rem;
left: 48%;
}
}
@media screen and (max-width: 599px) {
.swiper.custom-swiper .slider-text, .swiper.banner-swiper .slider-text {
font-size: 0.875rem;
left: 48%;
}
}
.swiper.custom-swiper .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper.banner-swiper .swiper-pagination-bullets.swiper-pagination-horizontal {
text-align: center;
padding: 0.5rem 0;
}
.swiper.custom-swiper .swiper-button-prev,
.swiper.custom-swiper .swiper-button-next, .swiper.banner-swiper .swiper-button-prev,
.swiper.banner-swiper .swiper-button-next {
background-image: none;
width: 35px;
height: 35px;
position: absolute;
top: 50%;
transform: translateY(-50%);
display: block;
}
@media screen and (max-width: 599px) {
.swiper.custom-swiper .swiper-button-prev,
.swiper.custom-swiper .swiper-button-next, .swiper.banner-swiper .swiper-button-prev,
.swiper.banner-swiper .swiper-button-next {
width: 20px;
height: 20px;
transform: unset;
}
}
.swiper.custom-swiper .swiper-button-prev img,
.swiper.custom-swiper .swiper-button-next img, .swiper.banner-swiper .swiper-button-prev img,
.swiper.banner-swiper .swiper-button-next img {
width: 100%;
height: auto;
}
.swiper.custom-swiper .swiper-button-prev:after,
.swiper.custom-swiper .swiper-button-next:after, .swiper.banner-swiper .swiper-button-prev:after,
.swiper.banner-swiper .swiper-button-next:after {
display: none;
}
.swiper.custom-swiper .swiper-button-prev.custom-prev, .swiper.custom-swiper .swiper-button-prev.banner-swiper-button-prev,
.swiper.custom-swiper .swiper-button-next.custom-prev,
.swiper.custom-swiper .swiper-button-next.banner-swiper-button-prev, .swiper.banner-swiper .swiper-button-prev.custom-prev, .swiper.banner-swiper .swiper-button-prev.banner-swiper-button-prev,
.swiper.banner-swiper .swiper-button-next.custom-prev,
.swiper.banner-swiper .swiper-button-next.banner-swiper-button-prev {
left: -2rem;
}
@media screen and (max-width: 1300px) {
.swiper.custom-swiper .swiper-button-prev.custom-prev, .swiper.custom-swiper .swiper-button-prev.banner-swiper-button-prev,
.swiper.custom-swiper .swiper-button-next.custom-prev,
.swiper.custom-swiper .swiper-button-next.banner-swiper-button-prev, .swiper.banner-swiper .swiper-button-prev.custom-prev, .swiper.banner-swiper .swiper-button-prev.banner-swiper-button-prev,
.swiper.banner-swiper .swiper-button-next.custom-prev,
.swiper.banner-swiper .swiper-button-next.banner-swiper-button-prev {
left: 0;
}
}
@media screen and (max-width: 960px) {
.swiper.custom-swiper .swiper-button-prev.custom-prev, .swiper.custom-swiper .swiper-button-prev.banner-swiper-button-prev,
.swiper.custom-swiper .swiper-button-next.custom-prev,
.swiper.custom-swiper .swiper-button-next.banner-swiper-button-prev, .swiper.banner-swiper .swiper-button-prev.custom-prev, .swiper.banner-swiper .swiper-button-prev.banner-swiper-button-prev,
.swiper.banner-swiper .swiper-button-next.custom-prev,
.swiper.banner-swiper .swiper-button-next.banner-swiper-button-prev {
left: 2rem;
}
}
.swiper.custom-swiper .swiper-button-prev.custom-next, .swiper.custom-swiper .swiper-button-prev.banner-swiper-button-next,
.swiper.custom-swiper .swiper-button-next.custom-next,
.swiper.custom-swiper .swiper-button-next.banner-swiper-button-next, .swiper.banner-swiper .swiper-button-prev.custom-next, .swiper.banner-swiper .swiper-button-prev.banner-swiper-button-next,
.swiper.banner-swiper .swiper-button-next.custom-next,
.swiper.banner-swiper .swiper-button-next.banner-swiper-button-next {
right: -2rem;
}
@media screen and (max-width: 1300px) {
.swiper.custom-swiper .swiper-button-prev.custom-next, .swiper.custom-swiper .swiper-button-prev.banner-swiper-button-next,
.swiper.custom-swiper .swiper-button-next.custom-next,
.swiper.custom-swiper .swiper-button-next.banner-swiper-button-next, .swiper.banner-swiper .swiper-button-prev.custom-next, .swiper.banner-swiper .swiper-button-prev.banner-swiper-button-next,
.swiper.banner-swiper .swiper-button-next.custom-next,
.swiper.banner-swiper .swiper-button-next.banner-swiper-button-next {
right: 0;
}
}
@media screen and (max-width: 960px) {
.swiper.custom-swiper .swiper-button-prev.custom-next, .swiper.custom-swiper .swiper-button-prev.banner-swiper-button-next,
.swiper.custom-swiper .swiper-button-next.custom-next,
.swiper.custom-swiper .swiper-button-next.banner-swiper-button-next, .swiper.banner-swiper .swiper-button-prev.custom-next, .swiper.banner-swiper .swiper-button-prev.banner-swiper-button-next,
.swiper.banner-swiper .swiper-button-next.custom-next,
.swiper.banner-swiper .swiper-button-next.banner-swiper-button-next {
right: 2rem;
}
}
.custom-pagination .swiper-pagination-bullet-active {
background: var(--color_main);
}
.swiper-horizontal.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
text-align: center;
}
.swiper-wrapper {
z-index: auto;
}
@media screen and (max-width: 960px) {
.custom-prev,
.custom-next {
display: none !important;
}
}
.banner-swiper-button-prev,
.banner-swiper-button-next {
top: 70% !important;
}
.banner-swiper-container {
width: calc(100% - 8vw); /* Adjust based on the desired padding */
margin-left: auto;
margin-right: auto;
}
/* Adjustments for screens wider than 960px */
@media screen and (min-width: 961px) {
.banner-swiper-container {
width: auto; /* Revert to default width */
}
.banner-swiper .swiper-slide {
padding: 0; /* Remove padding */
}
}
自分で試したこと
touchStartPreventDefaultとtouchMoveStopPropagationの設定
0 likes