滑块放置在模态窗口内有问题。 我已经在每个不同的模态体中放置了图像，在模态体中我为滑块设置了代码，但它不起作用。如何正确应用模态窗口的滑块？这是我到目前为止所尝试的。
<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>×</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>×</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>
答案 0 :(得分：1)
有一些事情要添加到你的标记中以使球滚动。
1。将目标添加到锚点中的href以切换模态
Change:
<a href="#" data-toggle="modal"></a>
To:
<a href="#myModal" data-toggle="modal"></a>
2。将步骤 1 中的id添加到您要切换的模式
Change:
<div class="modal fade" aria-labelledby="myModalLabel">
To:
<div id="myModal" class="modal fade" aria-labelledby="myModalLabel">
3。在最后carousel-inner之后关闭item。在当前标记中，prev / next控件位于此div内，需要将其拉出。
以下是包含这些更改的代码段。我只对您的html中的某个模态应用了更改，但您可以对页面中可能包含的任何其他模态应用相同的更改。
<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>×</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>
<强>更新
使用多个图像和多个模态
<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>