如何为多个模态编码，其中一些是具有不同数量幻灯片的轮播

Question

我有一个包含多个按钮的页面，当单击每个按钮时，会弹出不同的模式。一些模态是轮播，我的代码有效，但只有一个轮播，当我有多个轮播时，我会在所有轮播上获得额外的空幻灯片。所以我猜我的代码是将所有轮播中的所有幻灯片计算在一起。我试图写一些东西，它说如果单击此模态，然后仅从单击的模态中获取幻灯片，但我正在努力。

这些是相关代码的位：

<script>
//Carousel
	
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
 showDivs(slideIndex += n); 
}
function currentDiv(n) {
  showDivs(slideIndex = n);
}
function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
	   }
 for (i = 0; i < dots.length; i++) {
     /*dots[i].className = dots[i].className.replace(" w3-white", "");*/
  }
  x[slideIndex-1].style.display = "block";  
  /*dots[slideIndex-1].className += " w3-white";*/
}
  </script>
	
<script>
//Display corresponding modal of letter that is clicked 
	
$(".button").on("click", function() {
   var modal = $(this).data("modal");
   $(modal).show();
   document.body.classList.add("modal-open");  
 
});
  
  
//Close modal when "x" is clicked or when area outside modal is clicked
$(".modal").on("click", function(e) {
   var className = e.target.className;
   if(className === "modal" || className === "close"){
   $(this).closest(".modal").hide();
   document.body.classList.remove("modal-open");
  }
});
  
  
  
</script>

<button class="button" data-modal="#modalOne"><img id="myImg" src=""></button>
<button class="button" data-modal="#modalB"><img id="myImg" src=""></button>
<button class="button" data-modal="#modalC"><img id="myImg" src=""></button>
	
<!-- The Modal -->
 <div id="modalA" class="modal">
<!-- Modal content -->
  <div class="modal-content">
	<span class="close">×</span>
	
	<div class= "mySlides">
	  <img class="gif" src="" width="100" height="100"  >
	  
	  <h4>Title</h4>
      <p> content </p>
	</div>
	
	<div class="mySlides">
	  <h4 Title</h4>
	  <p> content </p>
	  
	</div>
		
    <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div>
    <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div>
  </div>
</div>
<!-- The Modal B -->
 <div id="modalB" class="modal">
<!-- Modal content -->
  <div class="modal-content">
	<span class="close">×</span>
	
	<div class="mySlides">
	  <img class="gif" src="" width="100" height="100"  >
	  <h4></h4>
      <p></p>
	</div>
  </div>
</div> 
<!-- The Modal C -->
 <div id="modalC" class="modal">
<!-- Modal content -->
  <div class="modal-content">
	<span class="close">×</span>
	<div class="mySlides">
	  <img class="gif" src="" width="100" height="100"  >
	  
	  <h4></h4>
      <p></p>
	 
	
	<div class="mySlides">
	 
	  <h4></h4>
	  <p></p>
	</div>
	<div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div>
    <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div>
  </div>
</div>

Answer 1

当你做这行

var x = document.getElementsByClassName("mySlides");

您计算类名为"mySlides"的所有元素，这是HTML文档中的所有幻灯片。

在按钮单击例程中添加代码以计算相应模式中的幻灯片数量：

在 javascript 的顶部添加以下内容：

var modal = "modalA";
showDivs(slideIndex, modal);

将按钮单击更改为：

$(".button").on("click", function() {
   modal = $(this).data("modal").text();
   $("#" + modal).show();
   document.body.classList.add("modal-open");  
});

修改 showDivs 函数以包含新变量：

  function showDivs(n, modal) {
  var i;
  var x = document.getElementById(modal).getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
       }
 for (i = 0; i < dots.length; i++) {
     /*dots[i].className = dots[i].className.replace(" w3-white", "");*/
  }
  x[slideIndex-1].style.display = "block";  
  /*dots[slideIndex-1].className += " w3-white";*/
}

最后，将按钮的数据模式属性更改为：

<button class="button" data-modal="modalA">
<button class="button" data-modal="modalB">
<button class="button" data-modal="modalC">

您还需要更新以下行：

function plusDivs(n) {
 showDivs(slideIndex += n, modal); 
}
function currentDiv(n) {
  showDivs(slideIndex = n, modal);
}

Answer 2

你也可以选择使用 PipesJS + Modala

<carousel delay="5000" file-order="pic1.png;pic2.gif;pic3.jpg" boxes="4" interval="1" id="carousel-here" insert="carousel-here"></carousel>

是的，

这将创建 3 张图片的轮播，第一张在最后重复，每张"delay='n'"毫秒它都会自动移动。如果您不希望它自动移动，这将很快完成。

在这里拿起它：

管道JS+莫达拉

你可以看到它在 g0d.me 工作 - 管道