引导轮播下放到页面下方

时间:2019-07-09 19:07:52

标签: twitter-bootstrap carousel indicator

我已将引导程序转盘指示器编码为位于转盘下面,但是由于某种原因,当转盘移至下一张幻灯片时,它会下降到远低于其应移回正确位置之前的位置。

<div class="container-fluid">

        <div id="carouselShowcase" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <div class="row">
                <div class="col-lg-8 col-md-8 carouselCentered">
                        <img class="projectThumbnail" src="images/proExmpl_1_.jpg"  alt="exmpl1">
                    </div>
                  <div class="col-lg-4 col-md-4">
                    <a href="http://reachtheworld.org/" target="_blank">
                    <div><h3>Video</h3></div>
                    </a>
                <p>
                    GeoGames - A fabulously fun Flash game that lets you drag-and-drop geographic features onto the Planet Earth. You can rotate your planet, test your geography skills, build a map and print a copy when you are done! There’s a timer, so you can track your scores.
                </p></div>



                    </div>
            </div>
            <div class="carousel-item">
             <div class="row">
                    <div class="col-lg-8 col-md-8">
                        <img class="projectThumbnail" src="images/proExmpl_2_.jpg"  alt="exmpl1">

                    </div>
                 <div class="col-lg-4 col-md-4">
                    <a href="#" target="_blank">
                     <div><h3>Video</h3></div>
                     </a>
                        <p>
                            This YouTube Video was produced to promote Active Properties real estate brokerage firm's brand in Boulder, CO. The video was promoted heavily on Facebook.
                        </p>
                </div>

            </div>
            </div>
            <div class="carousel-item">
              <div class="row">
            <div class="col-lg-8 col-md-8 carouselCentered">
                        <img class="projectThumbnail" src="images/proExmpl_3_.jpg"  alt="exmpl1">


                    </div>
                  <div class="col-lg-4 col-md-4">
                <a href="https://www.livingwellstores.com/?SID=kp42t0vku81r59vrfn1j3rbtq4" target="_blank">
                    <div><h3>Video</h3></div>
                </a>
                <p>
                    This Promotional Video was produced to promote VidaCura's business development aimed at disabled travelers headed to Orlando. The video was promoted heavily on Facebook.
                </p>
            </div>  

        </div>
            </div>
             <div class="carousel-item">
              <div class="row">
                <div class="col-lg-8 col-md-8 carouselCentered">
                        <img class="projectThumbnail" src="images/proExmpl_4_.jpg"  alt="exmpl1">
                    </div>
                  <div class="col-lg-4 col-md-4">
                    <a href="https://youngmindinteractive.com/" target="_blank">
                        <div><h3>Video</h3></div>
                    </a>
                    <p>
                        KICKSTARTER VIDEO - An educational game designed for mobile devices that teaches kids about the solar   system. Video produced to help client promote KickStarter Campaign.
                    </p>
                </div>


        </div>
            </div>
              <div class="carousel-item">
              <div class="row">
            <div class="col-lg-8 col-md-8 carouselCentered">
                        <img class="projectThumbnail" src="images/proExmpl_5_.jpg"  alt="exmpl1">


                    </div>
                  <div class="col-lg-4 col-md-4">
                <a href="https://www.livingwellstores.com/?SID=kp42t0vku81r59vrfn1j3rbtq4" target="_blank">
                    <div><h3>Video</h3></div>
                </a>
                <p>
                    This Promotional Video was produced to promote VidaCura's business development aimed at disabled travelers headed to Orlando. The video was promoted heavily on Facebook.
                </p>
            </div>  

        </div>
            </div>
              <div class="carousel-item">
              <div class="row">
            <div class="col-lg-8 col-md-8 carouselCentered">
                        <img class="projectThumbnail" src="images/proExmpl_6_.jpg"  alt="exmpl1">


                    </div>
                  <div class="col-lg-4 col-md-4">
                <a href="https://www.livingwellstores.com/?SID=kp42t0vku81r59vrfn1j3rbtq4" target="_blank">
                    <div><h3>Video</h3></div>
                </a>
                <p>
                    This Promotional Video was produced to promote VidaCura's business development aimed at disabled travelers headed to Orlando. The video was promoted heavily on Facebook.
                </p>
            </div>  

        </div>
            </div>
              <div class="carousel-item">
              <div class="row">
            <div class="col-lg-8 col-md-8 carouselCentered">
                        <img class="projectThumbnail" src="images/proExmpl_7_.jpg"  alt="exmpl1">


                    </div>
                  <div class="col-lg-4 col-md-4">
                <a href="https://www.livingwellstores.com/?SID=kp42t0vku81r59vrfn1j3rbtq4" target="_blank">
                    <div><h3>Video</h3></div>
                </a>
                <p>
                    This Promotional Video was produced to promote VidaCura's business development aimed at disabled travelers headed to Orlando. The video was promoted heavily on Facebook.
                </p>
            </div>  

        </div>
            </div>
              <div class="carousel-item">
              <div class="row">
            <div class="col-lg-8 col-md-8 carouselCentered">
                        <img class="projectThumbnail" src="images/proExmpl_8_.jpg"  alt="exmpl1">


                    </div>
                  <div class="col-lg-4 col-md-4">
                <a href="https://www.livingwellstores.com/?SID=kp42t0vku81r59vrfn1j3rbtq4" target="_blank">
                    <div><h3>Video</h3></div>
                </a>
                <p>
                    This Promotional Video was produced to promote VidaCura's business development aimed at disabled travelers headed to Orlando. The video was promoted heavily on Facebook.
                </p>
            </div>  

        </div>
            </div>
              <div class="carousel-item">
              <div class="row">
            <div class="col-lg-8 col-md-8 carouselCentered">
                        <img class="projectThumbnail" src="images/proExmpl_9_.jpg"  alt="exmpl1">


                    </div>
                  <div class="col-lg-4 col-md-4">
                <a href="https://www.livingwellstores.com/?SID=kp42t0vku81r59vrfn1j3rbtq4" target="_blank">
                    <div><h3>Video</h3></div>
                </a>
                <p>
                    This Promotional Video was produced to promote VidaCura's business development aimed at disabled travelers headed to Orlando. The video was promoted heavily on Facebook.
                </p>
            </div>  

        </div>
            </div>
              <div class="carousel-item">
              <div class="row">
            <div class="col-lg-8 col-md-8 carouselCentered">
                        <img class="projectThumbnail" src="images/proExmpl_10_.jpg"  alt="exmpl1">


                    </div>
                  <div class="col-lg-4 col-md-4">
                <a href="https://www.livingwellstores.com/?SID=kp42t0vku81r59vrfn1j3rbtq4" target="_blank">
                    <div><h3>Video</h3></div>
                </a>
                <p>
                    This Promotional Video was produced to promote VidaCura's business development aimed at disabled travelers headed to Orlando. The video was promoted heavily on Facebook.
                </p>
            </div>  

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

            <ol class="carousel-indicators carousel slide">
            <li data-target="#carouselShowcase" data-slide-to="0" class="active"></li>
            <li data-target="#carouselShowcase" data-slide-to="1"></li>
            <li data-target="#carouselShowcase" data-slide-to="2"></li>
            <li data-target="#carouselShowcase" data-slide-to="3"></li>
            <li data-target="#carouselShowcase" data-slide-to="4"></li>
            <li data-target="#carouselShowcase" data-slide-to="5"></li>
            <li data-target="#carouselShowcase" data-slide-to="6"></li>
            <li data-target="#carouselShowcase" data-slide-to="7"></li>
            <li data-target="#carouselShowcase" data-slide-to="8"></li>
            <li data-target="#carouselShowcase" data-slide-to="9"></li>
            </ol>
        </div>

</div>

0 个答案:

没有答案