Javascript 单击卡片，在弹出窗口中显示其各自的详细信息，并单击“下一步”和“上一步”按钮

我正在从我的网站上的数据库动态显示卡片滑块，该数据库正在运行。我使用下面的代码为卡滑块

$data = '<div class="main-carousel planSliders mt-5">';
    foreach($plans as $plan){
    $tid = $plan->ID;
    $data.= '<div class="carousel-cell">
             <a href="'.esc_url( get_permalink($tid)).'"><div class="planBg"  style="background-image:linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url('.get_the_post_thumbnail_url($tid).')">
              <div class="planInfo">
                <h4>'.$plan->post_title.'</h4>
                  </div>
                  </div>
             </a> </div>';   
    }
    $data.='</div>';

现在我的问题是，我必须点击卡片，用“上一步”和“下一步”按钮在弹出窗口中显示详细信息

这是一个例子。从现在起，如果您单击

大模式

按钮，它将打开带有滑块的弹出窗口。这只是为了测试。我必须显示弹出一旦点击我的卡

*{
框大小：边框框；
}
身体{
字体系列：无衬线；
}
.parentSlider{
显示：网格；
栅隙：20px；
网格模板列：重复（4，1fr）；
}
.父滑块单元img{
宽度：100%；
}
.模态对话框{
最大宽度：80%；
}

大模态
接近

单击图像时，您可以获得包含该图像的div索引，即：

0,1..etc

然后使用该索引，我们可以使处于相同位置的

旋转木马幻灯片处于活动状态

演示代码：


//单击img时
$（'.parentSlider单元格img'）。单击（函数（）{
//获取div的索引
var idx=$（this.parents（'div'）.index（）；
console.log（idx）
var id=parseInt（idx）；
$（'.bd示例模态lg'）。模态（'show'）；//显示模态
$（“.carousel-inner”）.carousel（id）；//将旋转木马滑动到选定位置
});
*{
框大小：边框框；
}
身体{
字体系列：无衬线；
}
.parentSlider{
显示：网格；
栅隙：20px；
网格模板列：重复（4，1fr）；
}
.父滑块单元img{
宽度：100%；
}
.模态对话框{
最大宽度：80%；
}

大模态
接近
单击图像时，您可以获得包含该图像的div索引，即：
0,1..etc
然后使用该索引，我们可以使处于相同位置的
旋转木马幻灯片处于活动状态

演示代码：


//单击img时
$（'.parentSlider单元格img'）。单击（函数（）{
//获取div的索引
var idx=$（this.parents（'div'）.index（）；
console.log（idx）
var id=parseInt（idx）；
$（'.bd示例模态lg'）。模态（'show'）；//显示模态
$（“.carousel-inner”）.carousel（id）；//将旋转木马滑动到选定位置
});
*{
框大小：边框框；
}
身体{
字体系列：无衬线；
}
.parentSlider{
显示：网格；
栅隙：20px；
网格模板列：重复（4，1fr）；
}
.父滑块单元img{
宽度：100%；
}
.模态对话框{
最大宽度：80%；
}

大模态
接近
创建演示代码可能有助于解决您的问题。但这是逻辑部分，我相信php代码不会在代码段中工作。您可以从浏览器的
元素选项卡添加html生成的代码，并从中创建运行代码。@Swati，让我尝试add@Swati,我更新了问题中的示例代码。创建演示代码可能有助于解决您的问题。但这是逻辑部分，我相信php代码不会在代码段中工作。您可以从浏览器的
元素选项卡
添加html生成的代码，并从中创建运行代码。@Swati，让我尝试add@Swati,我更新了问题中的示例代码。您的代码在代码段中工作，我只是想知道，如果我使用图像标签的背景图像，那么我必须使用什么脚本？我的意思是test.com/wp content/uploads/2020/08/1.jpg）“>我在这一行中得到了问题var idx=$（this.parents（'div'）.index（）；如果我使用background图像，只需更改选择器，即：
$（'.parentSlider cell.bannerBg'）。单击（function（）{
确保div位于
parentSlider单元格下
。如果仍然不起作用，请告诉我。var idx=$（this）。parents（'div'）。index（）；未计算索引号test.com/wp content/uploads/2020/08/1.jpg）”>你的代码在代码段中工作，我只是想知道，如果我使用图像标签的背景图像，那么我必须使用什么脚本？我的意思是test.com/wp content/uploads/2020/08/1.jpg）“>我在这一行中遇到了问题var idx=$（this.parents（'div'）.index（）；如果我使用背景图像，只需更改选择器即可：
$（'.parentSlider cell.bannerBg'）。单击（function（）{
确保div位于
parentSlider cell
下。如果仍然不起作用，请告诉我。var idx=$（this）。parents（'div'）.index（）；未计算索引号test.com/wp content/uploads/2020/08/1.jpg）“>
  --------------------------------------
< | card 1  | card 2 | card 3 | card 4 | > many more
  |         |        |        |        |  
  --------------------------------------

  $data.='<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Test button</button>
<div class="planPopup modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
       
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
   <button type="button" class="close closePopup" data-dismiss="modal">&times;</button>
      <div id="planOpenPopup" class="carousel slide" data-ride="carousel">
  <!-- The slideshow -->
  <div class="carousel-inner">';

  $i=1;
  foreach($plans as $plan){
    $item_class = ($i == 1) ? 'carousel-item active' : 'carousel-item'; 
    $tid = $plan->ID;
      $data.='<div class="'.$item_class.'">
      <div class="planPopupWrapper">
        <div class="planPopupBG"  style="background-image:linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url('.get_the_post_thumbnail_url($tid).')">
        </div> <div class="planPopupContent"><h4>'.$plan->post_title.'</h4><p>'.$plan->post_content.'</p></div></div></div>';
        $i++;
    }


  $data.='</div>
  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#planOpenPopup" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#planpenPopup" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>
    </div>
    
  </div>
</div>
</div>';