I want to add the carousel in fancybox slider

Question

Hello, I want to add a carousel in fancy box slider but it is not working for me, I have used slick carousel and owl carousel for this functionality none of them worked for me, I'm fetching data/images from cloud firestore, but I don't why it is not working, fancy box slider when I enlarge the images is working fine

HTML:

 <div style="display: flex; width: max-content; align-items: center;">
    <button>
      <input type="file" id="uploadfile_Windows"  class="custom-file-input"  name="filename" multiple  style="position: absolute; opacity: 0; height: 100%; width: 100%;cursor: pointer;" >
      <img src="{% static 'img/iconSmall.png' %}" alt="" style="width:">
    </button>
 <div style="width:770px;">
     <div class="slider" id="slider_windows">
     <div class="slide sliderImgRander" id="slide_windows"> </div>
    </div>
   </div>
  </div>

javascript

 if(key == 'imageLink'){
 if(value.length > 0){
for(var j = 0; j < value.length; j++){
  
$('#slide_windows').append('<div class="slider-box"><span onclick="$(this).parents(\'.slider-box\').remove()" class="delete imageLinkdataid">&#215;</span><a rel="gallery" data-trigger="preview" data-fancybox="images" href="'+value[j]+'"><img src="'+value[j]+'" alt=""/></a><input type="hidden" value="'+value[j]+'" class="imageLinks_Windows"></div>')
 }
$(".fancybox").fancybox({
loop : false,
 afterLoad: function(current, previous) {
 console.info( 'Current: ' + current.href );        
 console.info( 'Previous: ' + (previous ? previous.href : '-') );
              
if (previous) {
console.info( 'Navigating: ' + (current.index > previous.index ? 'right' : 'left') );     
}
}
});      
}
 }else{
 $('#'+key).val(value);
}