在动态创建的模态中引导轮播

时间:2020-02-13 08:46:33

标签: javascript bootstrap-4

我有使用forEach循环动态创建的模态,其中模态值是数组元素。而且我必须制作一个轮播,允许我在下一个和上一个模态之间切换,但是我不知道该怎么做,有人可以帮忙吗?

//PHP masīvu pārveido par JS masīvu
var receivedArray = JSON.parse('<?php echo json_encode($unserialize);?>');
var rowNumber = 0;
var recordCount = 0;
//Funkcija, kas veido HTML daļu no visa
$(document).ready(function(){
  receivedArray.forEach(function(record, index){
    console.log(record.nameLV);
    $("#modal-form-content").append(
      "<pre><button class=\"btn modal-button\" data-toggle=\"modal\" id=\"buttonOn_"+index+ "\" data-target=\"#Modals_" +index+"\" value=\"open Modal\"></button>\n" +
      "<h3 class=\"modal-title_"+index+"\"></h3>\n"+
      "</pre>\n"+
      "<div class=\"modal fade\" id=\"Modals_" +index+ "\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"exampleModalCenterTitle\" aria-hidden=\"true\">\n" +
      "<div class=\"modal-dialog modal-lg modal-dialog-centered\">\n" +
      "<div class=\"modal-content\" id=\"modal-content_"+index+ "\">\n" +
      //         "            <div class=\"modal-header\" id=\"modal-header_"+index+ "\">\n" +
      //         "            </div>\n" +
      "<div class=\"modal-body picture\" id=\"modal-body_"+index+ "\">\n" +
      "<img src=\"\" class=\"\"  id=\"modalPic_"+index+ "\" alt=\"wow\" >\n" +
      "<h2 id=\"modal-title_"+index+ "\" class=\"modal-title_"+index+"\"></h2>\n" +
      "<p id=\"modal-description_"+index+ "\" class=\"modal-description_"+index+ "\"></p>\n" +
      //          "            <div class=\"modal-footer\" id=\"modal_footer_"+index+ "\" style=' text-align: left;'>\n" +
      "<button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>\n" +
      "</div>\n" +
      "</div>\n" +
      "</div>\n" +
      "</div>\n");
    //Nolasot masīva datus, no servera atgūst nepieciešamo bildi
    recordCount++;
    rowNumber++;
    // $("#modal-header_"+index).val(record.nameLV);
    $(".modal-title_"+index).text(record.nameLV);
    $("#modal-description_"+index).text(record.descriptionLV);
    $("#buttonOn_"+index).css("background-image", "url('../images/uploads/"+record.Image+"')");
    $("#modalPic_"+index).attr("src", "../images/uploads/"+record.Image);
  });
});

0 个答案:

没有答案