carousel

Setting active slide on angular-ui-bootstrap carousel

由 若如初见. 提交于 2019-12-09 11:13:24
问题 I'm using angular, bootstrap and a plugin called "ui-bootstrap" for angular to make a carousel. I have a list of thumbnails and when clicking one a modal with the images in high definition inside a carousel is displayed, something similar to what you have on Amazon or other websites. I was trying to set the first shown image in the carousel as the one the user clicked. I've been able to get the index of the image using $index as I'm inside an ng-repeat, give it to the modal controller and

How to make Bootstrap 4 carousel images responsive? [duplicate]

由 妖精的绣舞 提交于 2019-12-09 10:38:53
问题 This question already has answers here : Bootstrap 4 carousel not responsive images (2 answers) Bootstrap carousel multiple frames at once (15 answers) Closed 2 years ago . Hopfully the title and the demo say it all. The new carousel of Bootstrap 4 isn't responsive. The images are out of their aspect ratio. Does somebody know how to solve this without doing major adjustments in the css and html? .wrapper { max-width:200px; width:100%; } <script src="https://code.jquery.com/jquery-3.1.1.slim

how to hide ngb-carousel indicators and prev-next control

由 那年仲夏 提交于 2019-12-09 03:24:08
问题 I can't hide the ngb-carousel indicators and prev-next control trough the css, targeting the css class wouldn't work. Is there any option to hide it? 回答1: In order to affect the css of the ng-bootstrap components, you have to disable ViewEncapsulation. Import it from @angular/core: import { ViewEncapsulation } from '@angular/core' Then disable it for this component in the @Component declaration: @Component({ encapsulation: ViewEncapsulation.None, selector: 'your-template-name', styleUrls: [

how do i stop auto sliding in my flexslider

由 旧时模样 提交于 2019-12-09 02:16:45
问题 do anybody know how to stop auto sliding in a flex slider. as i have loaded that slider in my mobile web page. when the page is opened it slides to the next image without any slide or tap event. so please help me to stop this auto slide transition. and make it work only when a screen is tapped or slided. thanks in advance. here is my code.. <script type="text/javascript" charset="utf-8"> $(window).load(function() { $('.flexslider').flexslider(); }); </script> <div class="flexslider"> <ul

Owl carousel still transitions when only 1 slide in carousel

由 こ雲淡風輕ζ 提交于 2019-12-08 22:00:54
问题 I wonder if anyone could help with this. I am using carousel in a CMS and would like the ability for the customer to sometimes only have 1 slide if they so wish. However if only 1 slide is there the fade transition still occurs so it basically transitions to itself. Is there any way to stop the carousel transitioning when there is only 1 slide? I am surprised that this is not a built in function as it has been with other carousels I have used. <div id="owl-demo" class="owl-carousel"> <div

Link two Twitter Bootstrap carousels together using one control

由 爷，独闯天下 提交于 2019-12-08 19:08:57
问题 I'm just learning javascript so please bear with me here. I'm trying to initiate two carousels in bootstrap using the same control. The way it's setup right now, href tags containing the carousel's ID is controlling each carousel. Anyone have advice on how to link both together using the same control with minimal modifications? Here's the HTML: <div id="asHero"> <div id="walkThrough" class="carousel slide"> <!-- Carousel items --> <div class="carousel-inner"> <div class="active item"> <div

Ken Burns on Twitter Bootstrap Carousel

由 社会主义新天地 提交于 2019-12-08 18:06:39
问题 How could I apply a Ken Burns Effect on a Twitter Bootstrap Carousel? .carousel .item img { -webkit-transition: all 12s; -moz-transition: all 12s; -o-transition: all 12s; transition: all 12s; } ... seems not to apply transition. See it in action with jsFiddle... 回答1: ... seems not to apply transition. Oh, but it does! You only have to remove two typos from the CSS code of your fiddle: a display: inline-block; outside of any selector brackets a comment starting with // instead of using /*...*/

bootstrap how to make a fixed height responsive?

由 会有一股神秘感。 提交于 2019-12-08 17:18:55
问题 How can I make a fixed height element responsive with bootstrap 3? For instance I set the carousal's height at 650px. But I can't make it responsive like the images do. Any idea? css, #article-carousel .carousel-inner{ height:650px; } html, <!-- Carousel items --> <div class="carousel-inner"> <div class="active item"> <img src="style/image/10403889_707684359268375_7804458077651816095_o.jpg" class="img-responsive"/> </div> .... 回答1: You can use css3 object-fit for resizing your image http:/

Hiding back images in iCarouselTypeRotary view for iCarousel

由 匆匆过客 提交于 2019-12-08 16:47:26
问题 I have set images in iCarousel. When I scroll the carousel, it shows images in front and back. I do not want to display images in back. Please help. Thank you. 回答1: You'll need to change to a custom carousel type, and copy the implementation of iCarouselTypeRotary in your delegate. Then implement -carousel:itemAlphaForOffset: so that items around the back have an alpha of zero. 回答2: You should implement the delegate: - (CGFloat)carousel:(iCarousel *)_carousel valueForOption:(iCarouselOption

Bootstrap Carousel: Change section under slider

由 点点圈 提交于 2019-12-08 13:23:29
So I've got your typical Bootstrap Carousel, with three or four slides, and the problem that I'm having is that I want the section under the slider to change whenever a new slide comes up. I tried maybe hiding that section and revealing the proper section using "collapse" like this: Hide div by default and show it on click with bootstrap <a href="#Foo" class="btn btn-default" data-toggle="collapse">Toggle Foo</a> <div id="Foo" class="collapse"> This div (Foo) is hidden by default </div> ...where the next slide would be "foo2", and then "foo3" etc... The problem there was that this didn't seem
订阅 carousel