Как исправить баг Swiper?

Question

3xcuseme @3xcuseme

Как исправить баг Swiper?

Помогите решить задачу. Когда добавляю размеры для мобильной версии к swiper, то получается так (картинка 1.)

А мне нужно так.

<!DOCTYPE HTML>
<html>
	<head>
		<title>Достижения педагога 2016-2017</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="assets/css/swiper.min.css">
		<link rel="stylesheet" href="assets/css/main.css" />
	</head>
	<body> 
      <!-- Wrapper -->
      <div id="wrapper">
			<div class="swiper-container hro">
          <div class="hro">
                <a href="Dostijeniya_pedagoga-2016-2017.html" class="button">2016-2017</a>
                <a href="Dostijeniya_pedagoga-2017-2018.html" class="button">2017-2018</a>
                <a href="Dostijeniya_pedagoga-2018-2019.html" class="button">2018-2019</a>
           </div>
    			<div class="swiper-wrapper">
      				<div class="swiper-slide">
      					<div class="imgBx">
      					<img src="img/Dostijeniya-pedagoga/2016-2017/Диплом-1-степени-Талантливые-люди.jpg">
      				</div>
      			  </div>

      			  <div class="swiper-slide">
      					<div class="imgBx">
      					<img src="img/Dostijeniya-pedagoga/2016-2017/Сертификат-Семейные-ценности-2017.jpg">
      				</div>
      			  </div>


      		<!-- За место меня вставить еще фото -->
    			</div>

    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>

  </div>
<!-- Бaр -->
					<div id="sidebar">
						<div class="inner">

							<!-- Меню -->
                <nav id="menu">
                  <header class="major">
                    <h2>Меню</h2>
                  </header>
                  <ul>
                    <li><a href="index.html">Главная</a></li>
                    <li><a href="generic.html">Учебно-методические материалы</a></li>
                    <li>
                    <span class="opener">Достижения</span>
                      <ul>
                        <li><a href="Uchastie-v-prof-konkursah.html">Участие студентов в профессиональных конкурсах</a></li>
                        <li><a href="Uchastie-v-tvor-konkursah.html">Участие студентов в творческих конкурсах</a></li>
                        <li><a href="Dostijeniya_pedagoga-2016-2017.html">Личное участие</a></li>
                        <li><a href="Prof-rost.html">Профессиональный рост</a></li>
                      </ul>
                    </li>
                    <li><a href="albom.html">Фотоальбомы</li>
                  </ul>
                </nav>

              <!-- Подвал -->
                <section>
                  <header class="major">
                    <h2>Обратная связь</h2>
                  </header>
                  <ul class="contact">
                    <li class="fa-envelope-o"><a href="mailto:el_sachka@mail.ru">el_sachka@mail.ru</a></li>
                    <li class="fa-vk"><a href="https://vk.com/alissia_astorot">Романова Елена Фархадовна</a></li>
                  </ul>
                </section>
            </div>
          </div>
        </div>


		<!-- Scripts -->
			<script src="assets/js/jquery.min.js"></script>
			<script src="assets/js/browser.min.js"></script>
			<script src="assets/js/breakpoints.min.js"></script>
			<script src="assets/js/main.js"></script>
			<script src="assets/js/swiper.min.js"></script>

<script>
    var swiper = new Swiper('.swiper-container', {
      effect: 'coverflow',
      grabCursor: true,
      centeredSlides: true,
      slidesPerView: 'auto',
      coverflowEffect: {
        rotate: 30,
        stretch: 1,
        depth: 500,
        modifier: 1,
        slideShadows : true,
      },
      pagination: {
        el: '.swiper-pagination',
      },
    });
  </script>
  <script type="text/javascript">
    var swiper = new Swiper('.swiper-container', {
  // Default parameters
  slidesPerView: 4,
  spaceBetween: 40,
  // Responsive breakpoints
  breakpoints: {
    // when window width is <= 320px
    320: {
      slidesPerView: 1,
      spaceBetween: 10
    },
    // when window width is <= 480px
    480: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // when window width is <= 640px
    640: {
      slidesPerView: 3,
      spaceBetween: 30
    }
  }
})
  </script>