所以我通读了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 -->
我注意到第二张幻灯片有一个活动类,但删除它只会打破轮播。
答案 0 :(得分:4)
要在HTML中手动设置活动类,只需将active
类添加到以下元素中:
<li data-target="#myCarousel" data-slide-to="1" class="active"></li>
<div class="item active"> <!-- for slide 2 -->
在本演示中:
<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;
但是,这样做不会在页面刷新后持续存在。或者至少肯定不会以动态的方式做到这一点。如果您要使用Javascript加载活动幻灯片,那么您不需要手动设置active
课程。只需使用您要导航到的一侧的基于零的索引调用.carousel(index)
,如下所示:
$('#myCarousel').carousel(1);
$(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;
这个百万美元的问题是你如何在页面加载时运行上面的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
。但是,这是一个扼杀这种工作的人:
你可以看到在这个地址工作:
http://run.plnkr.co/plunks/WeBsDkRLFop0oY3wHwQY/index.html?slide=1
答案 1 :(得分:-2)
需要说我是新手,我使用Mobirise作为支持。 话虽如此,我在你的答案中找不到(或者没有理解)的是如何创建一个链接来打开一个特定的幻灯片,用户端,也许在网址的末尾添加一些内容?我用mobirise创建了一个bootstrap carousel样本供你查看。 gallery link