将上一个/下一个按钮放在Boostrap Carousel的顶部 [英] Place the prev/next buttons to the top in Boostrap Carousel
本文介绍了将上一个/下一个按钮放在Boostrap Carousel的顶部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在我的应用程序中，我想可视化我的kMeans的群集，因此我想我可以使用全窗口轮播，其中每张幻灯片将包含10（0）张群集图像。因此，当用户单击下一个按钮时，他应该查看第二个群集，依此类推。我将图像的大小调整为相同大小，但是问题是上一个和下一个按钮的平均高度为
那么如何将上一个/下一个按钮放在顶部？ / p>
我尝试过：
< a class = left carousel -control href =＃mycarousel role = button data-slide =上一页 style = top：0> < span class = glyphicon glyphicon-chevron-left aria-hidden = true>< / span> < span class = sr-only>上一个< / span> < / a>
但什么都没发生！就像Magikarp使用Splash ...
我使用的是Bootstrap轮播的基本示例。有任何想法吗？
正在工作（big：/）示例：
<！DOCTYPE html>
< html lang = zh-CN>
< head>
< meta charset = utf-8>
<元http-equiv = X-UA-Compatible content = IE = edge>
< meta name = viewport content = width = device-width，initial-scale = 1>
<！-以上3个元标记*必须*首先出现在标题中；其他任何头部内容必须在这些标签之后*
< title> kMeansVision< / title>
< ;!-引导程序->
< link href = css / bootstrap.min.css rel = stylesheet>
< ;!-HTML5 shim和Respond.js，用于IE8对HTML5元素和媒体查询的支持->
<！-警告：如果您通过file：//->查看页面，则Respond.js无法正常工作。
<！-[如果IE 9]>
< script src = https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js>< / script>
< script src = https://oss.maxcdn.com/respond/1.4.2/respond.min.js< / script>
<！[endif]->
< ;!-我包括->
< link href = css / full-window-carousel.css rel = stylesheet>
< / head>
< body>
< h1>你好，世界！< / h1>
< div id = mycarousel class = carousel slide data-ride = carousel>
< ;!-指标->
< 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>
< li data-target =＃mycarousel data-slide-to = 4>< / li>
< / ol>
< ;!-幻灯片包装-->
< div class = carousel-inner role = listbox>
< div class = item active>
< img src = img / black.jpg data-color = lightblue alt =第一张图片>
< img src = img / yellow.png data-color = lightblue alt =第一张图片>
< img src = img / black.jpg data-color = lightblue alt =第一张图片>
< img src = img / yellow.png data-color = lightblue alt =第一张图片>
< div class = carousel-caption>
< h3>第一张图片< / h3>
< / div>
< / div>
< div class = item>
< img src = https://unsplash.it/2000/1250?image=689 data-color = firebrick alt =第二张图片>
< div class = carousel-caption>
< h3>第二图像< / h3>
< / div>
< / div>
< div class = item>
< img src = https://unsplash.it/2000/1250?image=675 data-color =紫罗兰色 alt =第三张图像>
< div class = carousel-caption>
< h3>第三图像< / h3>
< / div>
< / div>
< div class = item>
< img src = https://unsplash.it/2000/1250?image=658 data-color = lightgreen alt =第四张图片>
< div class = carousel-caption>
< h3>第四张图像< / h3>
< / div>
< / div>
< div class = item>
< img src = https://unsplash.it/2000/1250?image=638 data-color = tomato alt =第五张图片>
< div class = carousel-caption>
< h3>第五张图像< / h3>
< / div>
< / div>
< / div>
< ;!-控件->
< a class = left carousel-control href =＃mycarousel role = button data-slide = prev style = top：0> < span class = glyphicon glyphicon-chevron-left aria-hidden = true>< / span> < span class = sr-only>上一个< / 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>下一步< / span> < / a>
< / div>
<！-jQuery（Bootstrap的JavaScript插件必需）->
< script src = https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js>< / script>
< ;!-包括所有已编译的插件（如下），或根据需要包括单个文件->
< script src = js / bootstrap.min.js>< / script>
< script>
$（’。carousel’）。carousel（{
interval：false
}）;
< / script>
< / body>
< / html>
其中 full-window-carousel.css 是：
h3 {
display：inline-block;
padding：10px;
背景：＃B9121B；
border-top-left-radius：10px;
border-top-right-radius：10px;
}
.p {
text-align：center;
padding-top：40像素；
font-size：13px;
}
解决方案
以下是引导程序的示例
.carousel-control。 icon-prev，.carousel-control .icon-next，.carousel-control .glyphicon-chevron-left，.carousel-control .glyphicon-chevron-right {top：0！important;}
<！DOCTYPE html>< html lang =>< head> < meta charset = utf-8> < meta http-equiv = X-UA-Compatible content = IE = edge> < meta name = viewport content = width = device-width，initial-scale = 1> < title>标题页< / title> < ;!-Bootstrap CSS-> < link href = // netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css rel = stylesheet>< / head>< body> < div id = carousel-id class = carousel slide data-ride = carousel> < ol class = carousel-indicators> < li data-target =＃carousel-id data-slide-to = 0 class =>< / li> < li data-target =＃carousel-id data-slide-to = 1 class =>< / li> < li data-target =＃carousel-id data-slide-to = 2 class = active>< / li> < / ol> < div class = carousel-inner> < div class = item> < IMG数据-SRC = holder.js / 900x500 /自动/＃777：＃7a7a7a /文本：第一滑动 ALT = 第一滑动 SRC =数据：图像/ SVG + xml的; BASE64，PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzc3NyI + PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojN2E3YTdhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI + Rmlyc3Qgc2xpZGU8L3RleHQ + PC9zdmc + < div class = container> < div class = carousel-caption> < h1>示例标题。 < p> Lorem ipsum dolor就座，奉献自私，sius do eiusmod tempor indicidunt ut Labore et dolore magna aliqua。尽量不要抽烟，不要因抽烟而锻炼。 Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore eu fugiat nulla pariatur。 Excepteur SINT occaecat cupidatat非proident，必须遵守在过失魁正式开通了deserunt mollit阿尼姆ID EST laborum< / p为H. < p>< a class = btn btn-lg btn-primary href =＃ role = button>立即注册< / a> < / p> < / div> < / div> < / div> < div class = item> < IMG数据-SRC = holder.js / 900x500 /自动/＃666：＃6a6a6a /文本：第二滑动 ALT = 第二滑动 SRC =数据：图像/ SVG + xml的; BASE64，PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzY2NiI + PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNmE2YTZhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI + U2Vjb25kIHNsaWRlPC90ZXh0Pjwvc3ZnPg ==> < div class = container> < div class = carousel-caption> < h1>另一个例子。 < p> Lorem ipsum dolor就座，奉献自私，sius do eiusmod tempor indicidunt ut Labore et dolore magna aliqua。尽量不要抽烟，不要进行任何锻炼，以乌拉姆科动物为实验对象。 < p>< a class = btn btn-lg btn-primary href =＃ role = button>了解详情< / a> < / p> < / div> < / div> < / div> < div class = item active> < IMG数据-SRC = holder.js / 900x500 /自动/＃555：＃5a5a5a /文本：第三滑动 ALT = 第三滑动 SRC =数据：图像/ SVG + xml的; BASE64，PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzU1NSI + PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNWE1YTVhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI + VGhpcmQgc2xpZGU8L3RleHQ + PC9zdmc + < div class = container> < div class = carousel-caption> < h1>一个。 < p> aliqua。尽量不要抽烟，不要因抽烟而锻炼。 Duis aute irure dolor in reprehenderit in voltate velit esse cillum dolore eu fugiat nulla pariatur。 Excepteur SINT occaecat cupidatat非proident，必须遵守在过失魁正式开通了deserunt mollit阿尼姆ID EST laborum< / p为H. < p>< a class = btn btn-lg btn-primary href =＃ role = button>浏览画廊< / a> < / p> < / div> < / div> < / div> < / div> < a class = left carousel-control href =＃carousel-id data-slide = prev>< span class = glyphicon glyphicon-chevron-left< / span>< / a> < a class = right carousel-control href =＃carousel-id data-slide = next>< span class = glyphicon glyphicon-chevron-right< // span>< / a> < / div> <！-jQuery-> < script src = // code.jquery.com/jquery.js\"></script> <！-Bootstrap JavaScript-> < script src = // netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js\"<//script></body></html>
In my application, I want to visualize the clusters of my kMeans, so I thought I could use a full-window carousel, where every slide will contain 10(0) images of the cluster. So, when the user clicks the next button, he should view the 2nd cluster, etc.. I will resize the images to be all of the same size, but the problem is that the previous and next buttons will go at the mean height of the slide, making the user having to scroll down to click them, which might be not he wants.
So how to place the prev/next buttons at the top?
I tried this:
<a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev" style="top: 0"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>
but nothing happened! Like Magikarp using Splash...
I am using the basic example of the Bootstrap carousel. Any idea(s)?
Working ( big :/ ) example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>kMeansVision</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- My includes -->
<link href="css/full-window-carousel.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<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>
<li data-target="#mycarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/black.jpg" data-color="lightblue" alt="First Image">
<img src="img/yellow.png" data-color="lightblue" alt="First Image">
<img src="img/black.jpg" data-color="lightblue" alt="First Image">
<img src="img/yellow.png" data-color="lightblue" alt="First Image">
<div class="carousel-caption">
<h3>First Image</h3>
</div>
</div>
<div class="item">
<img src="https://unsplash.it/2000/1250?image=689" data-color="firebrick" alt="Second Image">
<div class="carousel-caption">
<h3>Second Image</h3>
</div>
</div>
<div class="item">
<img src="https://unsplash.it/2000/1250?image=675" data-color="violet" alt="Third Image">
<div class="carousel-caption">
<h3>Third Image</h3>
</div>
</div>
<div class="item">
<img src="https://unsplash.it/2000/1250?image=658" data-color="lightgreen" alt="Fourth Image">
<div class="carousel-caption">
<h3>Fourth Image</h3>
</div>
</div>
<div class="item">
<img src="https://unsplash.it/2000/1250?image=638" data-color="tomato" alt="Fifth Image">
<div class="carousel-caption">
<h3>Fifth Image</h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev" style="top: 0"> <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>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
$('.carousel').carousel({
interval: false
});
</script>
</body>
</html>
where full-window-carousel.css is:
h3 {
display: inline-block;
padding: 10px;
background: #B9121B;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.p {
text-align: center;
padding-top: 40px;
font-size: 13px;
}
解决方案
Here is an example of bootstrap carousel with the arrows on top of the carousel.
.carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
top: 0 !important;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<!-- Bootstrap CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="carousel-id" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-id" data-slide-to="0" class=""></li>
<li data-target="#carousel-id" data-slide-to="1" class=""></li>
<li data-target="#carousel-id" data-slide-to="2" class="active"></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img data-src="holder.js/900x500/auto/#777:#7a7a7a/text:First slide" alt="First slide" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzc3NyI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojN2E3YTdhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+Rmlyc3Qgc2xpZGU8L3RleHQ+PC9zdmc+">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a>
</p>
</div>
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#666:#6a6a6a/text:Second slide" alt="Second slide" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzY2NiI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNmE2YTZhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+U2Vjb25kIHNsaWRlPC90ZXh0Pjwvc3ZnPg==">
<div class="container">
<div class="carousel-caption">
<h1>Another example .</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco larunt mollit anim id est laborum.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a>
</p>
</div>
</div>
</div>
<div class="item active">
<img data-src="holder.js/900x500/auto/#555:#5a5a5a/text:Third slide" alt="Third slide" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzU1NSI+PC9yZWN0Pjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNWE1YTVhO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+VGhpcmQgc2xpZGU8L3RleHQ+PC9zdmc+">
<div class="container">
<div class="carousel-caption">
<h1>One more.</h1>
<p>aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a>
</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-id" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#carousel-id" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<!-- jQuery -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
这篇关于将上一个/下一个按钮放在Boostrap Carousel的顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
