title: How to make a modal slider with next and prev buttons navigation on popup
body: <p>Hello so I've been trying to create the next and previous buttons to move the picture when the modal opens up to the next one, I take the pictures like this from WordPress</p>
  <pre><code>&lt;?php
                          if (!empty($data['images'])):
                              foreach ($data['images'] as $img) : ?&gt;
                                  &lt;?php if (!empty($img['image'])) : ?&gt;
                                      &lt;div class=&quot;slide parentSlider&quot;&gt;
                                          &lt;div class=&quot;slider-inner pop parentSlider-cell&quot;&gt;
                                              &lt;?php echo wp_get_attachment_image($img['image'], 'carousel-image', '', ['class' =&gt; 'img-responsive', 'data-track-content' =&gt; '']); ?&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;?php endif; ?&gt;
                              &lt;?php endforeach;
                          endif;
                          ?&gt;
  </code></pre>
  <p>This takes all the pictures I got from WordPress and puts them on a column one after another then I added this to create the modal and show the picture when clicked on a popup with a 100% width</p>
  <pre><code>&lt;div class=&quot;modal fade bd-example-modal-lg&quot; id=&quot;imagemodal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;myModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
                      &lt;div class=&quot;modal-dialog&quot;&gt;
                          &lt;div class=&quot;modal-content&quot;&gt;
                              &lt;div class=&quot;modal-body&quot;&gt;
                              &lt;div id=&quot;demo&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;
  
                              &lt;div class=&quot;carousel-inner&quot;&gt;
                                  &lt;div class=&quot;carousel-item active&quot;&gt;
  &lt;!--                                    &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot;&gt;&lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;&lt;span class=&quot;sr-only&quot;&gt;Close&lt;/span&gt;&lt;/button&gt;--&gt;
                                      &lt;img src=&quot;&quot; class=&quot;imagepreview&quot; id=&quot;modal_image&quot; style=&quot;width: 100%;&quot; &gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                                  &lt;a class=&quot;carousel-control-prev&quot; href=&quot;#demo&quot; data-slide=&quot;prev&quot;&gt;
                                      &lt;span class=&quot;carousel-control-prev-icon&quot;&gt;&amp;#10094;&lt;/span&gt;
                                  &lt;/a&gt;
                                  &lt;a class=&quot;carousel-control-next&quot; href=&quot;#demo&quot; data-slide=&quot;next&quot;&gt;
                                      &lt;span class=&quot;carousel-control-next-icon&quot;&gt;&amp;#10095;&lt;/span&gt;
                                  &lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  <p>Here I'm trying to call the image from the PHP to here through the modal and jQuery</p>
  <pre><code>$('.pop').on('click', function() {
                  //get index for div
                  var idx = $(this).parents('div').index();
                  console.log(idx)
                  var id = parseInt(idx);
                  $('.imagepreview').attr('src', $(this).find('img').attr('src'));
                  $('#imagemodal').modal('show');
                  $(&quot;.carousel-inner&quot;).carousel(id); // slide carousel to selected
      });
  </code></pre>
  <p>And it shows the picture selected in the modal which is great but it doesn't work to move the picture next or previous one, I tried adding lots of other code I got online but nothing was working here ill attach the codes I tried and didn't work maybe I only implemented them wrong and someone here might know how to do it better</p>
  <pre><code>// var modalImg = $(&quot;.imagepreview&quot;);
      // $('.pop').on('click', function() {
      //     $('.imagepreview').attr('src', $(this).find('img').attr('src'));
      //     $('#imagemodal').modal('show');
      //
      // $('.next').on('click',function() {
      //     var curr = $(modalImg).attr('src',$(this).find('img').attr('src'));
      //     var next = $('img[src=&quot;' + curr +'&quot;]').parent('div').next().find('img').attr('src');
      //     modalImg.attr('src', next);
      // });
      // $('.prev').on('click',function() {
      //     var curr = $('modalImg').attr('src',$(this).find('img').attr('src'));
      //     var prev = $('img[src=&quot;' + curr + '&quot;]').parent('div').prev().find('img').attr('src');
      //     modalImg.attr('src', prev);
      // });
      // });
  </code></pre>
  <pre><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
      //     $(&quot;.carousel-inner&quot;).carousel(id); // slide carousel to selected
      // });
  </code></pre>
  <p>Just wanted a simple next and prev button to move the pics around anything simple will do thank you.</p>
  <p>EDIT: For the question in the comments</p>
  <pre><code>&lt;ol class=&quot;carousel-indicators&quot; id=&quot;indicators&quot;&gt;
                                          &lt;li data-target=&quot;#myImg&quot; data-slide-to=&quot;0&quot; id=&quot;indicator&quot;&gt;0&lt;/li&gt;
                                          &lt;li data-target=&quot;#myImg&quot; data-slide-to=&quot;1&quot; id=&quot;indicator&quot;&gt;1&lt;/li&gt;
                                          &lt;li data-target=&quot;#myImg&quot; data-slide-to=&quot;2&quot; id=&quot;indicator&quot;&gt;2&lt;/li&gt;
                                      &lt;/ol&gt;
  </code></pre>
  <pre><code>$(&quot;.carousel-indicators&quot;).on('click', function(){
  
              let dataslide = $(&quot;#indicators&quot;).find(`[data-slide='${id}']`).index(this);
              //let dataslide = $(&quot;#indicators&quot;).find(&quot;data-slide&quot;).index(this); //Used this too but same result
              
              // let dsxid = dataslide.index(); - was testing with this
              // dsid = parseInt(dsxid) - testing
              console.log(dataslide);
              if(id === dataslide){
                  let next_image = $('.imgs').eq(id).find('img').attr('src');
                  $('.imagepreview').attr('src', next_image);
                  $(&quot;.carousel-inner&quot;).carousel(id);
                  $(&quot;.carousel-indicators&quot;).find(&quot;li[data-slide-to=&quot;+id+&quot;]&quot;).addClass(&quot;active&quot;).siblings().removeClass(&quot;active&quot;);
              }
              // console.log(id);
          });
  </code></pre>
  <p>I think I got very close with making the buttons because without the index part it returns an array that shows the button for each image I'm at that time so I wanted to turn it into an index and all it as an id so that I can compare if the id is the same on click and then if not change picture or some logic like that but the index keeps returning -1 i tried to do a .filter and other code but without the id inside the data-slide but it wasn't working</p>