tengo 3 fotos en mi carousel, en este caso lo añado con colores: rojo, marrón y blanco. cuando inicia mi carousel, sale el color rojo, cuando pasa al siguiente sale marrón y cuando pasa al blanco, sale otra vez el marrón. Después de eso sale el Blanco pero siempre sale el marrón dos veces, porque puede ser ?
codigo HTML
<section class='spp-section'>
<div class='spp-container --gutter-sm-16'>
<p class='spp-h3 spp-h3--border'>Las mas usadas</p>
</div>
<div class='spp-modules spp-container'>
<div class='spp-row'>
<div class='spp-col-md-12 --gutterless-sm'>
<div class='spp-carousel spp-carousel--nonav'>
<div class='carousel--MultiProd-16'>
<div class='spp-carousel__item item active spp-col spp-col-md-3'>
<div class='spp-module spp-module--card'>
<div class='spp-module__container'><img class='spp-module__img' src='./images/tarjeta-6.jpg' alt='Crédito Mundo 1|2|3'></div>
<div class='spp-module__container'>
<p class='spp-module__title'>Crédito Mundo 1|2|3</p>
</div>
<div class='spp-module__container'>La tarjeta de crédito de la <strong>Cuenta 1|2|3</strong>. Podrás financiar tus pagos o pagar a final de mes.</div>
</div>
</div>
<div class='spp-carousel__item item spp-col spp-col-md-3'>
<div class='spp-module spp-module--card'>
<div class='spp-module__container'><img class='spp-module__img' src='./images/tarjeta-7.jpg' alt='Crédito Mundo 1|2|3'></div>
<div class='spp-module__container'>
<p class='spp-module__title'>Crédito Oro 1|2|3</p>
</div>
<div class='spp-module__container'>Asociada a la <strong>Cuenta 1|2|3</strong>. Para pagar y sacar dinero.</div>
</div>
</div>
<div class='spp-carousel__item item spp-col spp-col-md-3'>
<div class='spp-module spp-module--card'>
<div class='spp-module__container'><img class='spp-module__img' src='./images/tarjeta-8.jpg' alt='Crédito Mundo 1|2|3'></div>
<div class='spp-module__container'>
<p class='spp-module__title'>Tarjeta prepago E-cash</p>
</div>
<div class='spp-module__container'>Especialmente diseñada para tus operaciones y pagos en internet.</div>
</div>
</div>
<div class='spp-col spp-col-md-3 spp-hidden--sm'>
<div class='spp-module spp-module--card spp-module--endlist'>
<div class='spp-module__container'>
<p class='spp-module__title spp-txt-upp'>Y ademas</p>
</div>
<div class='spp-module__container'>
<ul class='spp-module__list spp-list spp-list--bullets'>
<li class='spp-list__item'><a class='spp-list__link' href='www.google.es'>¿Crédito o débito? Te ayudamos a elegir</a></li>
<li class='spp-list__item'><a class='spp-list__link' href='www.google2.es'>¿Cuándo recibiré mi tarjeta?</a></li>
<li class='spp-list__item'><a class='spp-list__link' href='www.google3.es'>Comisiones habituales</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class='spp-row spp-hidden--md'>
<div class='spp-col'>
<div class='spp-module spp-module--card spp-module--endlist'>
<div class='spp-module__container'>
<p class='spp-module__title spp-txt-upp'>Y ademas</p>
</div>
<div class='spp-module__container'>
<ul class='spp-module__list spp-list spp-list--bullets'>
<li class='spp-list__item'><a class='spp-list__link' href='www.google.es'>¿Crédito o débito? Te ayudamos a elegir</a></li>
<li class='spp-list__item'><a class='spp-list__link' href='www.google2.es'>¿Cuándo recibiré mi tarjeta?</a></li>
<li class='spp-list__item'><a class='spp-list__link' href='www.google3.es'>Comisiones habituales</a></li>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Codigo js
function generarSlickMulti16(configuracion){
$('.carousel--MultiProd-16').slick({
arrows: false,
dots:false,
slidesToShow: 4,
autoplay: configuracion.autoplay,
autoplaySpeed: configuracion.duracionTransicion,
responsive: [
{
breakpoint: 708,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
speed: 300
}
}
]
});
}