如何更改uib轮播的高度宽度?
How to change height width of uib carousel?
我在 angular js 中使用了 uib 轮播,每 5 秒播放一次幻灯片视频。对于使用 vlc plugin.but 使用对象元素嵌入视频的问题是 uib 轮播具有固定的高度和宽度。我如何更改它并使其响应。
如果我在旋转木马中使用图片,很容易改变它的高度,但是当我使用对象标签时,它不会改变高度。
我是这样用的
<div ng-controller="CarouselDemoCtrl">
<div >
<uib-carousel interval="myInterval" no-wrap="noWrapSlides">
<uib-slide ng-repeat="slide in slides" active="slide.active">
<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab" id="vlc">
<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" name="vlc" />
</object>
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{slide.text}}</p>
</div>
</uib-slide>
</uib-carousel>
</div>
</div>
谢谢。
将此行从 bootstrap.min.css 更改为更改高度和宽度
之前
.carousel { position: relative }
.carousel-inner { position: relative; width: 100%; overflow: hidden }
.carousel-inner>.item { position: relative; display: none; -webkit-transition: .6s ease-in-out left; -o-transition: .6s ease-in-out left; transition: .6s ease-in-out left }
.carousel-inner>.item>a>img, .carousel-inner>.item>img { line-height: 1 }
之后
.carousel { position: absolute;height:100%;min-height: 100%;width:100%; }
.carousel-inner { position: relative; width: 100%; height:100%;min-height: 100%;}
.carousel-inner>.item {height:100%;min-height: 100%; position: relative; display: none; -webkit-transition: .6s ease-in-out left; -o-transition: .6s ease-in-out left; transition: .6s ease-in-out left;width:100%; }
.carousel-inner>.item>a>img, .carousel-inner>.item>img { line-height: 1 }
我在 angular js 中使用了 uib 轮播,每 5 秒播放一次幻灯片视频。对于使用 vlc plugin.but 使用对象元素嵌入视频的问题是 uib 轮播具有固定的高度和宽度。我如何更改它并使其响应。
如果我在旋转木马中使用图片,很容易改变它的高度,但是当我使用对象标签时,它不会改变高度。
我是这样用的
<div ng-controller="CarouselDemoCtrl">
<div >
<uib-carousel interval="myInterval" no-wrap="noWrapSlides">
<uib-slide ng-repeat="slide in slides" active="slide.active">
<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab" id="vlc">
<embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" name="vlc" />
</object>
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{slide.text}}</p>
</div>
</uib-slide>
</uib-carousel>
</div>
</div>
谢谢。
将此行从 bootstrap.min.css 更改为更改高度和宽度 之前
.carousel { position: relative }
.carousel-inner { position: relative; width: 100%; overflow: hidden }
.carousel-inner>.item { position: relative; display: none; -webkit-transition: .6s ease-in-out left; -o-transition: .6s ease-in-out left; transition: .6s ease-in-out left }
.carousel-inner>.item>a>img, .carousel-inner>.item>img { line-height: 1 }
之后
.carousel { position: absolute;height:100%;min-height: 100%;width:100%; }
.carousel-inner { position: relative; width: 100%; height:100%;min-height: 100%;}
.carousel-inner>.item {height:100%;min-height: 100%; position: relative; display: none; -webkit-transition: .6s ease-in-out left; -o-transition: .6s ease-in-out left; transition: .6s ease-in-out left;width:100%; }
.carousel-inner>.item>a>img, .carousel-inner>.item>img { line-height: 1 }