Html li element在旋转木马中的行为与其他人不同

Html li element在旋转木马中的行为与其他人不同,html,Html,嘿,伙计们,对不起,我得问一下,但我想不出来。单击幻灯片和字幕自动更新时,Im使用带缩略图IMG的旋转木马。一个li项目与其他项目不同,向相反方向滑动,显示错误的字幕,具体而言,它将显示data-slide-0字幕,而不是number data-slide-10(编号从零开始)。感谢您的帮助。谢谢 幻灯片标题的HTML格式: <div class="row"> <div class="col-md-12" id="slider"> <div class="c

嘿,伙计们,对不起,我得问一下,但我想不出来。单击幻灯片和字幕自动更新时,Im使用带缩略图IMG的旋转木马。一个li项目与其他项目不同,向相反方向滑动,显示错误的字幕,具体而言,它将显示data-slide-0字幕,而不是number data-slide-10(编号从零开始)。感谢您的帮助。谢谢

幻灯片标题的HTML格式:

 <div class="row">
  <div class="col-md-12" id="slider">

<div class="col-md-12" id="carousel-bounding-box">
  <div id="myCarousel" class="carousel slide">
    <!-- main slider carousel items -->
    <div class="carousel-inner">
      <div class="active item" data-slide-number="0" id="slide_0">
        <div class="carousel-caption"><p>The 12-acre campus is located near downtown Seattle bordered by Seattle Center and two major roads.</p>
        <div class="photo-credit"><p>Timothy Hursley, Sean Airhart (NBBJ)</p></div>
        </div>

      </div>
        <div class="item" data-slide-number="1" id="slide_1">
          <div class="carousel-caption"><p>The design concept expresses complementary principles of global mission and local roots through a layering of landscape and buildings. global mission and express the Foundation’s aspirations, while the local ground reconnects the site to the city and provides a community for employees.</p>
          <div class="photo-credit"><p>Timothy Hursley, Sean Airhart (NBBJ)</p></div>
          </div>

        </div>
          <div class="item" data-slide-number="2" id="slide_2">
            <div class="carousel-caption"><p>Prior to construction the site was a 12-acre surface parking lot on a contaminated ground near downtown Seattle.</p>
            <div class="photo-credit"><p>Timothy Hursley, Sean Airhart (NBBJ)</p></div>
            </div>

          </div>
            <div class="item" data-slide-number="3" id="slide_3">
              <div class="carousel-caption"><p>Phase One construction is shown shortly after completion. The campus design turns a historic void into a green urban anchor.</p>
              <div class="photo-credit"><p>Timothy Hursley, Sean Airhart (NBBJ)</p></div>
              </div>

            </div>
              <div class="item" data-slide-number="4" id="slide_4">
                <div class="carousel-caption"><p>Surrounding streetscapes and campus edges provide opportunities for public engagement. Campus materials and planting palette extends out to the street and security barriers are integrated into the benches and seat-walls.</p>
                <div class="photo-credit"><p>Timothy Hursley, Sean Airhart (NBBJ)</p></div>
                </div>

              </div>
                <div class="item" data-slide-number="5" id="slide_5">
                  <div class="carousel-caption"><p>A deep pool and floating central plaza mark the heart of the campus and offer a shared ground to link individual campus buildings.</p>
                  <div class="photo-credit"><p>Timothy Hursley, Sean Airhart (NBBJ)</p></div>
                  </div>

                </div>
                  <div class="item" data-slide-number="6" id="slide_6">
                    <div class="carousel-caption"><p>For employees, the boardwalks that connect to the central plaza provide opportunities for serendipitous meetings en route between buildings.</p>
                    <div class="photo-credit"><p>Timothy Hursley, Sean Airhart (NBBJ)</p></div>
                    </div>

                  </div>
                    <div class="item" data-slide-number="7" id="slide_7">
                      <div class="carousel-caption"><p>Densely planted “local ground” provides a most intimate setting at the water’s edge. Since moving into the new campus, employees have found that using the outdoor workspaces increases productivity and improves their personal health.</p>
                      <div class="photo-credit"><p>Timothy Hursley, Sean Airhart (NBBJ)</p></div>
                      </div>

                    </div>
                      <div class="item" data-slide-number="8" id="slide_8">
                      <div class="carousel-caption"><p>The design of the central rainwater pool is inspired by the bogs that once covered this region. The striking contrast between the dark water and the glowing planted edge frames the central space.</p>
                      <div class="photo-credit"><p>Timothy Hursley, Sean Airhart (NBBJ)</p></div>
                      </div>

                    </div>
                      <div class="item" data-slide-number="9" id="slide_9">
                      <div class="carousel-caption"><p>To enhance the sense of being grounded on a site that is actually over structure, the design conveys the illusion of thick, dark earth underfoot, with natural textures of salvaged and domestically sourced paving stones.</p>
                      <div class="photo-credit"><p>Timothy Hursley, Sean Airhart (NBBJ)</p></div>
                      </div>

                    </div>
                    <div class="item" data-slide-number="10" id="slide_10">
                      <div class="carousel-caption"><p>Custom formliners were used on the faces of dark concrete retaining walls at water edges and along sidewalks to abstractly imply cuts through a dense slab of moist, peaty ground.</p>
                      <div class="photo-credit"><p>Timothy Hursley, Sean Airhart (NBBJ)</p></div>
                      </div>

                    </div>
                    <div class="item" data-slide-number="11" id="slide_11">
                      <div class="carousel-caption"><p>The landscape is instrumental in achieving the client’s primary goal of building a campus that supports their employees’ productivity. Because many employees travel extensively, a daily connection to light, weather, and seasonal change is essential.</p>
                      <div class="photo-credit"><p>Timothy Hursley, Sean Airhart (NBBJ)</p></div>
                      </div>

                    </div>
                    <div class="item" data-slide-number="12" id="slide_12">
                      <div class="carousel-caption"><p>Nearly 100% of rainwater from non-pollutant generating hard surfaces in the campus is collected into a rainwater cistern below the central courtyard that conserves up to 2 million gallons of water annually.</p>
                      <div class="photo-credit"><p>Timothy Hursley, Sean Airhart (NBBJ)</p></div>
                      </div>

                    </div>
                    <div class="item" data-slide-number="13" id="slide_13">
                      <div class="carousel-caption"><p>Since opening, birds have returned to the area, including multiple families of nesting ducks and a Great Blue Heron that regularly visits, to the delight of employees.</p>
                      <div class="photo-credit"><p>Timothy Hursley, Sean Airhart (NBBJ)</p></div>
                      </div>

                    </div>
                    <div class="item" data-slide-number="14" id="slide_14">
                      <div class="carousel-caption"><p>The aspirations of the largest philanthropic foundation in the world hold that every person, regardless of circumstance, should have the chance to live a healthy, productive life. This ethic is evident throughout the project – from ecologically sensitive systems to streetscapes.</p>
                      <div class="photo-credit"><p>Timothy Hursley, Sean Airhart (NBBJ)</p></div>
                      </div>

                    </div>

    </div>

