@3xcuseme

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

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

<!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>
  • Вопрос задан
  • 63 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Sveak Барнаул
от 50 000 руб.
от 60 000 до 90 000 руб.
Sellfashion Нижний Новгород
от 100 000 до 150 000 руб.
21 июл. 2019, в 00:52
80000 руб./за проект
20 июл. 2019, в 19:38
10000 руб./за проект
20 июл. 2019, в 17:55
15000 руб./за проект