简体   繁体   English

如何更改uib轮播的高度宽度?

[英]How to change height width of uib carousel?

i used uib carousel in angular js ,for slide video in every 5 sec. 我在Angular js中使用uib轮播,每5秒钟播放一次幻灯片视频。 for that used object element to embed video in that using vlc plugin.but porblem is that uib carousel have fixed height and width. 使用vlc插件在其中嵌入视频的对象元素。但问题是uib轮播的高度和宽度固定。 how i change it and make it response. 我如何改变它并做出回应。

if i use image in carousel that it simple to change height of it but when i used object tag than it not change the height . 如果我在轮播中使用图像,则更改其高度很简单,但是当我使用对象标签时,它不会更改高度。

i used it like this 我这样用

<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>

thank you. 谢谢。

change this lines from bootstrap.min.css to change height and width before 从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 }

After

.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 } 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM