Question

所以我正在使用bootstrap框架实现多个图像轮播进入我的网站，并且遇到了实现轮播类的问题。我知道这个问题与现有的轮播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%;
}


}

Answer 1

 <!-- 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>

它来自哪里。它也在这里使用：

 <!-- 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>

每个轮播都需要一个唯一的ID，而控件需要更新ID才能匹配。

bootstrap carousel ID和类问题

1 个答案: