Стоит скрипт по переключению блоков со слайдером и после перезагрузки страницы один из слайдеров сжимается , но после передвижений начинает работать , вот ссылка на сайт
ifvinvest.ru , там внизу есть блок История успеха и Отзыв , это два блока , нажмите на каждый , именно блок с отзывом не срабатывает
html код
<div class="comments-header">
<h1 id="a-1" class="active">Истории <span>успеха</span></h1><h1 class="color" id="a-2"><span>отзывы</span></h1>
<div class="history ">
<div class="comments-content comments-1">
<div class="comments-content-slider">
<div class="row">
<div class="col-md-3 col-sm-12">
<div class="comments-content-slider-avatar">
<img src="img/avatar.png" alt="">
<h4>Ирина Дубцова</h4>
</div>
</div>
<div class="col-md-9 col-sm-12">
<div class="comments-content-slider-text">
<p>Не следует, однако забывать, что рамки и место обучения кадров представляет собой интересный эксперимент проверки модели развития. Товарищи! рамки и место обучения кадров требуют определения и уточнения модели развития. Равным образом постоянное информационно-пропагандистское обеспечение нашей деятельности обеспечивает широкому кругу (специалистов) участие в формировании модели развития. <br><br>
Разнообразный и богатый опыт постоянный количественный рост и сфера нашей активности влечет за собой процесс внедрения и модернизации дальнейших направлений развития.</p>
</div>
</div>
</div>
</div>
<div class="comments-content-slider">
<div class="row">
<div class="col-md-3 col-sm-12">
<div class="comments-content-slider-avatar">
<img src="img/avatar.png" alt="">
<h4>Ирина Дубцова</h4>
</div>
</div>
<div class="col-md-9 col-sm-12">
<div class="comments-content-slider-text">
<p>Не следует, однако забывать, что рамки и место обучения кадров представляет собой интересный эксперимент проверки модели развития. Товарищи! рамки и место обучения кадров требуют определения и уточнения модели развития. Равным образом постоянное информационно-пропагандистское обеспечение нашей деятельности обеспечивает широкому кругу (специалистов) участие в формировании модели развития. <br><br>
Разнообразный и богатый опыт постоянный количественный рост и сфера нашей активности влечет за собой процесс внедрения и модернизации дальнейших направлений развития.</p>
</div>
</div>
</div>
</div>
</div>
<div class="sliders">
<div class="slider_arrow slider_arrow-1"></div>
</div>
</div>
<div class="comment">
<div class="comments-content comments-2">
<div class="comments-content-slider">
<div class="row">
<div class="col-md-3 col-sm-12">
<div class="comments-content-slider-avatar">
<img src="img/avatar.png" alt="">
<h4>Ирина Дубцова</h4>
</div>
</div>
<div class="col-md-9 col-sm-12">
<div class="comments-content-slider-text">
<p>Не следует, однако забывать, что рамки и место обучения кадров представляет собой интересный эксперимент проверки модели развития. Товарищи! рамки и место обучения кадров требуют определения и уточнения модели развития. Равным образом постоянное информационно-пропагандистское обеспечение нашей деятельности обеспечивает широкому кругу (специалистов) участие в формировании модели развития. <br><br>
Разнообразный и богатый опыт постоянный количественный рост и сфера нашей активности влечет за собой процесс внедрения и модернизации дальнейших направлений развития.</p>
</div>
</div>
</div>
</div>
<div class="comments-content-slider">
<div class="row">
<div class="col-md-3 col-sm-12">
<div class="comments-content-slider-avatar">
<img src="img/avatar.png" alt="">
<h4>Ирина Дубцова</h4>
</div>
</div>
<div class="col-md-9 col-sm-12">
<div class="comments-content-slider-text">
<p>Не следует, однако забывать, что рамки и место обучения кадров представляет собой интересный эксперимент проверки модели развития. Товарищи! рамки и место обучения кадров требуют определения и уточнения модели развития. Равным образом постоянное информационно-пропагандистское обеспечение нашей деятельности обеспечивает широкому кругу (специалистов) участие в формировании модели развития. <br><br>
Разнообразный и богатый опыт постоянный количественный рост и сфера нашей активности влечет за собой процесс внедрения и модернизации дальнейших направлений развития.</p>
</div>
</div>
</div>
</div>
</div>
<div class="sliders">
<div class="slider_arrow slider_arrow-2"></div>
</div>
</div>
Яваскрипт
$(document).ready(function() {
$('.slider-slick').slick({
dots: true,
infinite: false,
speed: 500,
slidesToShow: 3,
slidesToScroll: 1,
appendArrows:'.slider-arrows',
prevArrow:'<span class="slick-prev"><</span>',
nextArrow:'<span class="slick-next">></span>',
responsive: [
{
breakpoint: 991,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
dots: false
}
}
]
});
$('.educators-slider').slick({
dots: true,
infinite: false,
speed: 500,
slidesToShow: 4,
slidesToScroll: 1,
appendArrows:'.slider-arrow',
prevArrow:'<span class="slick-prev"><</span>',
nextArrow:'<span class="slick-next">></span>',
responsive: [
{
breakpoint: 991,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
dots: false
}
}
]
});
$('.comments-1').slick({
dots: true,
infinite: false,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
appendArrows:'.slider_arrow-1',
prevArrow:'<span class="slick-prev"><</span>',
nextArrow:'<span class="slick-next">></span>',
responsive: [
{
breakpoint: 480,
settings: {
dots: false
}
}
]
});
$('.comments-2').slick({
dots: true,
infinite: false,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
appendArrows:'.slider_arrow-2',
prevArrow:'<span class="slick-prev"><</span>',
nextArrow:'<span class="slick-next">></span>',
responsive: [
{
breakpoint: 480,
settings: {
dots: false
}
}
]
});
});
CSS
.history{
display: block;
}
.comment{
display: none;
}
&-content{
position: relative;
margin: 3em 0;
&-slider{
&-avatar{
text-align: center;
img{
margin: 0 auto;
max-width: 100%
}
h4{
margin-top: 2em;
color: #2d2d2d;
font-size: 1.31em;
}
}
&-text{
margin-bottom: 3em;
p{
color: #2d2d2d;
font-size: 1.05em;
margin: 1em 0 0 0;
line-height: 25px;
vertical-align: middle;
}
}
}
.slick-dots{
position: absolute;
bottom: 0px;
}
}
.sliders{
width: 100%;
position: relative;
bottom: 20px;
.slider_arrow{
position: absolute;
right: 50%;
z-index: 9;
}
}
Простой
