javascripthtmlcssinternet-explorer-11swiper.js
Swiper carousel IE11 bug: images are overstretched
I have put together a carousel with the help pf the Swiper plugin. It works fine, with no bugs,except in Internet Explorer 11, on Windows 10. Here, the images are overstretched vertically:
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="https://picsum.photos/id/1/600/600" 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="https://picsum.photos/id/2/600/600" 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="https://picsum.photos/id/1/600/600" 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="https://picsum.photos/id/2/600/600" 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="https://picsum.photos/id/1/600/600" 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="https://picsum.photos/id/2/600/600" 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>What is the cause of this bug? How can it be fixed?
UPDATE - screenshot:
Solution
I have wrapped the images in a <div class="picture-container"></div>and that is an improvement, but not an optimal solution yet:
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="picture-container"><img src="https://picsum.photos/id/1/600/600" 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="picture-container"><img src="https://picsum.photos/id/2/600/600" 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="picture-container"><img src="https://picsum.photos/id/1/600/600" 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="picture-container"><img src="https://picsum.photos/id/2/600/600" 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="picture-container"><img src="https://picsum.photos/id/1/600/600" 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="picture-container"><img src="https://picsum.photos/id/2/600/600" 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>- Chunk downloading of the big files right to the hard drive
- My custom CSS transition animation is not working on hover after I added AOS JS library
- how to get the Google analytics client ID
- Toggle vue-multiselect close/open on button click
- Best way to filter an objects's properties for data
- Passing function with arguments as a prop and invoking it internally in React
- Outlook calendar don't render with FullCalendar
- Is there a way to validate and allow only https url's using .isUri i.e. without using Regex in JavaScript?
- How to clear react native webview cookies?
- Skipping a test in Cypress conditionally
- How can I get all the HTML in a document or node containing shadowRoot elements
- Typescript: No index signature with a parameter of type 'string' was found on type '{ "A": string; }
- Retain Twitter Bootstrap Collapse state on Page refresh/Navigation
- How to get "Results per Row" (from a 'clicked entry' off a "dropdown menu") to show up correctly?
- Is there is a C# function which is similar to .Map() in JavaScript?
- How to trigger SVG render same as manual DOM edit in Chrome using JS?
- How do I test a Node.JS Script that is not a module and runs as soon as it's called?
- Set element width based on a string that is not in the element
- Testing JavaScript Written for the Browser in Node JS
- Where are the trailing commas coming from in these radio buttons?
- How to verify a signature from the Phantom wallet?
- How to get the value of a Google Chrome flag using Javascript
- event.preventDefault cannot block clipboard paste in chatgpt.com prompt box
- Should I use ref or findDOMNode to get react root dom node of an element?
- Disable button for 5 seconds with different label and change after it
- JavaScript - Get all but last item in array
- React-Redux: Should all component states be kept in Redux Store
- Is it possible to use Closure Compiler ADVANCED_OPTIMIZATIONS with jQuery?
- Capture selected option returns not defined instead
- Uncaught TypeError: matchExpr[type].exec is not a function