大尺寸设备上Swiper分页组件不可见问题求助

算力阿峰

2026-7-4

问题描述

文章板块的Swiper分页组件仅在小尺寸设备（窗口缩小状态）下可见，当设备处于全屏尺寸时，分页无法完整显示。

文章板块HTML代码片段

<!--==================== ARTICLES ====================-->
<section class="articles section">
        <h2 class="section__title">Medium Articles</h2>
        <span class="section__subtitle">See some of my published articles</span>
        <div class="articles__container container swiper-container">
            <div class="swiper-wrapper">
            <!--==================== ARTICLE 1 ====================-->
            <div class="articles__content swiper-slide">
                <div class="card">
                <a href="https://medium.com/gitconnected/a-developers-guide-to-working-with-apis-d5c8aa4e0284">
                    <h4>🛠️ A Developer's Guide to Working with APIs</h4>
                    <p class="journal">Published on Level Up Coding</p>
                    <p>Master using APIs in Python! Learn why APIs are crucial, how to use them, and the
                        differences between REST and GraphQL.</p>
                </a>
                </div>
            </div>
        <!--==================== ARTICLE 2 ====================-->
        <div class="articles__content swiper-slide">
            <div class="card">
                <a href="https://medium.com/python-in-plain-english/python-the-glittering-jewel-of-modern-technology-972976c130f4">
                    <h4>🐍 Python: The Glittering Jewel of Modern Technology</h4>
                    <p class="journal">Published on Python in Plain English</p>
                    <p>Uncover the transformative role of Python, the versatile jewel of modern technology, driving innovation across AI, ML and web development.</p>
                </a>
            </div>
        </div>
        <!--==================== ARTICLE 3 ====================-->
        <div class="articles__content swiper-slide">
            <div class="card">
                <a href="https://medium.com/gitconnected/secrets-to-a-killer-data-science-portfolio-projects-that-will-skyrocket-your-career-67089b924929">
                    <h4>🚀 Secrets to a Killer Data Science Portfolio: Projects that Will Skyrocket Your Career
                    </h4>
                    <p class="journal">Published on Level Up Coding</p>
                    <p>Unlock the secrets to a powerful data science portfolio that propels your career to new
                        heights.</p>
                </a>
            </div>
        </div>
        <!--==================== ARTICLE 4 ====================-->
        <div class="articles__content swiper-slide">
            <div class="card">
                <a href="https://medium.com/gitconnected/building-a-deep-learning-model-with-tensorflow-and-keras-easier-than-you-think-62d0cb7945ff">
                    <h4>🧠 Building a Deep Learning Model with TensorFlow and Keras: Easier Than You Think</h4>
                    <p class="journal">Published on Level Up Coding</p>
                    <p>Master the art of Deep Learning with TensorFlow and Keras. A step-by-step guide to your
                        first model.</p>
                </a>
            </div>
        </div>
        <!--==================== ARTICLE 5 ====================-->
        <div class="articles__content swiper-slide">
            <div class="card">
                <a href="https://medium.com/mlearning-ai/creating-a-chatbot-with-python-5598e9a5f993">
                    <h4>💬 Creating a Chatbot with Python</h4>
                    <p class="journal">Published on MLearning.ai</p>
                    <p>Learn how to create a simple chatbot using Python and NLP techniques. Create an
                        intelligent conversational agent.</p>
                </a>
            </div>
        </div>
        <!--==================== ARTICLE 6 ====================-->
        <div class="articles__content swiper-slide">
            <div class="card">
                <a href="https://medium.com/gitconnected/design-patterns-in-python-a-practical-guide-to-writing-maintainable-code-a3f780a4a6ad">
                    <h4>📝 Design Patterns in Python: A Practical Guide to Writing Maintainable Code</h4>
                    <p class="journal">Published on Level Up Coding</p>
                    <p>Discover essential design patterns in Python for writing maintainable code, for beginner and experienced Python developer.</p>
                </a>
            </div>
        </div>
    </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination-articles"></div>
    </div>
</section>

对应的CSS样式