占地12英亩的校园位于西雅图市中心附近,毗邻西雅图中心和两条主要道路

蒂莫西·赫斯利,肖恩·艾尔哈特(NBBJ)

设计理念通过景观和建筑的分层表达了全球使命和地方根源的互补原则。全球使命和表达基金会的愿望,而当地的地面重新连接网站到城市,并为员工提供一个社区。 蒂莫西·赫斯利,肖恩·艾尔哈特(NBBJ)

在施工之前,该场地是一个12英亩的地面停车场,位于西雅图市中心附近受污染的地面上

蒂莫西·赫斯利,肖恩·艾尔哈特(NBBJ)

一期工程完工后不久即开始施工。校园设计将一片历史空白变成了绿色城市的锚

蒂莫西·赫斯利,肖恩·艾尔哈特(NBBJ)

周围的街道景观和校园边缘为公众参与提供了机会。校园材料和种植调色板延伸至街道,安全屏障融入长椅和座椅墙壁

蒂莫西·赫斯利,肖恩·艾尔哈特(NBBJ)

一个深水池和浮动中心广场标志着校园的中心,并提供了一个连接各个校园建筑的共享场地

蒂莫西·赫斯利,肖恩·艾尔哈特(NBBJ)

对于员工来说,连接中央广场的木板路提供了在建筑物之间进行偶然会面的机会

蒂莫西·赫斯利,肖恩·艾尔哈特(NBBJ)

密集种植的“本地地面”在水边提供了一个最亲密的环境。自从搬进新校区以来,员工们发现使用户外工作区可以提高工作效率,改善个人健康

蒂莫西·赫斯利,肖恩·艾尔哈特(NBBJ)

中央雨水池的设计灵感来自曾经覆盖该地区的沼泽。黑暗的海水和发光的植物边缘形成了鲜明的对比,构成了中心空间的框架

蒂莫西·赫斯利,肖恩·艾尔哈特(NBBJ)

为了增强在一个实际上是在结构上的场地上扎根的感觉,该设计传达了脚下厚厚的、黑暗的土壤的幻觉,带有打捞上来的和国内采购的铺路石的自然纹理

蒂莫西·赫斯利,肖恩·艾尔哈特(NBBJ)

