单击卡片以在带有下一个和上一个按钮的弹出窗口上显示其各自的详细信息

Question

I am displaying the card slider dynamically from the database on my website which is working. I am using the below code for the card slider.

$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>';

The output of the above code is,

  --------------------------------------
< | card 1  | card 2 | card 3 | card 4 | > many more
  |         |        |        |        |  
  --------------------------------------

Now What I am doing is, When the user clicks on any card then the popup will open with there respective details along with the previous and next button.

For the popup, I am using a bootstrap 4 modal code and added the bootstrap carousel slider code so that I can check the next and previous card details.

I added one button called Test button for testing purposes to check that I am getting my modal with all the slider data. Yes, and it's working.

  $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>';

Now My issue is, I have to click on the card to show the details on the popup with the previous and next button?

This is an example. As of now if you click on the Large modal button then it will open the popup with slider. This is just for testing. I have to show the popup once click on my card.

 * { box-sizing: border-box; } body { font-family: sans-serif; }.parentSlider { display: grid; grid-gap: 20px; grid-template-columns: repeat(4, 1fr); }.parentSlider-cell img { width: 100%; }.modal-dialog { max-width: 80%; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <div class="parentSlider"> <div class="parentSlider-cell"> <a href="javascript:void(0);"><img src="//placehold.it/450x280?text=Image 1" /></a> </div> <div class="parentSlider-cell"> <a href="javascript:void(0);"><img src="//placehold.it/450x280?text=Image 2" /></a> </div> <div class="parentSlider-cell"> <a href="javascript:void(0);"><img src="//placehold.it/450x280?text=Image 3" /></a> </div> <div class="parentSlider-cell"> <a href="javascript:void(0);"><img src="//placehold.it/450x280?text=Image 4" /></a> </div> </div> <button type="button" class="btn btn-primary mt-5" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button> <div class="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"> <div id="demo" class="carousel slide" data-ride="carousel"> <:-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="http.//placehold:it/1200x600/555/000&text=One" alt="Los Angeles"> </div> <div class="carousel-item"> <img src="http.//placehold:it/1200x600/fffccc/000&text=Two" alt="Chicago"> </div> <div class="carousel-item"> <img src="http.//placehold:it/1200x600/fcf00c/000&text=Three" alt="New York"> </div> <div class="carousel-item"> <img src="http.//placehold:it/1200x600/fcf00c/000&text=Four" alt="test"> </div> </div> <.-- Left and right controls --> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery:min.js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

Would you help me out with this?

Answer 1

When an image is clicked you can get the div index which has that image ie: 0,1..etc then using this index we can make the carousel slide active which is in that same position.

Demo Code :

 //when img is clicked $('.parentSlider-cell img').click(function() { //get index for div var idx = $(this).parents('div').index(); console.log(idx) var id = parseInt(idx); $('.bd-example-modal-lg').modal('show'); // show the modal $(".carousel-inner").carousel(id); // slide carousel to selected });

 * { box-sizing: border-box; } body { font-family: sans-serif; }.parentSlider { display: grid; grid-gap: 20px; grid-template-columns: repeat(4, 1fr); }.parentSlider-cell img { width: 100%; }.modal-dialog { max-width: 80%; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <div class="parentSlider"> <div class="parentSlider-cell"> <a href="javascript:void(0);"><img src="http://placehold.it/1200x600/555/000&text=One" /></a> </div> <div class="parentSlider-cell"> <a href="javascript:void(0);"><img src="http://placehold.it/1200x600/555/000&text=two" /></a> </div> <div class="parentSlider-cell"> <a href="javascript:void(0);"><img src="http://placehold.it/1200x600/fcf00c/000&text=Three" /></a> </div> <div class="parentSlider-cell"> <a href="javascript:void(0);"><img src="http://placehold.it/1200x600/fcf00c/000&text=Four" /></a> </div> </div> <button type="button" class="btn btn-primary mt-5" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button> <div class="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"> <div id="demo" class="carousel slide" data-ride="carousel"> <:-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="http.//placehold:it/1200x600/555/000&text=One" alt="Los Angeles"> </div> <div class="carousel-item"> <img src="http.//placehold:it/1200x600/fffccc/000&text=Two" alt="Chicago"> </div> <div class="carousel-item"> <img src="http.//placehold:it/1200x600/fcf00c/000&text=Three" alt="New York"> </div> <div class="carousel-item"> <img src="http.//placehold:it/1200x600/fcf00c/000&text=Four" alt="test"> </div> </div> <.-- Left and right controls --> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery:min.js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>