结合 Slick Slider 与 Bootstrap 4
Combine Slick Slider with 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);
}
当我已经构建好我的卡片时,在这种情况下,它们可以正常工作并按我想要的方式显示,我将调用 slick 滑块,以便我可以将每张卡片中的一张解释为一个独特的滑块。
$('.preview-carousel').slick({
slidesToShow: 2,
slidesToScroll: 1
});
我的 slick.js 已加载,正如我已经检查过的那样,但它并没有完全不执行任何操作。
仅供参考,每张卡片首先生成一个 div,没有 类,也没有 ID,因此我可以将每个项目解释为滑块的项目。
好的,已经找到了。
实际上并没有那么难。
我试图 运行 文档就绪函数中的 slick 函数。
加上加载功能,完美运行。
$(window).on('load', function() {
$('.preview-carousel').slick({
slidesToShow: 2,
slidesToScroll: 1
});
});
下一期我遇到了一个非常严重的问题。
首先,我试图将三个 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);
}
当我已经构建好我的卡片时,在这种情况下,它们可以正常工作并按我想要的方式显示,我将调用 slick 滑块,以便我可以将每张卡片中的一张解释为一个独特的滑块。
$('.preview-carousel').slick({
slidesToShow: 2,
slidesToScroll: 1
});
我的 slick.js 已加载,正如我已经检查过的那样,但它并没有完全不执行任何操作。 仅供参考,每张卡片首先生成一个 div,没有 类,也没有 ID,因此我可以将每个项目解释为滑块的项目。
好的,已经找到了。 实际上并没有那么难。 我试图 运行 文档就绪函数中的 slick 函数。 加上加载功能,完美运行。
$(window).on('load', function() {
$('.preview-carousel').slick({
slidesToShow: 2,
slidesToScroll: 1
});
});