How to make work modal widnow and slider

Question

I have problem with slider which is placed inside the modal window. I have placed images in each different modal-body, in modal body i put code for slider but it's not working. How correctly to apply slider for modal window? This is what i tried so far.

<div class="col-md-4 col-sm-6">
    <a href="#" data-toggle="modal" ><img src="images/portfolio/portfolio_1.png"></a>

    <div class="modal fade" aria-labelledby="myModalLabel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Title</h4>
                </div>
                <div class="modal-body">
                    <div id="my-slider" class="carousel slide">
                        <div class="carousel-inner">
                            <div class="item active">

                                <img src="images/portfolio/portfolio_1.png">
                                <a class="left carousel-control" href="#my-slider" role="button" data-slide="prev">
                                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="right carousel-control" href="#my-slider" role="button" data-slide="next">
                                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

    <div class="col-md-4 col-sm-6">
    <a href="#" data-toggle="modal" ><img src="images/portfolio/portfolio_1.png"></a>

    <div class="modal fade" aria-labelledby="myModalLabel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Title</h4>
                </div>
                <div class="modal-body">
                    <div id="my-slider" class="carousel slide" data-interval="false">
                        <div class="carousel-inner">
                            <div class="item active">

                                <img src="images/portfolio/portfolio_1.png">
                                <a class="left carousel-control" href="#my-slider" role="button" data-slide="prev">
                                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="right carousel-control" href="#my-slider" role="button" data-slide="next">
                                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

Answer 1

There are a few things to add to your markup to get the ball rolling.

1. Add a target to the href in the anchors in order to toggle the modal

    Change: 
     <a href="#" data-toggle="modal"></a>
    To:
     <a href="#myModal" data-toggle="modal"></a>  

2. Add id from step 1 to the modal you want to toggle

    Change: 
     <div class="modal fade" aria-labelledby="myModalLabel">
    To:
     <div id="myModal" class="modal fade" aria-labelledby="myModalLabel"> 

3. Close the carousel-inner right after the last item. In the current markup, the prev/next controls are inside this div and they need to be pulled out.

Below is a code snippet with these changes. I've only applied the changes to one of the modals from your html, but you can apply the same changes to any other modals that you might have in your page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-md-4 col-sm-6">
  <a href="#myModal" data-toggle="modal"><img src="images/portfolio/portfolio_1.png" alt="Open Modal"></a>

  <div id="myModal" class="modal fade" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Title</h4>
        </div>
        <div class="modal-body">
          <div id="my-slider" class="carousel slide" data-interval="false">
            <div class="carousel-inner">
              <div class="item active">
                <img src="http://via.placeholder.com/500x200">
              </div>
              <div class="item">
                <img src="http://via.placeholder.com/500x200">
              </div>
            </div>
            <a class="left carousel-control" href="#my-slider" role="button" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#my-slider" role="button" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

UPDATE
Using multiple images and multiple modals

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="portfolio-layout">
  <div class="portfolio-wrap carousel slide" data-ride="carousel">
    <div class="container">
      <div class="row">
        <div id="portfolio_grid">


          <div class="mix col-md-4 col-sm-6 office">

            <a href="#myModal1" data-toggle="modal"><img src="images/portfolio/portfolio_1.png" alt="Open Modal"></a>

            <div id="myModal1" class="modal fade" aria-labelledby="myModalLabel">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>×</span></button>
                    <h4 class="modal-title" id="myModalLabel1">Title</h4>
                  </div>
                  <div class="modal-body">
                    <div id="my-slider1" class="carousel slide" data-interval="false">
                      <div class="carousel-inner">
                        <div class="item active">
                          <img src="http://via.placeholder.com/500x150/ffcccc">
                        </div>
                        <div class="item ">
                          <img src="http://via.placeholder.com/500x150/ccffcc">
                        </div>
                      </div>
                      <a class="left carousel-control" href="#my-slider1" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                      </a>
                      <a class="right carousel-control" href="#my-slider1" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>



          <div class="mix col-md-4 col-sm-6 office">

            <a href="#myModal2" data-toggle="modal"><img src="images/portfolio/portfolio_2.png" alt="Open Modal"></a>

            <div id="myModal2" class="modal fade" aria-labelledby="myModalLabel">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>×</span></button>
                    <h4 class="modal-title" id="myModalLabel2">Title</h4>
                  </div>
                  <div class="modal-body">
                    <div id="my-slider2" class="carousel slide" data-interval="false">
                      <div class="carousel-inner">
                        <div class="item active">
                          <img src="http://via.placeholder.com/500x150/ccccff">
                        </div>
                        <div class="item ">
                          <img src="http://via.placeholder.com/500x150/ff2233">
                        </div>
                      </div>
                      <a class="left carousel-control" href="#my-slider2" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                      </a>
                      <a class="right carousel-control" href="#my-slider2" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>



          <div class="mix col-md-4 col-sm-6 office">
            <a href="#myModal3" data-toggle="modal"><img src="images/portfolio/portfolio_3.png" alt="Open Modal"></a>

            <div id="myModal3" class="modal fade" aria-labelledby="myModalLabel">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>×</span></button>
                    <h4 class="modal-title" id="myModalLabel3">Title</h4>
                  </div>
                  <div class="modal-body">
                    <div id="my-slider3" class="carousel slide" data-interval="false">
                      <div class="carousel-inner">
                        <div class="item active">
                          <img src="http://via.placeholder.com/500x150/556677">
                        </div>
                        <div class="item ">
                          <img src="http://via.placeholder.com/500x150/55ffaa">
                        </div>
                      </div>
                      <a class="left carousel-control" href="#my-slider3" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                      </a>
                      <a class="right carousel-control" href="#my-slider3" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>