从Bootstrap Carousel中的特定幻灯片开始

时间:2014-10-06 15:46:56

标签: javascript html twitter-bootstrap

所以我通读了this question,但我仍然无法实现代码。我已经将javascript完全复制到我的custom.js文件中,它说我的HTML代码不需要修改。但是,它仍然无法正常工作。我需要改变什么?

HTML文件的相关部分:

<!-- Nav bar -->

<ul class="dropdown-menu" role="menu">
    <li><a href="project1.html?slide=0">Project 1</a></li>
    <li><a href="project1.html?slide=1">Project 2</a></li>
    <li><a href="project1.html?slide=2">Project 3</a></li>
</ul>



<!-- Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class=""></li>
    <li data-target="#myCarousel" data-slide-to="1" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="2" class=""></li>
  </ol>
  <div class="carousel-inner">
    <div class="item">
      <img src="img/Project1.jpg" alt="First slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Project 1</h1>
        </div>
      </div>
    </div>
    <div class="item active">
      <img src="img/Project2.jpg" alt="Second slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Project 2</h1>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="img/Project3.jpg" alt="Third slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Project 3</h1>
        </div>
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="http://getbootstrap.com/examples/carousel/#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
  <a class="right carousel-control" href="http://getbootstrap.com/examples/carousel/#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<!-- /.carousel -->

我注意到第二张幻灯片有一个活动类,但删除它只会打破轮播。

2 个答案:

答案 0 :(得分:4)

要在HTML中手动设置活动类,只需将active类添加到以下元素中:

  • <li data-target="#myCarousel" data-slide-to="1" class="active"></li>
  • <div class="item active"> <!-- for slide 2 -->

在本演示中:

&#13;
&#13;
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<!-- Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class=""></li>
    <li data-target="#myCarousel" data-slide-to="1" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="2" class=""></li>
  </ol>
  <div class="carousel-inner">
    <div class="item">
      <img src="https://picsum.photos/800/300?image=1" alt="First slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Project 1</h1>
        </div>
      </div>
    </div>
    <div class="item active">
      <img src="https://picsum.photos/800/300?image=3" alt="Second slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Project 2</h1>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="https://picsum.photos/800/300?image=4" alt="Third slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Project 3</h1>
        </div>
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>
&#13;
&#13;
&#13;

但是,这样做不会在页面刷新后持续存在。或者至少肯定不会以动态的方式做到这一点。如果您要使用Javascript加载活动幻灯片,那么您不需要手动设置active课程。只需使用您要导航到的一侧的基于零的索引调用.carousel(index),如下所示:

$('#myCarousel').carousel(1);

&#13;
&#13;
$(function() {
  $('#myCarousel').carousel(1);
});    
&#13;
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<!-- Carousel -->
<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" class=""></li>
    <li data-target="#myCarousel" data-slide-to="2" class=""></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img src="https://picsum.photos/800/300?image=1" alt="First slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Project 1</h1>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="https://picsum.photos/800/300?image=3" alt="Second slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Project 2</h1>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="https://picsum.photos/800/300?image=4" alt="Third slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Project 3</h1>
        </div>
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>
&#13;
&#13;
&#13;

这个百万美元的问题是你如何在页面加载时运行上面的javascript。

答案取决于您如何配置链接和网站。对于这种特殊情况,您需要传递carousel一个整数,并且搜索属性始终返回一个字符串,即使它是一组数字。因此,您应该使用new and improved answer to your linked question

$(function(){

    function getParameterByName(key) {
      key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars
      var match = location.search.match(new RegExp("[?&]" + key + "=([^&]+)(&|$)"));
      var slide = match && decodeURIComponent(match[1].replace(/\+/g, " "));
      if (Math.floor(slide) == slide && $.isNumeric(slide))
          return parseInt(slide);
      else
          return 0;
    }

    var slideNumber = getParameterByName('slide');

    $('#myCarousel').carousel(slideNumber);
});

假设您要传递?slide=之类的查询字符串,那么该信息应该在window.location.search属性中提供。

StackSnippets或jsFiddle似乎都没有通过location.search。但是,这是一个扼杀这种工作的人:

Working Demo in Plunker

你可以看到在这个地址工作:

http://run.plnkr.co/plunks/WeBsDkRLFop0oY3wHwQY/index.html?slide=1

答案 1 :(得分:-2)

需要说我是新手,我使用Mobirise作为支持。 话虽如此,我在你的答案中找不到(或者没有理解)的是如何创建一个链接来打开一个特定的幻灯片,用户端,也许在网址的末尾添加一些内容?我用mobirise创建了一个bootstrap carousel样本供你查看。 gallery link