carousel

Carousel with dynamic content

点点圈 提交于 2019-12-12 16:25:12
问题 I came across a carousel from Twitter bootstrap here. http://twitter.github.com/bootstrap/javascript.html#carousel It looks really good. But all the images / content in the example are hard-coded. How can I request the server for new content and show it in the carousel? 回答1: The answer would have to be adjusted for each language, but assuming you're programing in PHP, it may look something like this: If you have an array of images: $images = ['path/to/image.jpg', 'path/to/image2.jpg', 'path

Bootstrap Carousel Image does not scale proportionately

…衆ロ難τιáo~ 提交于 2019-12-12 13:32:11
问题 My carousel fills the width of the page, but when I scale down the window the y-axis does not respond. Check it out here How can I maintain the original image proportions? 回答1: Leave the explicit dimensions off all the images in the carousel and it should work properly. 来源: https://stackoverflow.com/questions/11734195/bootstrap-carousel-image-does-not-scale-proportionately

Cycle2 Carousel active slide in center

筅森魡賤 提交于 2019-12-12 12:32:50
问题 I am using Cycle2 with a carousel pager, in the same way as this demo: http://jquery.malsup.com/cycle2/demo/caro-pager.php Currently the active slide in the demo is on the left unless you are on the last few slides. What I would like is: for the active slide to start on the left, on slide 1 then when slide 2 is clicked, the thumbnails don't move but the second thumbnail shows as active. When slide 3 is clicked, the thumbnails don't move but the third thumbnail (in the middle) becomes active).

Bootstrap Carousel: disable indicators

不羁岁月 提交于 2019-12-12 12:27:44
问题 How to make carousel-indicators not clickable on mobile? So that when I click on them on mobile devices, slides don't change. I am using latest bootstrap. 回答1: Let's change the appearance of the standard example for small screens. 1. Indicators can be hidden Add class hidden-xs to <ol class="carousel-indicators"> . @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); .carousel-inner > .item > img { width: 100%; } <div id="carousel-example-generic" class=

Bootstrap Carousel- why are my images not showing?

我的梦境 提交于 2019-12-12 11:49:13
问题 I have to create a Carousel using Bootstrap. I'm still very new to it so I don't know a whole lot. I cant understand why the images are not being shown but only the text. I've been looking it up for the past few hours and still cannot understand what I'm doing wrong or missing etc. I feel like banging my head against a wall. Can anyone help or any info would be really appreciated. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE

appendChild method in a simple carousel with pure JavaScript [closed]

拈花ヽ惹草 提交于 2019-12-12 10:32:26
问题 Closed. This question is off-topic. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed 4 years ago . I am trying to make a simple JavaScript carousel from scratch. JS Fiddle CSS #wrapper{ position: relative; width: 450px; height: 150px; margin: 0 auto; overflow: hidden; } #container{ position: absolute; width: 450px; height: 150px; } .child{ width: 150px; height: 150px; padding-top: 35px; float: left; text

How to change interval of a bootstrap carousel once it has been initialised

懵懂的女人 提交于 2019-12-12 09:38:37
问题 According to the doco, using the following will set the carousel cycle speed: $('.carousel').carousel({ interval: 2000 }) However if you have already initialised the carousel, calling the above with a different interval has no effect. I should note that initialising the carousel via JS doesn't set the data-interval on the carousel. I've also searched quite a bit on this topic, but the results are all about people trying to set up at a fixed speed. I want to change the speed once it's already

Bootstrap 4: Carousel Fade Transition Not Working

倾然丶 夕夏残阳落幕 提交于 2019-12-12 09:05:35
问题 The below code worked perfectly fine for me using Bootstrap version 3. However, since upgrading to Bootstrap 4 Beta2 the fade transition does not work. It just jumps to the next image rather than a smooth transition: HTML <div id="carousel1" class="carousel fade" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel1" data-slide-to="0" class="active"></li> <li data-target="#carousel1" data-slide-to="1"></li> <li data-target="#carousel1" data-slide-to="2"></li> </ol

Creating iOS page indicator (dots) with jQuery Mobile

独自空忆成欢 提交于 2019-12-12 08:09:51
问题 // my Question to the lovely lady in the corner I would like to create a pagination for indicating what page is visible, like in iOS, (those little dots below a window, known as "page indicators" in the HIG.) -- My project is hereby referred to as, Her Highness. I found an example, but I can't find documentation on re-creating the layout, and it's in the experiment section :( http://jquerymobile.com/test/experiments/scrollview/#../../docs/toolbars/footer-persist-a.html 回答1: I'm not sure why

Stretch and fill image in Bootstrap carousel

白昼怎懂夜的黑 提交于 2019-12-12 07:25:30
问题 Hi guys i am using bootstrap carousal and having some problem with image height and width. Even though i define it in the img attribute it still displays as original resolution,following is the code i am using <div class="col-md-6 col-sm-6"> <div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <img src="http://placehold.it/650x450/aaa&text=Item 3" height="300" width="300" /> </div> <div class="item"> <img src="http://placehold.it/350x350/aaa&text