Home>

Swiper swipes to a blank page after hiding some slides in css.

  • Answer # 1

    Manipulations with CSS do not affect the DOM tree, so you need to hide slides through JS

    //slider initialization
    const swiper= new Swiper('.swiper', {
      //optional parameters
      slidesPerView: 3
        spaceBetween: 15,
        slidesPerGroup: 3,
        observer: true
        observeParents: true
      //If we need pagination
      pagination: {
        el: '.swiper-pagination',
      },
      //navigation arrows
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      //And if we need a scrollbar
      scrollbar: {
        el: '.swiper-scrollbar',
      },
    });
    //Filter category_items
    const itemList= document.querySelectorAll('.item');
    const wrapper= itemList[0].parentNode;
        document.querySelector('.category__items').addEventListener('click', event=> {
            if (event.target.tagName !== 'LI') return false;
            let filterClass= event.target.dataset['filter'];
          wrapper.innerHTML= '';
            itemList.forEach(elem=> {
                if (elem.classList.contains(filterClass) || filterClass=== 'all') {
                    wrapper.appendChild(elem);
                }
            });
        });
    html,
    body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }
    .swiper {
      width: 100%
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display:flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    .swiper-slide img {
      display:block;
      width: 100%
      height: 100%;
      object fit: cover;
    }
    .counter {
      width: 50px
      height: 50px;
      position: fixed;
      left: 10px;
      top: 10px;
      font-size: 50px;
      color: red;
      z-index: 100000
    }
    .category {
        display:flex;
        justify-content: center;
        width: 100%
    }
    .category__items {
        display:flex;
    }
    .category__item {
        position: relative;
        margin: 032px;
        cursor: pointer;
    }
    .green {
      background-color: green;
    }
    .orange {
      background-color: orange;
    }
    .blue {
      background color: blue
    }
    <htmllang="en"><head>  <meta charset="utf-8" />  <title>Swiper demo</title>  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />  <!--Link Swiper's CSS -->  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /></head><body>  <div class="category">      <ul class="category__items">          <li class="category__item" data-filter="all">All</li>          <li class="category__item" data-filter="green">Green</li>          <li class="category__item" data-filter="orange">Orange</li>          <li class="category__item" data-filter="blue">Blue</li>      </ul>  </div>  <!--Swiper -->  <div class="swiper mySwiper">    <div class="swiper-wrapper">      <div class="swiper-slide item green">Slide 1</div>      <div class="swiper-slide item orange">Slide 2</div>      <div class="swiper-slide item blue">Slide 3</div>      <div class="swiper-slide item green">Slide 4</div>      <div class="swiper-slide item orange">Slide 5</div>      <div class="swiper-slide item blue">Slide 6</div>      <div class="swiper-slide item green">Slide 7</div>      <div class="swiper-slide item orange">Slide 8</div><div class="swiper-slide item blue">Slide 9</div>       <div class="swiper-slide item green">Slide 7</div>      <div class="swiper-slide item orange">Slide 8</div>      <div class="swiper-slide item blue">Slide 9</div>    </div>    <div class="swiper-button-next"></div>    <div class="swiper-button-prev"></div>  </div>  <!--SwiperJS -->  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>  </body>
  • Answer # 2

    Manipulations with CSS do not affect the DOM tree, so you need to hide slides through JS

    //slider initialization
    const swiper= new Swiper('.swiper', {
      //optional parameters
      slidesPerView: 3
        spaceBetween: 15,
        slidesPerGroup: 3,
        observer: true
        observeParents: true
      //If we need pagination
      pagination: {
        el: '.swiper-pagination',
      },
      //navigation arrows
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      //And if we need a scrollbar
      scrollbar: {
        el: '.swiper-scrollbar',
      },
    });
    //Filter category_items
    const itemList= document.querySelectorAll('.item');
    const wrapper= itemList[0].parentNode;
        document.querySelector('.category__items').addEventListener('click', event=> {
            if (event.target.tagName !== 'LI') return false;
            let filterClass= event.target.dataset['filter'];
          wrapper.innerHTML= '';
            itemList.forEach(elem=> {
                if (elem.classList.contains(filterClass) || filterClass=== 'all') {
                    wrapper.appendChild(elem);
                }
            });
        });
    html,
    body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }
    .swiper {
      width: 100%
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display:flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    .swiper-slide img {
      display:block;
      width: 100%
      height: 100%;
      object fit: cover;
    }
    .counter {
      width: 50px
      height: 50px;
      position: fixed;
      left: 10px;
      top: 10px;
      font-size: 50px;
      color: red;
      z-index: 100000
    }
    .category {
        display:flex;
        justify-content: center;
        width: 100%
    }
    .category__items {
        display:flex;
    }
    .category__item {
        position: relative;
        margin: 032px;
        cursor: pointer;
    }
    .green {
      background-color: green;
    }
    .orange {
      background-color: orange;
    }
    .blue {
      background color: blue
    }
    <htmllang="en"><head>  <meta charset="utf-8" />  <title>Swiper demo</title>  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />  <!--Link Swiper's CSS -->  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /></head><body>  <div class="category">      <ul class="category__items">          <li class="category__item" data-filter="all">All</li>          <li class="category__item" data-filter="green">Green</li>          <li class="category__item" data-filter="orange">Orange</li>          <li class="category__item" data-filter="blue">Blue</li>      </ul>  </div>  <!--Swiper -->  <div class="swiper mySwiper">    <div class="swiper-wrapper">      <div class="swiper-slide item green">Slide 1</div>      <div class="swiper-slide item orange">Slide 2</div>      <div class="swiper-slide item blue">Slide 3</div>      <div class="swiper-slide item green">Slide 4</div>      <div class="swiper-slide item orange">Slide 5</div>      <div class="swiper-slide item blue">Slide 6</div>      <div class="swiper-slide item green">Slide 7</div>      <div class="swiper-slide item orange">Slide 8</div><div class="swiper-slide item blue">Slide 9</div>       <div class="swiper-slide item green">Slide 7</div>      <div class="swiper-slide item orange">Slide 8</div>      <div class="swiper-slide item blue">Slide 9</div>    </div>    <div class="swiper-button-next"></div>    <div class="swiper-button-prev"></div>  </div>  <!--SwiperJS -->  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>  </body>