【Swiper.js】でスライド間の隙間の幅が合わない

Question

【Swiper.js】でスライド間の隙間の幅が合わない
添付画像①のような見た目を再現したいのですが、現在添付画像②のような見た目になってしまっています。
コードをHTML から WordPress(php)に変換した際に発生しているようですので、テンプレートタグの問題かもしれません。

以下の対処等をしましたが一向に効果がなく、似たような事例も見つからなかったので質問いたします。
何かしらヒントが得られればと思いますので、相談できる方いればよろしくお願いいたします。

考えられる原因
WordPress化した際に発生するので、何かしらのcssが当たっている可能性がある

対処してみたこと
・検証ツール上で何が起こっているか確認する(隙間が多いところを確認)
→マージンでもパディングでもないなぞの隙間が発生していることを確認した

・class="swiper-slide"に対して
box-sizing: border-box等を記述するも効果なし

・出力しているimgタグに付与されていたクラスを削除してみるも変化がない
(attachment-post-thumbnail size-post-thumbnail wp-post-image)などのクラスがimgに付与されていたので、それを削除しました。

再現したい見た目(ただのHTMLで記述した)添付画像①

現在の見た目(WordPress化した場合)添付画像②

正しい挙動になるスライドショーのコード(添付画像①)
こちらはただのHTMLです。

    <!-- SPECIAL TOPIX | 特集 -->
    <section class="Front-secTopix">
      <div class="rowreverse-sp">
        <h2 class="bold">SPECIAL TOPIX</h2>
        <p>特 集</p>
      </div>

      <div class="slide-wrap">
        <div class="swiper-container topixSlider-container" id="slider-topix">
          <div class="swiper-wrapper">
            <div class="swiper-slide"><a href=""><img src="<?php echo get_template_directory_uri(); ?>/img/noimg.png" alt=""></a></div>
            <div class="swiper-slide"><a href=""><img src="<?php echo get_template_directory_uri(); ?>/img/noimg.png" alt=""></a></div>
            <div class="swiper-slide"><a href=""><img src="<?php echo get_template_directory_uri(); ?>/img/noimg.png" alt=""></a></div>
            <div class="swiper-slide"><a href=""><img src="<?php echo get_template_directory_uri(); ?>/img/noimg.png" alt=""></a></div>
            <div class="swiper-slide"><a href=""><img src="<?php echo get_template_directory_uri(); ?>/img/noimg.png" alt=""></a></div>
          </div>

          <div class="swiper-button-prev pcview"></div>
          <div class="swiper-button-next pcview"></div>
        </div>
      </div>
      
    </section>
    <!-- SPECIAL TOPIX | 特集 -->
コード

隙間の幅がおかしくなるスライドショーのコード(添付画像②)
こちらはWordPress化したのもので、投稿からspecialというカテゴリーのサムネイルを呼び出しています。

    <!-- SPECIAL TOPIX | 特集 -->
    <section class="Front-secTopix">
      <div class="rowreverse-sp">
        <h2 class="bold">SPECIAL TOPIX</h2>
        <p>特 集</p>
      </div>

      <div class="slide-wrap">
        <div class="swiper-container topixSlider-container" id="slider-topix">
          <ul class="swiper-wrapper">
            <?php query_posts('category_name=special&posts_per_page=-1'); ?>
            <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            
              <li class="swiper-slide">
                <a href="<?php the_permalink(); ?>">

                  <?php
                    if (has_post_thumbnail() ) {
                      the_post_thumbnail();
                    }
                    else {
                      echo '<img src="' . esc_url(get_template_directory_uri()) . '/img/noimg.png" alt="">';
                    }
                  ?>
                  
                </a>
              </li>
          　<?php endwhile; endif; ?>
          </ul>
          


          <div class="swiper-button-prev pcview"></div>
          <div class="swiper-button-next pcview"></div>
        </div>
      </div>
      
    </section>
    <!-- SPECIAL TOPIX | 特集 -->
コード

Swiper.jsのコード

const swiper = new Swiper('#slider-topix', {
  loop: true,
  speed: 500,
  effect: "slide",
  centeredSlides: true,
  slidesPerView: 1,
  autoplay: {
    delay: 4500,
    disableOnInteraction: false,
  },
  breakpoints: {
    // 500px以上での表示
    641: {
      slidesPerView: 1.45,
      spaceBetween: 20,
    }
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
コード

該当エリアのスタイルシート

  // セクション | SPECIAL TOPIX
  .Front-secTopix
    .slide-wrap
      .topixSlider-container
        overflow-x: hidden
        position: relative
        .swiper-slide
          box-sizing: border-box

        img
          width: 100%
          height: 360px
          object-fit: cover
          @media screen and (max-width: $pc-Width)
            height: 32.4vw

        .swiper-button-prev
          +swiper-button-prev(50%,12%)
        .swiper-button-next
          +swiper-button-next(50%,12%)
コード

Answer 1

<!--      ↓ 全角空白 -->
          　<?php endwhile; endif; ?>

Comments

[退会済みユーザー]

kei344様
ありがとうございます！！
解決しました、全角空白とは初歩的なミスで恥ずかしいですが
助かりました！