Galera boa tarde.
Tenho um slider responsivo até a tela do android... Quando vou para o iphone a foto fica esticada.
Alguém pode ajudar?
Seguem os códigos :
HTML:
<section id="banner_part">
<div class="slide_active">
<div class="banner_item" data-bg-image="images/banner-2.jpg">
<div class="container text-center">
<div class="row">
<div class="banner_text">
<h4><span>CONFORTO</span> ADAPTADO AO SEU ESTILO.</h4>
<p>Valorize o seu imóvel, diminua a fatura energética e a pegada ambiental.</p>
</div>
</div>
</div>
</div>
CSS
#banner_part {
position: relative;
}
.banner_item {
position: relative;
height: 100vh;
background-attachment: fixed!important;
background-position: center!important;
background-size: cover!important;
}
.banner_item::after {
position: absolute;
content: '';
height: 100%;
width: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, .3);
z-index: 2
}
.banner_text {
position: absolute;
top: 56%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
width: 100%;
}
.banner_text h3 {
font-size: 30px;
text-transform: uppercase;
font-weight: 400;
}
.banner_text h4 {
padding: 15px 0 24px;
font-size: 40px;
display: inline-block;
border-radius: 4px;
font-weight: 500;
}
.banner_text h4 span {
font-weight: 700;
}
.banner_text p {
font-weight: 300;
max-width: 570px;
margin: auto;
margin-bottom: 40px;
}
.banner_text a {
text-transform: uppercase;
}
/* arrows */
.banner_arrows i {
height: 50px;
line-height: 44px;
font-size: 48px;
background: transparent;
width: 45px;
text-align: center;
cursor: pointer;
border: 2px solid;
opacity: 0;
}
#banner_part:hover .banner_arrows i {
opacity: 1;
}
.banner_arrow_left {
position: absolute;
top: 57%;
left: 5%;
transform: translateY(-50%)
}
.banner_arrow_right {
position: absolute;
top: 57%;
right: 5%;
transform: translateY(-50%)
}
/* Dots */
.slide_active .slick-dots {
position: absolute;
bottom: 5%;
left: 50%;
transform: translateX(-50%);
}
.slide_active .slick-dots li {
display: inline-block;
margin: 0 5px
}
.slide_active .slick-dots li button {
padding: 2px;
display: block;
height: 13px;
width: 13px;
text-align: center;
line-height: 13px;
border-radius: 50%;
background: transparent;
color: transparent;
border: 1px solid;
}
.slide_active .slick-dots li button:focus {
outline: none
}
JS
$('.slide_active').slick({
slidesToScroll: 1,
slidesToShow: 1,
speed: 1000,
fade: true,
infinite: true,
arrows: true,
prevArrow: '.banner_arrow_left',
nextArrow: '.banner_arrow_right',
dots: true,
autoplay: true,
cssEase: 'linear'
});
/* About veno box js */
$('.venoboxvideo').venobox({
autoplay: true,
closeColor: '#fcac45'
});
/* Achivement Counter js */
$('.counting').counterUp({
delay: 30,
time: 2000
});
/* Work filtrizr js */
$('.filtr-container').filterizr();
// work filtrizr control js
$('.simplefilter li').on('click', function () {
$('.simplefilter li').removeClass('active');
$(this).addClass('active');
});
/* Work Venobox js */
$('.venobox').venobox({
arrowsColor: "#fcac45",
spinner: 'three-bounce',
spinColor: '#fcac45',
closeColor: '#fcac45'
});
Desde já, obrigado pela ajuda.
