Bootstrap Carousel无法正常工作

里卡多·阿劳霍(Ricardo Araujo)

这次是我的轮播给我带来麻烦。这应该是正常的,但我不知道为什么它不起作用。我在以下网站上看到了这一点:http : //parkhurstdesign.com/improved-carousels-twitter-bootstrap/

这是我的codeply链接:http : //www.codeply.com/go/YPBXy1HmC8,这是我的html / css代码:

    <!-- Wrap all page content here -->
<div id="wrap">

  <!-- Fixed navbar -->
  <div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Sugoi!</a>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="Anime"><a href="#Anime">Anime</a></li>
          <li class="Manga"><a href="#manga">Manga</a></li>
          <li class="Jogos"><a href="#Jogos">Jogos</a></li>
          <li class="Opiniao"><a href="#Opiniao">Opinião</a></li>
          <li class="Outros">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Outros <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">AMV</a></li>
              <li><a href="#">Cosplay</a></li>
              <li><a href="#">Passatempos</a></li>
            </ul>
        </li></ul>
            <ul class="pull-right nav navbar-nav">
          <li><a href="#about">Sobre</a></li>
          <li><a href="#contact">Contacto</a></li>
        </ul>
      </div>
    </div>
  </div>



  <!-- Begin page content -->
  <div class="container">
    <div class="page-header">
      <h1>Sugoi!</h1>
    </div>
    <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">
         <div style="background:url(http://imageslgmr.lazygamer.netdna-cdn.com/2014/11/Naruto.jpg) center center; 
          background-size:cover;" class="slider-size">
        <div class="carousel-caption">
            <a href="anime_1.com"><h3>Anime_1</h3>
            <p>Narutonaruto</p></a>
        </div>
    </div>

    <div class="item">
        <div style="background:url(http://images.akamai.steamusercontent.com/ugc/39731145643729554/AA0DFB3DDC16C2D344721953B646A8279AEBBA76/) center center; 
          background-size:cover;" class="slider-size">
        <div class="carousel-caption">
            <a href="Anime_2.com"><h3>Anime_2</h3>
            <p>Jojo</p></a>
      </div>
    </div>

    <div class="item">
        <div style="background:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTSwP_YYK55JaX9g7R9pZqVertNoGNwpxCTDBpZhGiOcvTTa_Af) center center; 
          background-size:cover;" class="slider-size">
            <div class="carousel-caption">
                <a href="Anime_3.com"><h3>Anime_3</h3>
                <p>One OUTS ONEOUTS</p></a>
        </div>
    </div>

    <div class="item">
        <div style="background:url(http://images7.alphacoders.com/302/302762.jpg) center center; 
          background-size:cover;" class="slider-size">
            <div class="carousel-caption">
                <a href="Anime_4.com"><h3>Anime_4</h3>
                <p>P3P3P3P3P3</p></a>
            </div>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>


    <!-- Content-->
    <div class="container">
    <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
    <p>TESTESTSTESTSTSTSTESTSET</p>
    <p>jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkmae jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkmajafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma jafhjaekfjeankjfebajfnkeajnandnaunf eafnbuaenfka nf ankv anm fakf aov ma vkja nv adjk vkmsd knv sj kma voa vkma</p>
    <p class="lead">...</p>
    <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    </div>

    <!--Footer-->
 <div id="footer">
  <div class="container">
    <p class="text-muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
  </div>
</div>
</div>

的CSS

/* Sticky footer styles
-------------------------------------------------- */

html,
body {
  height: 100%;
  overflow: auto;
  /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}

/* Set the fixed height of the footer here */
#footer {
  height: 60px;
  background-color: #f5f5f5;
}


/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

#wrap > .container {
  padding: 60px 15px 0;
}
.container .credit {
  margin: 20px 0;
}

#footer > .container {
  padding-left: 15px;
  padding-right: 15px;
}

code {
  font-size: 80%;
}

.slider-size {
height: 400px; /* This is your slider height */
}
.carousel {
width:100%; 
margin:0 auto; /* center your carousel if other than 100% */ 
}
列夫

您在其中缺少一些结束</div>标记<div class="carousel-inner" role="listbox">

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Bootstrap Carousel模板无法正常工作

来自分类Dev

Bootstrap Carousel无法正常工作,需要JavaScript代码吗?

来自分类Dev

不能让Twitter Bootstrap Carousel正常工作

来自分类Dev

Bootstrap Carousel无法正常工作,并且不会干扰其他jquery。这是为什么?

来自分类Dev

Bootstrap Markdown无法正常工作

来自分类Dev

Bootstrap Popover无法正常工作

来自分类Dev

Bootstrap ScrollSpy无法正常工作

来自分类Dev

Bootstrap MaxCDN无法正常工作?

来自分类Dev

Bootstrap网格无法正常工作

来自分类Dev

Bootstrap 网格无法正常工作

来自分类Dev

Bootstrap Scrollspy无法正常工作,无法滚动

来自分类Dev

Bootstrap Navbar崩溃无法正常工作

来自分类Dev

Bootstrap DateTime Picker插件无法正常工作?

来自分类Dev

Rails Bootstrap .span无法正常工作

来自分类Dev

Bootstrap 3.2.0 Glyphicons无法正常工作

来自分类Dev

Bootstrap搜索栏过渡无法正常工作

来自分类Dev

Bootstrap-slider.js无法正常工作

来自分类Dev

Bootstrap面板内容无法正常工作

来自分类Dev

Bootstrap 3 DatePicker无法正常工作

来自分类Dev

Bootstrap .form-horizontal无法正常工作

来自分类Dev

ui-bootstrap Datepicker无法正常工作

来自分类Dev

“移动” Bootstrap-Navbar无法正常工作

来自分类Dev

Bootstrap-Tour独立无法正常工作

来自分类Dev

Bootstrap Popover Datepicker无法正常工作

来自分类Dev

Tab上的Bootstrap Fade无法正常工作

来自分类Dev

Twitter Bootstrap灯箱无法正常工作

来自分类Dev

内联表单Bootstrap无法正常工作

来自分类Dev

Bootstrap响应式嵌入无法正常工作

来自分类Dev

Bootstrap状态按钮无法正常工作