У меня есть слайдер для мобильного и dots выставленные через ablosute и все красиво, но при изменение контента ( количество текста в слайде ) все ломается. На скриншоте показана проблема ( https://i.sstatic.net/vtWRQ.jpg ).
Вот css точек:
.slick-dots{
display: flex;
position: absolute;
align-items: flex-end;
text-align: center;
left: 0; right: 0;
bottom: 46px;
}
html:
<div class="reviews">
<div class="container">
<div class="reviews__bg-img"></div>
<div class="reviews__line"></div>
<div class="reviews__items">
<div class="reviews__item">
<img src="images/reviews-people.png" alt="img" class="reviews__img">
<div class="reviews__box">
<h4 class="reviews__title">I have invested in 15<br> companies, 9 of which have<br> since had follow-on
rounds<br> at higher valuations, and 2<br> of which are nearing an exit.</h4>
<div class="reviews__name-box">
<p class="reviews__name">Rolf Garde</p>
<p class="reviews__role">Investor</p>
</div>
</div>
<p class="reviews__text">When I came to Israel, I venturedWhen I came to Israel, I venturedWhen I came to
Israel, I venturedWhen I came to Israel, I ventured on a journey to learn more about Startup Nation and
never intended to invest, but after 3 days in Tel Aviv and meeting iAngels, I couldn’t resist investing
with them. Now I have invested in 15 companies, 9 of which have since had follow-on rounds at higher
valuations, and 2 of which are nearing an exit so I can definitely recommend both Israel and iAngels.
</p>
</div>
<div class="reviews__item">
<img src="images/reviews-people.png" alt="img" class="reviews__img">
<div class="reviews__box">
<h4 class="reviews__title">I have invested in 15<br> companies, 9 of which have<br> since had follow-on
rounds<br> at higher valuations, and 2<br> of which are nearing an exit.</h4>
<div class="reviews__name-box">
<p class="reviews__name">Rolf Garde</p>
<p class="reviews__role">Investor</p>
</div>
</div>
<p class="reviews__text">When I came to Israel, I ventured on a journey to learn more about Startup Nation
and never intended to invest, but after 3 days in Tel Aviv and meeting iAngels, I couldn’t resist
investing with them. Now I have invested in 15 companies, 9 of which have since had follow-on rounds at
higher valuations, and 2 of which are nearing an exit so I can definitely recommend both Israel and
iAngels.</p>
</div>
</div>
</div>
</div>
SCSS:
@media(max-width:768px){
.reviews{
margin-top: 0;
padding-bottom: 0;
margin-bottom: 30px;
&__item{
max-width: 310px !important;
display: block !important;
margin: 15px auto;
background: #FFFFFF;
box-shadow: 0px 0px 14px 4px rgba(0, 0, 0, 0.12);
border-radius: 4px;
padding: 45px 29px 90px 29px;
position: relative;
}
&__img{
max-width: 128px;
height: 128px;
margin-bottom: 43px;
}
&__box{
margin: 0;
}
&__title{
margin: 0;
max-width: 252px;
width: 100%;
text-align: center;
font-size: 16px;
line-height: 18px;
padding-bottom: 35px;
position: relative;
&::before{
position: absolute;
content: '';
max-width: 252px;
width: 100%;
height: 2px;
background: #4CBCBF;
bottom: 0;
left: 0; right: 0;
margin: 0 auto;
}
}
&__text{
text-align: justify;
font-size: 16px;
line-height: 20px;
margin-top: 35px;
z-index: 2;
}
&__name , &__role{
font-size: 16px;
line-height: 20px;
}
&__name-box{
position: absolute;
left: 173px;
top: 80px;
width: 120px;
}
&__line{
display: none;
}
.slick-dots{
display: flex;
position: absolute;
align-items: flex-end;
text-align: center;
left: 0; right: 0;
bottom: 46px;
z-index: 1;
}
.a-right{
display: none;
}
.a-left{
display: none;
}
}
}
js :
$('.reviews__items').slick({
fade: true,
autoplay:true,
slidesToShow: 1,
dots: true,
arrows: true,
prevArrow:"<img class='a-left control-c prev slick-prev' src='images/left.svg' id='prv'>",
nextArrow:"<img class='a-right control-c next slick-next' src='images/right.svg' id='nxt'>",
responsive: [
{
breakpoint: 768,
settings: {
fade: true,
autoplay:true,
slidesToShow: 1,
dots: true,
arrows: false,
}
}
]
});