0
は異なる方向に2つのカルーセルを持ってすることが可能です..私はそうすることで、いくつかの方法を試してみましたが、運が...ここに私のコードのサンプルません。..別の方向を持つ2つのブートストラップカルーセル
私が欲しいです下のスライドは左しながら、右のカルーセルは
$('#bottomCarousel .item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.find('.item-content:first-child').clone().appendTo($(this));
});
$('#rightCarousel .item').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
var nextToNext = next.next();
if (!nextToNext.length) {
nextToNext = $(this).siblings(':first');
}
next.find('.item-content:first-child').clone().appendTo($(this));
nextToNext.find('.item-content:first-child').clone().appendTo($(this));
});
$('#bottomCarousel').carousel({
interval: 1000,
});
$('#rightCarousel').carousel({
interval: 1000,
});/* IMPORTS */
@import url('https://fonts.googleapis.com/css?family=Oswald');
/* COMMON STYLES */
html,
body {
height: 100vh;
margin: 0;
overflow: hidden;
font-family: 'Oswald', sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 5px auto;
font-weight: bold;
}
/* PAGE STYLES */
#content {
height: 100%;
}
#left-side {
padding-right: 0;
}
/* LEFT STYLES */
#video-container {
height: 90%;
overflow: hidden;
border: 3px solid #fff;
border-right: none;
box-shadow: 5px 5px 20px #777;
z-index: 1;
}
#video-container:hover #controls-wrapper {
opacity: 1;
}
#video-top-border {
height: 20px;
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.5;
background: red;
/* For browsers that do not support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left, red, orange, yellow, green);
/* For Opera 11.1 to 12.0 */
background: -o-linear-gradient(left, red, orange, yellow, green);
/* For Fx 3.6 to 15 */
background: -moz-linear-gradient(left, red, orange, yellow, green);
/* Standard syntax */
background: linear-gradient(to right, red, orange, yellow, green);
}
#video {
min-width: 100%;
width: 100%;
}
#controls-wrapper {
position: absolute;
bottom: 0;
width: 100%;
opacity: 0;
-webkit-transition: opacity .3s;
-moz-transition: opacity .3s;
-o-transition: opacity .3s;
-ms-transition: opacity .3s;
transition: opacity .3s;
}
#controls {
display: table;
width: 70%;
margin: 0 auto 10px auto;
padding: 10px 20px;
background-color: rgba(165, 206, 57, 0.4);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
}
#controls ul {
width: 100%;
}
#controls button {
box-shadow: 2.4px 2.4px 1.8px #000031, 0px 0px 2.4px #00004b;
background-color: #a5ce39;
border: none;
color: #efefef;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
#controls #seek-bar {
width: 74%;
display: inline-block;
}
#controls #volume-bar {
width: 10%;
display: inline-block;
}
input[type=range].bar {
-webkit-appearance: none;
width: 100%;
margin: 3px 0;
}
input[type=range].bar:focus {
outline: none;
}
input[type=range].bar::-webkit-slider-runnable-track {
width: 100%;
height: 5px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: rgba(203, 255, 119, 0.9);
border-radius: 15.7px;
border: 1px solid #33790e;
}
input[type=range].bar::-webkit-slider-thumb {
box-shadow: 2.4px 2.4px 1.8px #000031, 0px 0px 2.4px #00004b;
border: 1px solid #0a3714;
height: 11px;
width: 10px;
border-radius: 50px;
background: #a5ce39;
cursor: pointer;
-webkit-appearance: none;
margin-top: -4px;
}
input[type=range].bar:focus::-webkit-slider-runnable-track {
background: rgba(211, 255, 139, 0.9);
}
input[type=range].bar::-moz-range-track {
width: 100%;
height: 5px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: rgba(203, 255, 119, 0.9);
border-radius: 15.7px;
border: 1px solid #33790e;
}
input[type=range].bar::-moz-range-thumb {
box-shadow: 2.4px 2.4px 1.8px #000031, 0px 0px 2.4px #00004b;
border: 1px solid #0a3714;
height: 11px;
width: 10px;
border-radius: 50px;
background: #a5ce39;
cursor: pointer;
}
input[type=range].bar::-ms-track {
width: 100%;
height: 5px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range].bar::-ms-fill-lower {
background: rgba(195, 255, 99, 0.9);
border: 1px solid #33790e;
border-radius: 31.4px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range].bar::-ms-fill-upper {
background: rgba(203, 255, 119, 0.9);
border: 1px solid #33790e;
border-radius: 31.4px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range].bar::-ms-thumb {
box-shadow: 2.4px 2.4px 1.8px #000031, 0px 0px 2.4px #00004b;
border: 1px solid #0a3714;
height: 11px;
width: 10px;
border-radius: 50px;
background: #a5ce39;
cursor: pointer;
height: 5px;
}
input[type=range].bar:focus::-ms-fill-lower {
background: rgba(203, 255, 119, 0.9);
}
input[type=range].bar:focus::-ms-fill-upper {
background: rgba(211, 255, 139, 0.9);
}
#video-wrapper:hover #video-controls {
opacity: .9;
}
#banner {
height: 10%;
background-color: #fff;
}
#ctrl1 {
border: 3px solid #fff;
border-right: none;
background-color: #EDC71A;
padding: 0;
}
#ctrl2 {
border: 3px solid #fff;
border-right: none;
background-color: #2D95D2;
padding: 0;
}
#rightCarousel {
padding-left: 0;
z-index: 2;
height: 100vh;
}
.update-data {
padding-left: 0;
overflow: hidden;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
border-left: 3px solid #fff;
border-bottom: none;
}
.update-data:last-child {
border-bottom: 3px solid #fff;
}
.update-data .update-img {
width: 100%;
height: 100%;
}
.color-green {
color: #a5ce39;
}
.color-orange {
color: #e46c0a;
}
.carousel-inner {
margin: 0;
}
.carousel .item {
margin: 0;
}
/* MEDIA */
@media screen and (min-width: 992px) {
#content {
overflow: hidden;
}
#video-wrapper {
height: 66.6vh;
}
.ticker {
height: 33.3vh;
}
.update-data {
height: 33.3vh;
}
}
@media screen and (max-width: 991px) {
#content {
overflow-y: auto;
overflow-x: hidden;
}
#video-wrapper {
height: 420px;
}
.ticker {
height: 218px;
}
.update-data {
min-height: 450px;
}
}
@media all and (transform-3d),
(-webkit-transform-3d) {
.carousel-inner>.item.next,
.carousel-inner>.item.active.right {
left: 0;
-webkit-transform: translate3d(50%, 0, 0);
transform: translate3d(50%, 0, 0);
}
.carousel-inner>.item.prev,
.carousel-inner>.item.active.left {
left: 0;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
}
.carousel-control.right,
.carousel-control.left {
opacity: 0;
margin-top: 3%;
height: 70%;
background: none;
}
.carousel-control.right:hover {
opacity: 0.3;
}
.carousel-control.left:hover {
opacity: 0.3;
}
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="content" class="row">
<!-- LEFT SIDE -->
<div id="left-side" class="col-xs-12 col-sm-12 col-md-8">
<div id="video-wrapper" class="row">
<div id="video-container" class="col-xs-12 col-sm-12 text-center">
<!--<div id="video-top-border"></div>-->
<video autoplay loop muted id="video">
<source type="video/mp4" src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_30mb.mp4">
Your browser does not support the video tag.
</video>
<div id="controls-wrapper">
<div id="controls">
<form class="form-inline">
<button type="button" id="play-pause"><i class="glyphicon glyphicon-pause"></i></button>
<input type="range" id="seek-bar" class="bar" value="0">
<button type="button" id="mute"><i class="glyphicon glyphicon-volume-up"></i></button>
<input type="range" id="volume-bar" class="bar" min="0" max="1" step="0.1" value="1">
<button type="button" id="full-screen"><i class="glyphicon glyphicon-fullscreen"></i></button>
</form>
</div>
</div>
</div>
<!-- end of video container -->
<div id="banner" class="col-xs-12 col-sm-12 text-center">
<h3><span class="color-green">HR EXPO </span> <span class="color-orange"> MAY 15-26</span></h3>
</div>
</div>
<!-- end of video wrapper -->
<div id="bottomCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner left">
<div class="row item active">
<div id="ctrl1" class="col-xs-6 col-sm-6 ticker item-content">ITEM 1</div>
</div>
<div class="row item">
<div id="ctrl2" class="col-xs-6 col-sm-6 ticker item-content">ITEM 2</div>
</div>
<div class="row item">
<div id="ctrl1" class="col-xs-6 col-sm-6 ticker item-content">ITEM 3</div>
</div>
<div class="row item">
<div id="ctrl2" class="col-xs-6 col-sm-6 ticker item-content">ITEM 4</div>
</div>
<div class="row item">
<div id="ctrl1" class="col-xs-6 col-sm-6 ticker item-content">ITEM 5</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#bottomCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#bottomCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- RIGHT SIDE -->
<div id="rightCarousel" class="col-xs-12 col-sm-12 col-md-4 carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="row item active">
<div class="col-xs-12 col-sm-12 item-content">
<div class="update-data row">
<img class="update-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQeFq2W0s4o3JwaS-zXRVj1lAKAyeumsLSVgeio4_opL2kG1AwGgUcuke0" />
</div>
</div>
</div>
<div class="row item">
<div class="col-xs-12 col-sm-12 item-content">
<div class="update-data row">
<img class="update-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnl3-uQyrnN8Kkkcb7QOxw_9ji6bUsrqnD9znU5pI-fhC3Z8uq" />
</div>
</div>
</div>
<div class="row item">
<div class="col-xs-12 col-sm-12 item-content">
<div class="update-data row">
<img class="update-img" src="http://imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_nikkor28-300mmf_35-56gd_ed_vr/img/sample/sample4_l.jpg" />
</div>
</div>
</div>
</div>
</div>
</div>
</body>
はい..それはうまくいくでしょうが、ボトムカルーセルもオーバーライドします。 – Demonyowh
いいえ、あなたは下部カルーセルに 'vertical'クラスを追加しません。セレクターmarvはカルーセル要素にのみ適用されますクラスの垂直線を割り当てます。 –
[ええ、私は仕事を知っていることを絶対に愛しています。]（https://www.codeply.com/go/XNJBQTy8zx）それにはもう少しスタイリングが必要ですが、CSSのセレクタの仕組みがわからないそれを読むことができます。 –