title: How can I align the slides to the swiper slider?
body: <p>Good afternoon.
  Please tell me how I can align the slides so that when you select the first or last slide on the left or right, there are the same number of next and previous slides.</p>
  <p>In other words when selecting the first or last slide it should be like this:</p>
  <p><a href="https://i.stack.imgur.com/S5Zmd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S5Zmd.png" alt="enter image description here" /></a></p>
  <p>but at the moment it looks like this:
  <a href="https://i.stack.imgur.com/8jWCE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8jWCE.png" alt="enter image description here" /></a></p>
  <p>In other words, if the first slide is active, then there is only the last slide to the left of it and the penultimate slide is missing.</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 sliderSelector = '.swiper-container',
    options = {
      init: true,
      initialSlide: 1,
      loop: true,
      speed: 1200,
      slidesPerView: 1.6848, // or 'auto'
      spaceBetween: 0,
      centeredSlides: true,
      mousewheelControl: false,
      lazyLoading: true,
      slideToClickedSlide: true,
      effect: 'coverflow', // 'cube', 'fade', 'coverflow',
      autoplay: {
        delay: 10000,
        disableOnInteraction: false,
      },
      coverflowEffect: {
        rotate: 0, // Slide rotate in degrees
        stretch: 400, // Stretch space between slides (in px)
        depth: 380, // Depth offset in px (slides translate in Z axis)
        modifier: 1, // Effect multipler
        slideShadows: false, // Enables slides shadows
      },
      grabCursor: true,
      parallax: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
        renderBullet: function(index, className) {
          return `&lt;span class="dot swiper-pagination-bullet"&gt;${index +1}&lt;/span&gt;`;
        },
      },
      navigation: {
        nextEl: 0,
        prevEl: 0,
      },
      breakpoints: {
        1023: {
          slidesPerView: 5,
          spaceBetween: 0
        }
      },
      // Events
      on: {
        imagesReady: function() {
          this.el.classList.remove('loading');
        }
      }
    };
  var mySwiper = new Swiper(sliderSelector, options);
  
  // Initialize slider
  mySwiper.init();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>[class^="swiper-button-"],
  .swiper-container-horizontal&gt;.swiper-pagination-bullets .swiper-pagination-bullet,
  .swiper-container-horizontal&gt;.swiper-pagination-bullets .swiper-pagination-bullet::before {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  
  *,
  *:before,
  *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  .wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    background: #E5E5E5;
  }
  
  .container {
    width: 1200px;
  }
  
  .swiper-slide-active img {
    outline: 10px solid rgba(255, 255, 255, 0.5);
    outline-offset: -10px;
  }
  
  .swiper-slide img {
    outline: 10px solid rgba(255, 255, 255, 0.5);
    outline-offset: -10px;
  }
  
  .swiper-slide img {
    position: relative;
  }
  
  .swiper-container {
    width: 100%;
    min-height: 470px;
    height: auto;
    -webkit-transition: opacity 1s ease;
    transition: opacity 1s ease;
  }
  
  .swiper-slide img {
    display: block;
    max-width: 100%;
    height: auto;
  }
  
  .swiper-container.swiper-container-coverflow {
    padding-top: 2%;
  }
  
  .swiper-container.loading {
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-in;
  }
  
  .swiper-container:hover .swiper-button-prev,
  .swiper-container:hover .swiper-button-next {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }
  
  .swiper-slide {
    background-position: center;
    background-size: cover;
  }
  
  .swiper-slide .entity-img {
    display: none;
  }
  
  .swiper-slide .content {
    position: absolute;
    top: 40%;
    left: 0;
    width: 50%;
    padding-left: 5%;
    color: #fff;
  }
  
  .swiper-slide .content .title {
    font-size: 2.6em;
    font-weight: bold;
    margin-bottom: 30px;
  }
  
  .swiper-slide img {
    filter: brightness(20%);
    transition: all 0.5s ease-in;
    position: relative;
    z-index: 2;
  }
  
  .swiper-slide-prev img {
    filter: brightness(40%);
    transition: all 0.5s ease-in;
  }
  
  .swiper-slide-next img {
    filter: brightness(40%);
    transition: all 0.5s ease-in;
  }
  
  .swiper-slide {
    outline: 10px solid #ffffff;
    outline-offset: -10px;
    position: relative;
    z-index: 5;
  }
  
  swiper-slide-next img {
    filter: brightness(50%);
    transition: all 0.5s ease-in;
  }
  
  .swiper-slide-active img {
    filter: brightness(100%);
    transition: all 0.5s ease-in;
  }
  
  .swiper-slide .content .caption {
    display: block;
    font-size: 13px;
    line-height: 1.4;
  }
  
  [class^="swiper-button-"] {
    width: 44px;
    opacity: 0;
    visibility: hidden;
  }
  
  .swiper-button-prev {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
  }
  
  .swiper-button-next {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
  }
  
  .swiper-container-horizontal&gt;.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 9px;
    position: relative;
    width: 12px;
    height: 12px;
    background-color: #fff;
    opacity: 0.4;
  }
  
  .swiper-container-horizontal&gt;.swiper-pagination-bullets .swiper-pagination-bullet::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: 0px solid #fff;
    border-radius: 50%;
  }
  
  .swiper-container-horizontal&gt;.swiper-pagination-bullets .swiper-pagination-bullet:hover,
  .swiper-container-horizontal&gt;.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1;
    transition: all 5s ease-in;
  }
  
  .swiper-container-horizontal&gt;.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
    border-width: 1px;
  }
  
  @media (max-width: 1180px) {
    .swiper-slide .content .title {
      font-size: 25px;
    }
    .swiper-slide .content .caption {
      font-size: 12px;
    }
  }
  
  @media (max-width: 1023px) {
    .swiper-container {
      height: 40vw;
    }
    .swiper-container.swiper-container-coverflow {
      padding-top: 0;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/js/swiper.min.js"&gt;&lt;/script&gt;
  
  
  &lt;div class="wrapper"&gt;
    &lt;div class="container"&gt;
  
      &lt;section class="swiper-container loading"&gt;
        &lt;div class="swiper-wrapper"&gt;
          &lt;div class="swiper-slide"&gt;
            &lt;img src="https://i.ytimg.com/vi/954FKvpQN2g/maxresdefault.jpg"&gt;
          &lt;/div&gt;
          &lt;div class="swiper-slide"&gt;
            &lt;img src="https://i.ytimg.com/vi/954FKvpQN2g/maxresdefault.jpg"&gt;
          &lt;/div&gt;
          &lt;div class="swiper-slide"&gt;
            &lt;img src="https://i.ytimg.com/vi/954FKvpQN2g/maxresdefault.jpg"&gt;
          &lt;/div&gt;
          &lt;div class="swiper-slide"&gt;
            &lt;img src="https://i.ytimg.com/vi/954FKvpQN2g/maxresdefault.jpg"&gt;
          &lt;/div&gt;
          &lt;div class="swiper-slide"&gt;
            &lt;img src="https://i.ytimg.com/vi/954FKvpQN2g/maxresdefault.jpg"&gt;
          &lt;/div&gt;
          &lt;div class="swiper-slide"&gt;
            &lt;img src="https://i.ytimg.com/vi/954FKvpQN2g/maxresdefault.jpg"&gt;
          &lt;/div&gt;
          &lt;div class="swiper-slide"&gt;
            &lt;img src="https://i.ytimg.com/vi/954FKvpQN2g/maxresdefault.jpg"&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
  
        &lt;!-- If we need pagination --&gt;
        &lt;div class="swiper-pagination"&gt;&lt;/div&gt;
        &lt;!-- If we need navigation buttons --&gt;
        &lt;div class="swiper-button-prev swiper-button-white"&gt;&lt;/div&gt;
        &lt;div class="swiper-button-next swiper-button-white"&gt;&lt;/div&gt;
      &lt;/section&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>