giwuf,
код ниже, у вас в ie работает?
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<style type="text/css">
.carousel:after, .carousel:before {
content: "";
display: block;
height: 50px;
background: #f1fff1;
}
.carousel:after {
background: #fffff1;
}
.carousel .owl-stage-outer {
padding: 32px 0;
margin: -32px 0;
}
.carousel .owl-stage {
display: flex;
}
.carousel .owl-item {
-webkit-transition: .15s;
transition: .15s;
z-index: 0;
flex: 1 0 auto;
overflow: hidden;
border-radius: .01px;
}
.carousel .owl-item:hover {
-webkit-transition: .5s;
transition: .5s;
-webkit-transform: scale(1.23);
transform: scale(1.23);
z-index: 10;
border-radius: 10px;
box-shadow: 4px 4px 7px -1px rgba(173, 173, 173, 1.0);
}
.carousel .photo {
display: block;
overflow: hidden;
height: 100%;
}
.carousel .photo img {
min-width: 100%;
min-height: 100%;
object-fit: cover;
-webkit-transition: 1s;
transition: 1s;
-webkit-transform: scale(1.15);
transform: scale(1.15);
animation: zoom 10s infinite linear;
animation-play-state: paused;
}
.carousel .photo img:hover {
animation-play-state: running;
}
@keyframes zoom {
from, to, 90% {
-webkit-filter: blur(0.1px);
filter: blur(0.1px);
}
90% {
-webkit-transform: scale(2);
transform: scale(2);
}
91% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-filter: blur(5px);
filter: blur(5px);
}
}
</style>
<link href="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.carousel.css" rel="stylesheet">
<link href="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.theme.default.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/owl.carousel.js"></script>
<script>
jQuery(window).on("load", function() {
$("#photo-gallery").owlCarousel({
loop: true,
nav: false,
dots: false,
responsive: {
0: { items: 2 },
480: { items: 3 },
768: { items: 4 },
992: { items: 5 }
}
})
});
</script>
</head>
<body>
<section id="photo-gallery" class="carousel owl-carousel">
<a class="photo"><img src="https://picsum.photos/300/190/?random&r=1" alt="photo-1"></a>
<a class="photo"><img src="https://picsum.photos/304/184/?random&r=2" alt="photo-2"></a>
<a class="photo"><img src="https://picsum.photos/305/189/?random&r=3" alt="photo-3"></a>
<a class="photo"><img src="https://picsum.photos/304/189/?random&r=4" alt="photo-4"></a>
<a class="photo"><img src="https://picsum.photos/305/190/?random&r=5" alt="photo-5"></a>
</section>
</body>
</html>