I have this carousel with the library slick.js, which has an automatic reproduction, what happens is that initially does not load well, I do not know what it can be, I have to go to the second tab to adjust ( attached image of how I am charged).
this is my code:
$(window).load(function() {
$('.slideSpa').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 2,
slidesToScroll: 1,
responsive: [{
breakpoint: 1024,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
dots: false,
autoplay: true,
autoplaySpeed: 2000
}
}]
});
});.dateHeadquarters .servicesValue {
border: 1px solid #E3E3E3;
border-radius: 0 22px 0 0;
padding: 20px;
border-bottom: 12px solid #E3E3E3;
line-height: 25px;
min-height: 350px;
margin: 15px 0;
}
.dateHeadquarters .nextSlider {
position: absolute;
top: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
width: 60px;
cursor: pointer;
}
.dateHeadquarters .nextSliderLeft {
right: -75px;
}
.dateHeadquarters .nextSliderRight {
left: -15px;
}
.dateHeadquarters .forSaber {
padding: 0 20px;
position: relative;
margin-bottom: 30px;
}
.dateHeadquarters .forSaber:after {
position: absolute;
content: '';
width: 10px;
height: 10px;
background-image: url(../assets/icon/point.svg);
top: 5%;
left: -1%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet" />
<link href="http://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet" />
<div class="dateHeadquarters">
<div class="row slideSpa">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="servicesValue">
<h3>
Masaje revitalizante
</h3>
<h4>
¿Qué incluye?
</h4>
<p>
Masaje
<br> Zona húmeda
</p>
<h4>
Tarifas
</h4>
<p>
Categoría A. $3.900
<br> Categoría B. $4.000
<br> Categoría C. $9.500
<br> Categoría D. $10.900
</p>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="servicesValue">
<h3>
Masaje revitalizante con alimentación
</h3>
<h4>
¿Qué incluye?
</h4>
<p>
Masaje
<br> Zona húmeda
<br> Tabla de quesos
</p>
<h4>
Tarifas
</h4>
<p>
Categoría A. $3.900
<br> Categoría B. $4.000
<br> Categoría C. $9.500
<br> Categoría D. $10.900
</p>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="servicesValue">
<h3>
Masaje revitalizante
</h3>
<br>
<h4>
¿Qué incluye?
</h4>
<p>
Masaje
<br> Zona húmeda
</p>
<br>
<h4>
Tarifas
</h4>
<p>
Categoría A. $3.900
<br> Categoría B. $4.000
<br> Categoría C. $9.500
<br> Categoría D. $10.900
</p>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="servicesValue">
<h3>
Masaje revitalizante
</h3>
<br>
<h4>
¿Qué incluye?
</h4>
<p>
Masaje
<br> Zona húmeda
</p>
<br>
<h4>
Tarifas
</h4>
<p>
Categoría A. $3.900
<br> Categoría B. $4.000
<br> Categoría C. $9.500
<br> Categoría D. $10.900
</p>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>