title: How remove the extra space in multiple swiper tabs suitable to all media queries using javascript?
body: <p>I am trying to create a tab slider using javascript with the tabs having fixed size.It also has to support all devices(using media query).</p>
  <p>I have created the similar slide.But I am facing problems while viewing in mobile tab view.</p>
  <p>I need a pattern similar to the following link:</p>
  <p><a href="https://www.vecteezy.com/free-vector/banner-template" rel="nofollow noreferrer">https://www.vecteezy.com/free-vector/banner-template</a></p>
  <p><a href="https://i.stack.imgur.com/iN81l.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iN81l.png" alt="enter image description here" /></a></p>
  <p>I have tried.But in mobile the tabs is getting hide.last tabs are not visible.I dont know where the problem comes?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var swiper = new Swiper('.swiper-container', {
                slidesPerView: 6,
                slidesPerGroup: 1,
                loop: false,
                loopFillGroupWithBlank: true,
                navigation: {
                  nextEl: '.swiper-button-next',
                  prevEl: '.swiper-button-prev',
                },
                 breakpoints: {
            1300: {
                    slidesPerView: 8,
                },
  
                1199: {
                    slidesPerView: 6,
                },
                991: {
                    slidesPerView: 4,
                },
                600: {
                    slidesPerView: 2,
                },
            }
              });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.swiper-button-prev {
    background-image: url("data:image/svg+xml;charset=utf-8,&lt;svg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'&gt;&lt;path%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23444444'%2F&gt;&lt;%2Fsvg&gt;") !important;
  }
  
  .swiper-button-next {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23444444'%2F%3E%3C%2Fsvg%3E") !important;
  }
  
  @media  screen and (min-width: 1200px){
      .tab_wrapper{
      width: 100%;
  }
  .swiper-container {
      width: calc(100% - 100px);
  }
  .swiper-wrapper {
       width: 100%;
  }
  
  }
  
  @media  screen and (max-width: 1200px){
  /*  .tab_wrapper{
      width: 600px;
  }
  .swiper-container {
      width: 500px;
  }
  .swiper-wrapper {
       width: 500px;
  }*/
  
  .tab_wrapper{
      width: 100%;
  }
  .swiper-container {
      width: calc(100% - 100px);
  }
  .swiper-wrapper {
       width: 100%;
  }
  
  
  }
  
  
  .tab_wrapper{
      margin: 0 auto;
      position: relative;
      overflow: hidden;
      /*width: 1200px;*/
      box-sizing: border-box;
  }
  .swiper-container {
      /*width: 1000px;*/
      margin: 0 auto;
      position: relative;
      overflow: hidden;
      
      border: 1px solid red;
      box-sizing: border-box;
  }
  .swiper-wrapper {
       width: 1000px;
      position: relative;
      /*width: 100%;   */
      height: 100%;
      z-index: 1;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-transition-property: -webkit-transform;
      transition-property: -webkit-transform;
      -o-transition-property: transform;
      transition-property: transform;
      transition-property: transform,-webkit-transform;
      -webkit-box-sizing: content-box;
      box-sizing: content-box;
  
  }
  
  .swiper-slide p{
      width: 100px;
  }
  
  .swiper-slide{
      border:1px solid red;
      box-sizing: border-box;
      -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      /*width: 100%;*/
      width: auto!important;
      height: 100%;
      position: relative;
      -webkit-transition-property: -webkit-transform;
      transition-property: -webkit-transform;
      -o-transition-property: transform;
      transition-property: transform;
      transition-property: transform,-webkit-transform;
  
  }
  
  
  .swiper-slide, .swiper-wrapper {
      -webkit-transform: translate3d(0,0,0);
      transform: translate3d(0,0,0);
  }
  
  .swiper-button-next, .swiper-button-prev {
      position: absolute;
      top: 50%;
      width: 27px;
      height: 44px;
      margin-top: -22px;
      z-index: 10;
      cursor: pointer;
      background-size: 27px 44px;
      background-position: center;
      background-repeat: no-repeat;
  }
  
  .swiper-button-next{
      right:0;
  }
  .swiper-button-prev{
      left:0;
  }
  
  .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
      opacity: .35;
      cursor: auto;
      pointer-events: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/js/swiper.min.js"&gt;&lt;/script&gt;
  &lt;div class="tab_wrapper"&gt;
      &lt;div class="swiper-container"&gt;
        &lt;div class="swiper-wrapper"&gt;
          &lt;div class="swiper-slide"&gt;
          &lt;p&gt;Tab 1&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="swiper-slide"&gt;
            &lt;p&gt;Tab 2&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="swiper-slide"&gt;
            &lt;p&gt;Tab 3&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="swiper-slide"&gt;
            &lt;p&gt;Tab 4&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="swiper-slide"&gt;
           &lt;p&gt;Tab 5&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="swiper-slide"&gt;
            &lt;p&gt;Tab 6&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="swiper-slide"&gt;
            &lt;p&gt;Tab 7&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="swiper-slide"&gt;
            &lt;p&gt;Tab 8&lt;/p&gt;
          &lt;/div&gt;
  
           &lt;div class="swiper-slide"&gt;
           &lt;p&gt;Tab 9&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="swiper-slide"&gt;
            &lt;p&gt;Tab 10&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="swiper-slide"&gt;
            &lt;p&gt;Tab 11&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="swiper-slide"&gt;
            &lt;p&gt;Tab 12&lt;/p&gt;
          &lt;/div&gt;
           &lt;div class="swiper-slide"&gt;
            &lt;p&gt;Tab 13&lt;/p&gt;
          &lt;/div&gt;
           &lt;div class="swiper-slide"&gt;
            &lt;p&gt;Tab 14&lt;/p&gt;
          &lt;/div&gt;
           &lt;div class="swiper-slide"&gt;
            &lt;p&gt;Tab 15&lt;/p&gt;
          &lt;/div&gt;
           &lt;div class="swiper-slide"&gt;
            &lt;p&gt;Tab 16&lt;/p&gt;
          &lt;/div&gt;
           &lt;div class="swiper-slide"&gt;
            &lt;p&gt;Tab 17&lt;/p&gt;
          &lt;/div&gt;
           &lt;div class="swiper-slide"&gt;
            &lt;p&gt;Tab 18&lt;/p&gt;
          &lt;/div&gt;
           &lt;div class="swiper-slide"&gt;
            &lt;p&gt;Tab 19&lt;/p&gt;
          &lt;/div&gt;
           &lt;div class="swiper-slide"&gt;
            &lt;p&gt;Tab 20&lt;/p&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
        
      &lt;/div&gt;
      &lt;div class="swiper-button-next"&gt;&lt;/div&gt;
      &lt;div class="swiper-button-prev"&gt;&lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  
  <a href="https://i.stack.imgur.com/dQO8P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dQO8P.png" alt="enter image description here" /></a></p>
  <p>In my mobile view the 20th tab is not visible while clicking next button.Please help how to dispaly all tabs in mobile and tab view?</p>
  <p>Also empty space appears in the last after 20th tab.I sholud automatically get fixed to the outer container when multiple tabs are added.</p>