bootstrap视频轮播淡出效果

时间：2018-06-15 11:10:00

标签： javascript jquery html css

我想知道有人可以帮助我使用我的自举旋转木马。我的问题是不透明度不会对转换或过滤器生效。我可以通过google inspect查看css类和id的工作。 如果有人可以帮助我我会很感激的。
我的链接到我的网站。 http://alpha.mikemcfly.dk/JustAGeek.dk/

在标签工作下，您可以看到左侧的一些按钮。有旋转木马的视频和图像。

$('#carouselOne').carousel();
#gallery-buttons div.btn div div div.five.container {
	border: 1 pxsolid rgba(255, 255, 255, .5);
	margin-top: 0vh;
	margin-left: 0vw;
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	-webkit-transition: -webkit-transform 1s cubic-bezier(0.86, 0, 0.07, 1);
	-moz-transition: -moz-transform 1s cubic-bezier(0.86, 0, 0.07, 1);
	transition: 1s cubic-bezier(0.86, 0, 0.07, 1);
}
#gallery-buttons div.btn div div div.five.container.carousel {
	position: relative;
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}
#gallery-buttons div.btn div div div.five.container.carousel.carousel-inner {
	position: relative;
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}
#gallery-buttons div.btn div div div.five.container.carousel-fade.carousel-inner.item {
	position: relative;
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition-property: opacity;
	-webkit-transition: opacity .4s;
	-moz-transition: opacity .4s;
	-o-transition: opacity .4s;
	transition: opacity .4s;
}
#gallery-buttons div.btn div div div.five.container.carousel-fade.carousel-inner.active {
	position: relative;
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	-webkit-transition: opacity .4s;
	-moz-transition: opacity .4s;
	-o-transition: opacity .4s;
	transition: opacity .4s;
	opacity: 1;
}
#gallery-buttons div.btn div div div.five.container.carousel-fade.carousel-inner.active.left,
#gallery-buttons div.btn div div div.five.container.carousel-fade.carousel-inner.active.right {
	left: 0;
	opacity: 0;
	z-index: 1;
}
#gallery-buttons div.btn div div div.five.container.carousel-fade.carousel-inner.next.left,
#gallery-buttons div.btn div div div.five.container.carousel-fade.carousel-inner.prev.right {
	opacity: 1;
}
#gallery-buttons div.btn div div div.five.container.carousel-fade.carousel-control {
	z-index: 66;
}
@media all and(transform-3d),
(-webkit-transform-3d) {
	#gallery-buttons div.btn div div div.five.container.carousel-fade.carousel-inner>.item.next,
	#gallery-buttons div.btn div div div.five.container.carousel-fade.carousel-inner>.item.active.right {
		filter: opacity(0%);
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	#gallery-buttons div.btn div div div.five.container.carousel-fade.carousel-inner>.item.prev,
	#gallery-buttons div.btn div div div.five.container.carousel-fade.carousel-inner>.item.active.left {
		filter: opacity(0%);
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	#gallery-buttons div.btn div div div.five.container.carousel-fade.carousel-inner>.item.next.left,
	#gallery-buttons div.btn div div div.five.container.carousel-fade.carousel-inner>.item.prev.right,
	#gallery-buttons div.btn div div div.five.container.carousel-fade.carousel-inner>.item.active {
		filter: opacity(100%);
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
<div class="container">
    <div id="myCarouselOne" class="carousel carousel-fade" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarouselOne" data-slide-to="0" class="active"></li>
            <li data-target="#myCarouselOne" data-slide-to="1"></li>
            <li data-target="#myCarouselOne" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">

            <div class="item active">
                <img src="content/images/1 project visual studio.mp4.jpg">
            </div>
            <div class="item ">
                <img src="content/images/1 project visual studio.mp4.jpg">
            </div>
            <div class="item ">
                <video src="content/videos/1 project visual studio.mp4" type="video/mp4" controls control muted/>
            </div>
            <!-- Left and right controls -->
            <a class="left carousel-control" href="#myCarouselOne" data-slide="prev">
        		<span class="glyphicon glyphicon-chevron-left"></span>
        		<span class="sr-only">Previous</span>
      		</a>
            <a class="right carousel-control" href="#myCarouselOne" data-slide="next">
        		<span class="glyphicon glyphicon-chevron-right"></span>
        		<span class="sr-only">Next</span>
      		</a>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分：0)

如果你想要一个Bootstrap轮播动画，你需要在你的轮播div上加入.slide类。

$('#carouselOne').carousel();
/* For testing purposes */
.carousel img {
  max-height: 200px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.carousel .carousel-indicators li {
  background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<div class="container">
  <div id="myCarouselOne" class="carousel slide carousel-fade" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarouselOne" data-slide-to="0" class="active"></li>
      <li data-target="#myCarouselOne" data-slide-to="1"></li>
      <li data-target="#myCarouselOne" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

      <div class="carousel-item active">
        <img src="https://images-na.ssl-images-amazon.com/images/I/51IwmuOPQyL._SL1052_.jpg">
      </div>
      <div class="carousel-item ">
        <img src="https://i.ytimg.com/vi/5Nj2BngIko0/maxresdefault.jpg">
      </div>
      <div class="carousel-item ">
        <img src="https://images-na.ssl-images-amazon.com/images/I/51IwmuOPQyL._SL1052_.jpg">
      </div>
      
      <!-- Left and right controls -->
      <a class="left carousel-control" href="#myCarouselOne" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarouselOne" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</div>

相关问题
最新问题