将Slick Slider与Bootstrap 4结合使用

如何解决将Slick Slider与Bootstrap 4结合使用

下一个问题是我遇到的一个严重问题。 首先，我试图将三个div集成到我的滑块中，并且它们都保留了Bootstrap 4骨架。 代码就像这样，而且它是从另一个Jquery函数生成的，我正在其中从数据库插入信息。因此，我将此信息放入每张卡中的一张。

  //FUNCIOnes
        //Crear especialista
function CrearEspecialistaCard(especialista,mostrarNombreEspecialidad) {
            let cardHTML = "";
            cardHTML += '<div><div class="col-xs-12 col-lg-3 col-md-3 float-left has_border_grey border_10 px-0 overflow-hidden mr-2 profile-Box">'
                 + '<div class="card d-inline"><div class="col-lg-6 col-md-6 bg-light float-left py-2 text-md-left text-center" style="z-index:101;"> ';
            cardHTML += '<h2 class="text-secondary profile-name">' + ((especialista.sexo == "F") ? "Dra. " : "Dr. ")
                 + especialista.nommed + " " + especialista.apemed + '</h2>' +
                 '<button class="btn btn-secondary btn-profile btn-sm my-2" data-toggle="modal" data-target="#modalDoctor' + especialista.idEspecialista + '"'
                 +  '>Ver perfil' + '</button>';
            cardHTML += '<h3 class="spec-title">' +  especialista.descesp + '</h3>' + '<h4 class="center-title">' +
                '' + '</h4>'+ '<h5 class="prov-title mb-1">' + especialista.provincias + '</h5>';
             cardHTML += '<p id="reservarCita" class=""> RESERVAR CITA</p>' + 
                (especialista.teleConsulta === true) ? 
                    '<a class="d-inline-block  mr-1" href="/videoConsulta"><img class="bg-purple py-1 px-1" src="/Content/Img/videoconsulta30.png" style="max-width:30px;"  />' +
                    '</a>' : '';
                cardHTML += (especialista.videoConsulta === true) ? 
                    '<a class="d-inline-block mr-1" href="/teleConsulta"><img class="bg-purple-red py-1 px-1" src="/Content/Img/teleconsulta-30.png" style="max-width:30px;" />'  +
                    '</a>' : '';
                cardHTML += (especialista.consulta === true) ? '<a class="d-inline-block  mr-1" href="/pedirCita">' + 
                    '<img class="bg-light-purple py-1 px-1" src="/Content/Img/presencial30.png" style="max-width:30px;"  />' +
                    '</a>' : '';
               cardHTML += '</div>';     
               cardHTML += '  <div class="col-md-6 float-left"  style="z-index:100;">' +
                        '<img class="profile-img img-fluid"  src="/Content/Img/Medicos/cuadroasistencial/FORMATO-MEDICOS.jpg" alt="Doctor" />' +
                    '</div>';     
                 
            if (mostrarNombreEspecialidad != undefined && mostrarNombreEspecialidad == true) {
                cardHTML += '<br /><span style="font-size:small;" class="colorcard bold">' + especialista.descesp + '</span>';
            } else {
                cardHTML += '<br />';
            }            
            cardHTML += '</div></div></div>';
            return cardHTML;
}

我将向您展示创建行的位置，该行将插入每张具有匿名功能的卡之一。

   const MuestraEspecialistasFavoritos = (qRow) => {
                let resultadoHTML = "";
                let modalHTML = "";

                resultadoHTML += '<div class="preview-carousel">'; // this is where I generate the class for my carousel
                for (var a = 0; a < globalModeloFavoritos.length; a++) {
                    let toto = ca_model.listaEspecialistas.filter(b => b.idEspecialista == globalModeloFavoritos[a]);
                    if ( toto ) resultadoHTML += CrearEspecialistaCard(toto[0],false);
                    if( toto )
                     var doctor = toto[0];  
                     modalHTML += loadModal(doctor,toto[0].idEspecialista);
                }
               
                moDalesRecientes.html(modalHTML);  
                resultadoHTML += '</div>';
                qRow.html(resultadoHTML);
        }

当我已经构造好卡片时（在这种情况下它们可以正常工作并按我的意愿显示），我将调用滑动滑块，以便将每张卡片中的一张解释为一个唯一的滑块。

        $('.preview-carousel').slick({
            slidesToShow: 2,slidesToScroll: 1
        });

我的slick.js已加载，因为我已经检查过了，但绝对没有做任何事情。 仅供参考，每张卡片首先都会生成一个没有类且没有ID的div，因此我可以将每一个项目解释为好像它们是滑块的项目。

解决方法

好，已经找到了。 其实并不难。 我试图在文档准备功能内运行平滑功能。 具有加载功能，它可以完美运行。

  $(window).on('load',function() {
        $('.preview-carousel').slick({
            slidesToShow: 2,slidesToScroll: 1
        });
    });