mahetaban
چهارشنبه 08 مهر 1394, 22:15 عصر
سلام من یک سایت را با استفاده از تکنولوژی Bootstrap در ASP.NET طراحی می کنم. می خواهم یک اسلایدشو به صفحه خودم اضافه کنم. این اسلایدشو زمانی که در یک صفحه به تنهایی قرار می گیرد درست اجرا می شود ولی زمانی که آن را در میان کدهای خود در صفحه اصلی قرار می دهم تصاویر نمایش داده نمی شوند. نمونه کد را برای شما می گذارم لطفاً به من کمک کنید.
<head runat="server">
<title>slideshow</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/Admin_Panel/Master/css/bootstrap.min.css" />
<script src="/Admin_Panel/Master/js/jquery.min.js"></script>
<script src="/Admin_Panel/Master/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa"></i>
<div class="pull-right">
</div>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="Admin_Panel/Image/img_chania.jpg" alt="Chania" width="460" height="345" />
</div>
<div class="item">
<img src="Admin_Panel/Image/img_chania2.jpg" alt="Chania" width="460" height="345" />
</div>
<div class="item">
<img src="Admin_Panel/Image/img_flower.jpg" alt="Flower" width="460" height="345" />
</div>
<div class="item">
<img src="Admin_Panel/Image/img_flower2.jpg" alt="Flower" width="460" height="345" />
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
</a>
</div>
</div>
</div>
<!-- /.panel-body -->
</div>
<body/>
<head runat="server">
<title>slideshow</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/Admin_Panel/Master/css/bootstrap.min.css" />
<script src="/Admin_Panel/Master/js/jquery.min.js"></script>
<script src="/Admin_Panel/Master/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa"></i>
<div class="pull-right">
</div>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="Admin_Panel/Image/img_chania.jpg" alt="Chania" width="460" height="345" />
</div>
<div class="item">
<img src="Admin_Panel/Image/img_chania2.jpg" alt="Chania" width="460" height="345" />
</div>
<div class="item">
<img src="Admin_Panel/Image/img_flower.jpg" alt="Flower" width="460" height="345" />
</div>
<div class="item">
<img src="Admin_Panel/Image/img_flower2.jpg" alt="Flower" width="460" height="345" />
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
</a>
</div>
</div>
</div>
<!-- /.panel-body -->
</div>
<body/>