Вопрос:

Swiper карусели IE11 ошибка: изображения перегружены

javascript html css swiper

103 просмотра

1 ответ

1159 Репутация автора

Я собрал карусель с помощью плагина Swiper. Работает нормально, без ошибок, кроме как в Internet Explorer 11 , на Windows 10 . Здесь изображения растянуты по вертикали:

var swiper = new Swiper('.swiper-container', {
   slidesPerView: 4,
   spaceBetween: 20,
   pagination: {
     el: '.swiper-pagination',
     loop: true,
     draggable: true,
     clickable: true
   },
   autoplay: {
     delay: 2000,
     disableOnInteraction: true,
   },
   breakpoints: {
     1024: {
       slidesPerView: 3,
       spaceBetween: 20,
     },
     768: {
       slidesPerView: 3,
       spaceBetween: 20,
     },
     640: {
       slidesPerView: 2,
       spaceBetween: 10,
     },
     480: {
       slidesPerView: 1,
       spaceBetween: 10,
     }
   }
 });
.swiper-container {
    padding-bottom: 30px !important;
}

.swiper-slide {
    height: auto !important;
}

.swiper-container-horizontal>.swiper-pagination-bullets {
  bottom: -5px !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
  <div class="row">
    <div class="swiper-container col-sm-12">
      <div class="swiper-wrapper">
      
        <div class="swiper-slide d-flex flex-column bg-light">
          <img src="http://lorempixel.com/640/640/sports/" class="img-fluid" alt="">
          <div class="card-body d-flex flex-column">
            <p class="text-muted">Lorem ipsum</p>
            <h4 class="m-0">Lorem ipsum dolor</h4>
            <h5 class="small">Aliquam voluptates, quisquam illum.</h5>
            <p class="card-text ">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <div class="mt-auto">
              <a href="#" class="btn btn-sm btn-primary">More</a>
            </div>
          </div>
        </div>

        <div class="swiper-slide d-flex flex-column bg-light">
          <img src="http://lorempixel.com/640/640/sports/1" class="img-fluid" alt="">
          <div class="card-body d-flex flex-column">
            <p class="text-muted">Lorem ipsum dolor sit.</p>
            <h4 class="m-0">Lorem ipsum dolor</h4>
            <h5 class="small">Aliquam voluptates, quisquam illum.</h5>
            <p class="card-text ">Fugiat itaque doloremque assumenda vitae, consequatur aspernatur! Porro eum, vitae!</p>
            <div class="mt-auto">
              <a href="#" class="btn btn-sm btn-primary">More</a>
            </div>
          </div>
        </div>
        
        <div class="swiper-slide d-flex flex-column bg-light">
          <img src="http://lorempixel.com/640/640/sports/" class="img-fluid" alt="">
          <div class="card-body d-flex flex-column">
            <p class="text-muted">Lorem ipsum</p>
            <h4 class="m-0">Lorem ipsum dolor</h4>
            <h5 class="small">Aliquam voluptates, quisquam illum.</h5>
            <p class="card-text ">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <div class="mt-auto">
              <a href="#" class="btn btn-sm btn-primary">More</a>
            </div>
          </div>
        </div>

        <div class="swiper-slide d-flex flex-column bg-light">
          <img src="http://lorempixel.com/640/640/sports/1" class="img-fluid" alt="">
          <div class="card-body d-flex flex-column">
            <p class="text-muted">Lorem ipsum dolor sit.</p>
            <h4 class="m-0">Lorem ipsum dolor</h4>
            <h5 class="small">Aliquam voluptates, quisquam illum.</h5>
            <p class="card-text ">Fugiat itaque doloremque assumenda vitae, consequatur aspernatur! Porro eum, vitae!</p>
            <div class="mt-auto">
              <a href="#" class="btn btn-sm btn-primary">More</a>
            </div>
          </div>
        </div>
        
        <div class="swiper-slide d-flex flex-column bg-light">
          <img src="http://lorempixel.com/640/640/sports/" class="img-fluid" alt="">
          <div class="card-body d-flex flex-column">
            <p class="text-muted">Lorem ipsum</p>
            <h4 class="m-0">Lorem ipsum dolor</h4>
            <h5 class="small">Aliquam voluptates, quisquam illum.</h5>
            <p class="card-text ">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <div class="mt-auto">
              <a href="#" class="btn btn-sm btn-primary">More</a>
            </div>
          </div>
        </div>

        <div class="swiper-slide d-flex flex-column bg-light">
          <img src="http://lorempixel.com/640/640/sports/1" class="img-fluid" alt="">
          <div class="card-body d-flex flex-column">
            <p class="text-muted">Lorem ipsum dolor sit.</p>
            <h4 class="m-0">Lorem ipsum dolor</h4>
            <h5 class="small">Aliquam voluptates, quisquam illum.</h5>
            <p class="card-text ">Fugiat itaque doloremque assumenda vitae, consequatur aspernatur! Porro eum, vitae!</p>
            <div class="mt-auto">
              <a href="#" class="btn btn-sm btn-primary">More</a>
            </div>
          </div>
        </div>
        
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/js/swiper.min.js"></script>

В чем причина этой ошибки? Как это можно исправить?

ОБНОВЛЕНИЕ - скриншот:

введите описание изображения здесь

Автор: Razvan Zamfir Источник Размещён: 05.06.2019 08:18

Ответы (1)


0 плюса

1159 Репутация автора

Я обернул изображения в, <div class="w-100"></div>и это улучшение, но пока не оптимальное решение:

var swiper = new Swiper('.swiper-container', {
   slidesPerView: 4,
   spaceBetween: 20,
   pagination: {
     el: '.swiper-pagination',
     loop: true,
     draggable: true,
     clickable: true
   },
   autoplay: {
     delay: 2000,
     disableOnInteraction: true,
   },
   breakpoints: {
     1024: {
       slidesPerView: 3,
       spaceBetween: 20,
     },
     768: {
       slidesPerView: 3,
       spaceBetween: 20,
     },
     640: {
       slidesPerView: 2,
       spaceBetween: 10,
     },
     480: {
       slidesPerView: 1,
       spaceBetween: 10,
     }
   }
 });
.swiper-container {
    padding-bottom: 30px !important;
}

.swiper-slide {
    height: auto !important;
}

.swiper-container-horizontal>.swiper-pagination-bullets {
  bottom: -5px !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/css/swiper.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
  <div class="row">
    <div class="swiper-container col-sm-12">
      <div class="swiper-wrapper">
      
        <div class="swiper-slide d-flex flex-column bg-light">
          <div class="w-100"><img src="http://lorempixel.com/640/640/sports/1" class="img-fluid" alt=""></div>
          <div class="card-body d-flex flex-column">
            <p class="text-muted">Lorem ipsum</p>
            <h4 class="m-0">Lorem ipsum dolor</h4>
            <h5 class="small">Aliquam voluptates, quisquam illum.</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <div class="mt-auto">
              <a href="#" class="btn btn-sm btn-primary">More</a>
            </div>
          </div>
        </div>

        <div class="swiper-slide d-flex flex-column bg-light">
          <div class="w-100"><img src="http://lorempixel.com/640/640/sports" class="img-fluid" alt=""></div>
          <div class="card-body d-flex flex-column">
            <p class="text-muted">Lorem ipsum dolor sit.</p>
            <h4 class="m-0">Lorem ipsum dolor</h4>
            <h5 class="small">Aliquam voluptates, quisquam illum.</h5>
            <p class="card-text">Fugiat itaque doloremque assumenda vitae, consequatur aspernatur! Porro eum, vitae!</p>
            <div class="mt-auto">
              <a href="#" class="btn btn-sm btn-primary">More</a>
            </div>
          </div>
        </div>
        
        <div class="swiper-slide d-flex flex-column bg-light">
          <div class="w-100"><img src="http://lorempixel.com/640/640/sports/1" class="img-fluid" alt=""></div>
          <div class="card-body d-flex flex-column">
            <p class="text-muted">Lorem ipsum</p>
            <h4 class="m-0">Lorem ipsum dolor</h4>
            <h5 class="small">Aliquam voluptates, quisquam illum.</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <div class="mt-auto">
              <a href="#" class="btn btn-sm btn-primary">More</a>
            </div>
          </div>
        </div>

        <div class="swiper-slide d-flex flex-column bg-light">
          <div class="w-100"><img src="http://lorempixel.com/640/640/sports" class="img-fluid" alt=""></div>
          <div class="card-body d-flex flex-column">
            <p class="text-muted">Lorem ipsum dolor sit.</p>
            <h4 class="m-0">Lorem ipsum dolor</h4>
            <h5 class="small">Aliquam voluptates, quisquam illum.</h5>
            <p class="card-text">Fugiat itaque doloremque assumenda vitae, consequatur aspernatur! Porro eum, vitae!</p>
            <div class="mt-auto">
              <a href="#" class="btn btn-sm btn-primary">More</a>
            </div>
          </div>
        </div>
        
        <div class="swiper-slide d-flex flex-column bg-light">
          <div class="w-100"><img src="http://lorempixel.com/640/640/sports" class="img-fluid" alt=""></div>
          <div class="card-body d-flex flex-column">
            <p class="text-muted">Lorem ipsum</p>
            <h4 class="m-0">Lorem ipsum dolor</h4>
            <h5 class="small">Aliquam voluptates, quisquam illum.</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <div class="mt-auto">
              <a href="#" class="btn btn-sm btn-primary">More</a>
            </div>
          </div>
        </div>

        <div class="swiper-slide d-flex flex-column bg-light">
          <div class="w-100"><img src="http://lorempixel.com/640/640/sports/1" class="img-fluid" alt=""></div>
          <div class="card-body d-flex flex-column">
            <p class="text-muted">Lorem ipsum dolor sit.</p>
            <h4 class="m-0">Lorem ipsum dolor</h4>
            <h5 class="small">Aliquam voluptates, quisquam illum.</h5>
            <p class="card-text ">Fugiat itaque doloremque assumenda vitae, consequatur aspernatur! Porro eum, vitae!</p>
            <div class="mt-auto">
              <a href="#" class="btn btn-sm btn-primary">More</a>
            </div>
          </div>
        </div>
        
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/js/swiper.min.js"></script>

Автор: Razvan Zamfir Размещён: 12.06.2019 09:24
Вопросы из категории :
32x32