Добрый день.
Делаю карусель на весь экран с боковыми стрелками. Через font awesome. Они отображаются, но как то криво.
Искал в инете, пишут, что такое может быть из-за font-size. Но я нигде не указывал font-size.
<!DOCTYPE html>
<html>
<head>
<meta charset="sUTF-8">
<title>#1</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.default.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="img/icon.png" type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
<header class="header">
<div class="container">
</div>
</header>
<section>
<div class="container">
<div class="owl-carousel owl-theme owl-nav">
<div class="item"><img src="img/back_One.png"></div>
<div class="item"><img src="img/back_Two.png"></div>
<div class="item"><img src="img/back_Three.png"></div>
</div>
</div>
</section>
<footer>
<div class="container">
</div>
</footer>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/script.js"></script>
</body>
</html>
body {
font-family: 'Simonetta', cursive;
padding: 0;
margin: 0;
border: 0;
outline: none;
border-collapse: collapse;
-webkit-overflow-scrolling: touch;
-webkit-tap-highlight-color: transparent;
} /* Обращается к body. Ставит фон и границы */
div, p, a, img, form, button {
box-sizing: border-box;
}
a {
text-decoration: none;
} /* Убирает линию под ссылкой */
ul, li {
display: block;
padding: 0;
margin: 0;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { background: transparent; border: 0; margin: 0; padding: 0; }
.container {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: auto;
margin: 0 auto;
}
i {
font-family: fontawesome !important;
}
@import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
/*--------------------------------------
--------------------------------------*/
.owl-carousel .owl-item {
height: 655px;
}
/*.owl-carousel .owl-item {
height: 1000px;
}*/
.owl-prev i, .owl-next i {
color: #FFF;
}
.owl-prev i:hover,
.owl-next i:hover {
color: #8199A3;
}
.owl-prev, .owl-next {
position: absolute;
top: 0;
height: 100%;
width: auto;
}
.owl-prev {
left: 15px;
}
.owl-next {
right: 15px;
}
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:0,
nav:true,
dots:false,
smartSpeed: 1500,
navText: ['<i class="fas fa-angle-left fa-5x"></i>',
'<i class="fas fa-angle-right fa-5x"></i>'],
afterMove: callback,
responsive:{
1040:{
items:1
}
}
})
});
Кто нибудь сталкивался с такой проблемой?
Простой
