0

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
                     }
                  }
              ]
             }); 
}
2
  • Puede ser una configuración propia de la librería que estas utilizando. Por ejemplo por defecto se puede indicar que el desplazamiento de las imágenes sea aleatorio o que las imágenes se repitan de forma infinita el 21 feb. 2019 a las 13:28
  • Si tengo un display none cuando se hace responsive por eso me machaca el siguiente porque reconoce que haya 4 aunque diga 3. ¿Que solucción podria ser?
    – mgarciaQA
    el 21 feb. 2019 a las 16:17

0

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

Examina otras preguntas con la etiqueta o formula tu propia pregunta.