I am currently facing a significant issue. I am attempting to integrate three div elements into my slider, and all of them maintain a Bootstrap 4 structure.
The code looks like this, and it is being generated from another Jquery function where I am inserting information from a Database. This data is then placed within each card.
//FUNCIONES
//Create specialist
function CreateSpecialistCard(specialist, showSpecialtyName) {
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">' + ((specialist.gender == "F") ? "Dra. " : "Dr. ")
+ specialist.firstName + " " + specialist.lastName + '</h2>' +
'<button class="btn btn-secondary btn-profile btn-sm my-2" data-toggle="modal" data-target="#modalDoctor' + specialist.id + '"'
+ '>View Profile' + '</button>';
cardHTML += '<h3 class="spec-title">' + specialist.specialtyDesc + '</h3>' + '<h4 class="center-title">' +
'' + '</h4>'+ '<h5 class="prov-title mb-1">' + specialist.provinces + '</h5>';
cardHTML += '<p id="reserveAppointment" class=""> RESERVE APPOINTMENT</p>' +
(specialist.teleConsultation === true) ?
'<a class="d-inline-block mr-1" href="/videoConsultation"><img class="bg-purple py-1 px-1" src="/Content/Img/videoconsultation30.png" style="max-width:30px;" />' +
'</a>' : '';
cardHTML += (specialist.videoConsultation === true) ?
'<a class="d-inline-block mr-1" href="/teleConsultation"><img class="bg-purple-red py-1 px-1" src="/Content/Img/teleconsultation-30.png" style="max-width:30px;" />' +
<'/a>' : '';
cardHTML += (specialist.inPersonConsultation === true) ? '<a class="d-inline-block mr-1" href="/scheduleAppointment">' +
'<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-MÉDICOS.jpg" alt="Doctor" />' +
'</div>';
if (showSpecialtyName != undefined && showSpecialtyName == true) {
cardHTML += '<br /><span style="font-size:small;" class="colorcard bold">' + specialist.specialtyDesc + '</span>';
} else {
cardHTML += '<br />';
}
cardHTML += '</div></div></div>';
return cardHTML;
}
Below is the section where I create the row that inserts each card using an anonymous function.
const DisplayFavoriteSpecialists = (carouselRow) => {
let resultsHTML = "";
let modalHTML = "";
resultsHTML += '<div class="preview-carousel">'; // this sets up the carousel class
for (var i = 0; i < favoriteModelData.length; i++) {
let specialistData = speciality_model.specialistsList.filter(j => j.idEspecialista == favoriteModelData[i]);
if ( specialistData ) resultsHTML += CreateSpecialistCard(specialistData[0] , false);
if( specialistData )
var doctorInfo = specialistData[0];
modalHTML += loadModal(doctorInfo, specialistData[0].idSpecialist);
}
recentModals.html(modalHTML);
resultsHTML += '</div>';
carouselRow.html(resultsHTML);
}
After creating the cards successfully, which are displaying as intended, I proceed to call the slick slider so that I can group each card as individual items in the slider.
$('.preview-carousel').slick({
slidesToShow: 2,
slidesToScroll: 1
});
The slick.js library is properly loaded, but unfortunately, it seems to be non-functional. It's worth noting that each card initially generates a div without any classes or IDs to allow easy interpretation of the items within the slider.