.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.card {
    background-color: var(--container-color);
    border-radius: 5px;
    margin: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.card a {
    text-decoration: none;
    color: var(--text-color);
}

.card p, .card h3 {
    margin: 0;
    color: var(--text-color);
}

.card:hover{
    box-shadow: 0 4px 8px rgba(0,0,0,.45);
}

.journal{
    font-size: var(--smaller-font-size);
    color: var(--first-color);
    font-weight: var(--font-semi-bold);
    font-style: italic;
}

/*==================== articles ====================*/
.articles__data,
.articles__header {
  display: flex;
}
.articles__data {
  justify-content: space-between;
  margin-bottom: var(--mb-0-1);
}
.articles__img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: var(--mb-0-75);
}
.articles__name {
  font-size: var(--h2-font-size);
  font-weight: var(--font-medium);
}
.articles__client {
  font-size: var(--small-font-size);
  color: var(--text-color-light);
}
.articles__description {
  margin-bottom: var(--mb-2-5);
}
.articles__icon-star {
  color: var(--first-color);
}
.swiper-container .swiper-pagination-articles {
  bottom: 0;
}
/*==================== MEDIA QUERIES ====================*/
/* For small devices */
@media screen and (max-width: 350px){
    .container{
        margin-left: var(--mb-1);
        margin-right: var(--mb-1);
    }

    .nav__menu{
        padding: 2rem .25rem 4rem;
    }
    .nav__list{
        column-gap: 0;
    }
    
    .home__content{
        grid-template-columns: .25fr 3fr;

    }
    .home__blob{
        width: 180px;
    }

    .skills__title{
        font-size: var(--normal-font-size);
    }

    .qualification__data{
        gap: .5rem;
    }

    .Expertise__container{
        grid-template-columns: max-content;
        justify-content: center;
    }
    .Expertise__content{
        padding-right: 3.5rem;
    }
    .Expertise__modal{
        padding: 0 .5rem;
    }

    .project__img{
        width: 400px;
    }
    .articles__data,
    .articles__header {
      flex-direction: column;
      align-items: center;
    }
    .articles__img {
      margin-right: 0;
      margin-bottom: var(--mb-0-25);
    }
    .articles__data,
    .articles__description {
      text-align: center;
    }
}

JavaScript代码

let swiperarticles = new Swiper(".articles__container", {
    loop: true,
    grapCursor: true,
    spaceBetween: 40,
  
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
      dynamicBullets: true,
    },
    breakpoints: {
      568: {
        slidesPerView: 2,
      },
    },
  });

问题原因及修复方案

原因分析

分页器位置被遮挡：当前CSS设置分页器bottom: 0，全屏时Swiper容器默认的overflow: hidden会裁剪掉分页器，或被下方元素覆盖。
容器无预留空间：Swiper容器没有为分页器预留底部空间，导致分页器被容器边缘截断。
代码拼写错误：JavaScript中grapCursor是拼写错误，应为grabCursor，可能导致Swiper功能异常。

修复步骤

调整分页器位置与层级
修改CSS，确保分页器在所有屏幕下可见：

.swiper-container .swiper-pagination-articles {
  bottom: -30px; /* 向下偏移，避免被卡片遮挡 */
  text-align: center;
  z-index: 10; /* 确保在最上层 */
}

为容器添加底部内边距
给Swiper容器预留分页器空间：

.articles__container {
  padding-bottom: 40px; /* 大于分页器偏移值，避免被裁剪 */
}

修正JavaScript拼写错误
修复grabCursor的拼写问题，并可添加大屏适配：

let swiperarticles = new Swiper(".articles__container", {
    loop: true,
    grabCursor: true, // 修正拼写
    spaceBetween: 40,
  
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
      dynamicBullets: true,
    },
    breakpoints: {
      568: {
        slidesPerView: 2,
      },
      768: {
        slidesPerView: 3,
        spaceBetween: 30,
      }
    },
  });

检查父容器溢出设置
确认.articles或.container没有设置overflow: hidden，若有则移除或调整，保证分页器在可见区域内。

内容的提问来源于stack exchange，提问作者Will

大尺寸设备上Swiper分页组件不可见问题求助

文章板块HTML代码片段 #

对应的CSS样式 #

JavaScript代码 #

问题原因及修复方案 #

原因分析 #