在水边和人行道上的深色混凝土挡土墙的表面上使用了定制的模板衬里,抽象地暗示了穿过潮湿泥炭地面的密集板的切口

蒂莫西·赫斯利,肖恩·艾尔哈特(NBBJ)

景观有助于实现客户的主要目标,即建设一个支持员工生产力的校园。由于许多员工经常出差,每天与光线、天气和季节变化保持联系至关重要

蒂莫西·赫斯利,肖恩·艾尔哈特(NBBJ)

近100%来自校园内无污染硬表面的雨水被收集到中央庭院下方的雨水池中,每年可节约多达200万加仑的水

蒂莫西·赫斯利,肖恩·艾尔哈特(NBBJ)

自开业以来,鸟类已返回该地区,包括多个巢鸭家庭和一只定期来访的大蓝鹭,令员工们感到高兴

蒂莫西·赫斯利,肖恩·艾尔哈特(NBBJ)

世界上最大的慈善基金会的愿望是,无论环境如何,每个人都应该有机会过上健康、富有成效的生活。从生态敏感系统到街道景观,这一伦理在整个项目中都是显而易见的

蒂莫西·赫斯利,肖恩·艾尔哈特(NBBJ)

幻灯片拇指的HTML:

      <div class="col-md-12 hidden-sm hidden-xs" id="slider-thumbs">

        <!-- thumb navigation carousel items -->
      <ul class="list-inline">
      <li> <a id="carousel-selector-0" class="selected">
        <img src="http://placehold.it/80x60&amp;text=one" class="img-responsive">
      </a></li>
      <li> <a id="carousel-selector-1">
        <img src="http://placehold.it/80x60&amp;text=two" class="img-responsive">
      </a></li>
      <li> <a id="carousel-selector-2">
        <img src="http://placehold.it/80x60&amp;text=three" class="img-responsive">
      </a></li>
      <li> <a id="carousel-selector-3">
        <img src="http://placehold.it/80x60&amp;text=four" class="img-responsive">
      </a></li>
      <li><a id="carousel-selector-4">
        <img src="http://placehold.it/80x60&amp;text=five" class="img-responsive">
      </a></li>
      <li> <a id="carousel-selector-5">
        <img src="http://placehold.it/80x60&amp;text=six" class="img-responsive">
      </a></li>
      <li> <a id="carousel-selector-6">
        <img src="http://placehold.it/80x60&amp;text=seven" class="img-responsive">
      </a></li>
      <li> <a id="carousel-selector-7">
        <img src="http://placehold.it/80x60&amp;text=eight" class="img-responsive">
      </a></li>
      <li> <a id="carousel-selector-8">
        <img src="http://placehold.it/80x60&amp;text=nine" class="img-responsive">
      </a></li>
      <li> <a id="carousel-selector-9">
        <img src="http://placehold.it/80x60&amp;text=ten" class="img-responsive">
      </a></li>
      <li> <a id="carousel-selector-10">
        <img src="http://placehold.it/80x60&amp;text=eleven" class="img-responsive">
      </a></li>
      <li> <a id="carousel-selector-11">
        <img src="http://placehold.it/80x60&amp;text=twelve" class="img-responsive">
      </a></li>
      <li> <a id="carousel-selector-12">
        <img src="http://placehold.it/80x60&amp;text=thirteen" class="img-responsive">
      </a></li>
      <li> <a id="carousel-selector-13">
        <img src="http://placehold.it/80x60&amp;text=fourteen" class="img-responsive">
      </a></li>
      <li> <a id="carousel-selector-14">
        <img src="http://placehold.it/80x60&amp;text=fifteen" class="img-responsive">
      </a></li>
      </ul>

</div>

  •   <script type="text/javascript">
       $('#myCarousel').carousel({
        interval: 13000
       });
    
      // handles the carousel thumbnails
       $('[id^=carousel-selector-]').click( function(){
        var id_selector = $(this).attr("id");
        var id = id_selector.substr(id_selector.length -1);
        id = parseInt(id);
        $('#myCarousel').carousel(id);
        $('[id^=carousel-selector-]').removeClass('selected');
        $(this).addClass('selected');
     });
    
       // when the carousel slides, auto update
       $('#myCarousel').on('slid', function (e) {
        var id = $('.item.active').data('slide-number');
        id = parseInt(id);
        $('[id^=carousel-selector-]').removeClass('selected');
        $('[id^=carousel-selector-'+id+']').addClass('selected');
     });
    
      // auto update the text
      $('#myCarousel').on('slid', function (e) {
                var id = $('.item.active').data('slide-number');
                $('#carousel-text').html($('#slide-content-'+id).html());
        });