【发布时间】：2014-12-30 11:09:35
【问题描述】：
所以我正在使用引导框架在我的网站中实现多个图像轮播，并且在实现轮播类时遇到问题。我知道这个问题与现有的轮播 ID 有关，它不是我可以多次重复使用的类元素，但我似乎无法找到该 ID 的来源来重新命名它/创建一个类而不是一个 ID，这样我就可以多次使用这个轮播。我能够为轮播创建子类样式，但不知道如何重命名或重新创建#carousel-example-generic ID，因此我可以多次使用轮播框架。也许我只是忽略了一些简单的事情......？
非常感谢您的任何帮助或指导！
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Dan Druffel Inc. - Cincinnati Landscaping</title>
<!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/freelancer.css" rel="stylesheet">
<link href="css/simple-sidebar.css" rel="stylesheet">
<link href="css/jquery-mobile.css" rel="stylesheet">
<!-- Just include this Css file -->
<link rel="stylesheet" href="css/jquery.carousel.fullscreen.css" />
<!-- Custom Fonts -->
<link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://arrow.scrolltotop.com/arrow13.js"></script>
<noscript>Not seeing a <a href="http://www.scrolltotop.com/">Scroll to Top Button</a>? Go to our FAQ page for more info.</noscript>
</head>
<!-- Portfolio Modals -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<!-- This is a typical Twitter Bootstrap Carousel -->
<!-- Carousel -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
<li data-target="#carousel-example-generic" data-slide-to="5"></li>
<li data-target="#carousel-example-generic" data-slide-to="6"></li>
<li data-target="#carousel-example-generic" data-slide-to="7"></li>
<li data-target="#carousel-example-generic" data-slide-to="8"></li>
<li data-target="#carousel-example-generic" data-slide-to="9"></li>
<li data-target="#carousel-example-generic" data-slide-to="10"></li>
<li data-target="#carousel-example-generic" data-slide-to="11"></li>
<li data-target="#carousel-example-generic" data-slide-to="12"></li>
<li data-target="#carousel-example-generic" data-slide-to="13"></li>
</ol>
<!-- Wrapper for slides -->
<h1>Wood REsidence</h1>
<center><div class="carousel-inner">
<div class="item active">
<img src="./img/project-pics/featured_projects/Wood/Wood_img21-smaller.jpg" alt="" />
<div class="container">
<div class="carousel-caption">
<p class="lead">Just turns the Twitter Bootstrap Carousel in fullscreen mode, and scale to fit the screen resolution</p>
</div>
</div>
</div>
<div class="item">
<img src="./img/project-pics/featured_projects/Wood/Wood_before-after.jpg" alt="" />
<div class="container">
<div class="carousel-caption">
<p class="lead">Just turns the Twitter Bootstrap Carousel in fullscreen mode, and scale to fit the screen resolution</p>
</div>
</div>
</div>
<div class="item">
<img src="./img/project-pics/featured_projects/Wood/Wood_img5-1.jpg" alt="" />
<div class="container">
<div class="carousel-caption">
<p class="lead">Just turns the Twitter Bootstrap Carousel in fullscreen mode, and scale to fit the screen resolution</p>
</div>
</div>
</div>
<div class="item">
<img src="./img/project-pics/featured_projects/Wood/Wood_img19-1.jpg" alt="" />
<div class="container">
<div class="carousel-caption">
<p class="lead">Spa at dusk...</p>
</div>
</div>
</div>
<div class="item">
<img src="./img/project-pics/featured_projects/Wood/Wood_img7-before-1.jpg" alt="" />
<div class="container">
<div class="carousel-caption">
<p class="lead">Retaining Wall - BEFORE</p>
</div>
</div>
</div>
<div class="item">
<img src="./img/project-pics/featured_projects/Wood/Wood_img8-1.jpg" alt="" />
<div class="container">
<div class="carousel-caption">
<p class="lead">Retaining Wall - AFTER</p>
</div>
</div>
</div>
<div class="item">
<img src="./img/project-pics/featured_projects/Wood/Wood_img14-construction-1.jpg" alt="" />
<div class="container">
<div class="carousel-caption">
<p class="lead">Retaining Wall - AFTER</p>
</div>
</div>
</div>
<div class="item">
<img src="./img/project-pics/featured_projects/Wood/Wood_img24-construction-1.jpg" alt="" />
<div class="container">
<div class="carousel-caption">
<p class="lead">Retaining Wall - AFTER</p>
</div>
</div>
</div>
<div class="item">
<img src="./img/project-pics/featured_projects/Wood/Wood_img3-1.jpg" alt="" />
<div class="container">
<div class="carousel-caption">
<p class="lead">Retaining Wall - AFTER</p>
</div>
</div>
</div>
<div class="item">
<img src="./img/project-pics/featured_projects/Wood/Wood_img27-1.jpg" alt="" />
<div class="container">
<div class="carousel-caption">
<p class="lead">Retaining Wall - AFTER</p>
</div>
</div>
</div>
<div class="item">
<img src="./img/project-pics/featured_projects/Wood/Wood_img20-1.jpg" alt="" />
<div class="container">
<div class="carousel-caption">
<p class="lead">Retaining Wall - AFTER</p>
</div>
</div>
</div>
<div class="item">
<img src="./img/project-pics/featured_projects/Wood/Wood_img23-1.jpg" alt="" />
<div class="container">
<div class="carousel-caption">
<p class="lead">Retaining Wall - AFTER</p>
</div>
</div>
</div>
<div class="item">
<img src="./img/project-pics/featured_projects/Wood/Wood_img11-1.jpg" alt="" />
<div class="container">
<div class="carousel-caption">
<p class="lead">Retaining Wall - AFTER</p>
</div>
</div>
</div>
<div class="item">
<img src="./img/project-pics/featured_projects/Wood/Wood_img22-1.jpg" alt="" />
<div class="container">
<div class="carousel-caption">
<p class="lead">Retaining Wall - AFTER</p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
/* ------------------ MY Custom Carousel CSS ---------------------- */
@media (max-width: 960px) {
body {
margin: 0;
padding: 0;
}
}
h1 {
color:#003300;
}
.carousel {
padding:5%;
position:none;
}
.carousel-inner {
margin-top:2%;
width:900px;
}
.item {
height: 650px;
width: 900px;
}
.carousel-caption {
position: absolute;
left: 15%;
right: 15%;
bottom: 20px;
z-index: 10;
margin-top: 50%;
padding-bottom: 20px;
color: #ffffff;
text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
p {
color:#c0c0c0;
}
/* ------------------ tablet/medium screen CSS ---------------------- */
@media (min-width: 601px) and (max-width: 959px) {
.carousel-inner {
margin-top:40%;
}
p {
color:#ffffff;
}
.carousel-inner {
margin-top:2%;
width:100%;
}
.item {
height: 650px;
width: 100%;
}
.carousel-caption {
position: absolute;
left: 15%;
right: 15%;
bottom: 20px;
z-index: 10;
margin-top: 50%;
padding-bottom: 20px;
color: #ffffff;
text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
}
/* ------------------ phone/small screen CSS ---------------------- */
@media (min-width: 300px) and (max-width: 600px) {
h1 {
padding-top:20%;
}
p {
color:#ffffff;
}
.carousel-caption {
position: absolute;
left: 15%;
right: 15%;
bottom: 20px;
z-index: 10;
margin-top: 0%;
padding-bottom: 100%;
color: #ffffff;
text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.carousel-inner {
margin-top:10%;
width:100%;
height:auto;
}
.item {
height: 700px;
width: 100%;
}
}
【问题讨论】：
标签： jquery css twitter-bootstrap carousel