FAQ Database Discussion Community


How can I add a cover image that sits on top of my bootstrap carousel?

html,css,twitter-bootstrap,carousel
I have three images that are rotating in a full page carousel. I'm trying to add a "cover" image, so to speak, that sits on top of the three rotating. This image will have a cutout that allows you to see the three rotating behind it. I'm just not sure...

iscroll: image carousel like App Store

carousel,iscroll
We are working on a mobile web application. The designer likes the image carousel effect on App Store (the screenshots of the an App). So we try to mimic the same effect using JavaScript. We are using iScroll to implement. So here is a customization of its demo carousel: http://jsfiddle.net/0t9savgj/....

AngularJS multi-item carousel

javascript,angularjs,twitter-bootstrap,carousel
I'm using UI Bootstrap carousel, but it displays only one slide - http://plnkr.co/edit/Pt56PpQ9fjw6Q0nNF9sU?p=preview. How to display images this way? img1 - img2 - img3 then img2 - img3 - img4 then img3 -img4 - img5 then img4 - img5 - img6 then img5 - img6 - img1 (like in the...

A little bug in my custom jQuery carousel

jquery,carousel
I'm creating a custom jQuery carousel and its coming out really well :) But found a little glitch / bug in it. When you click on Prev / Next like a normal user do, it works fine but when you click on it like a robot with hyper speed, it...

ReactElementExtended.js:30 - Error when integrating “React-Slick” ReactJS Module

javascript,slider,reactjs,carousel,slick-carousel
When I integrate react-slick ReactJS module into my project I get the following error in Chrome's console. What does this error message mean? Did I integrate the module incorrectly? <error>ReactElement.createElement @ ReactElementExtended.js:30ReactElementValidator.createElement @ ReactElementValidator.js:396React.createClass.render @ Slider.js:26ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js:775ReactCompositeComponentMixin._renderValidatedComponent @...

CSS box-shadow VS overflow hidden

css,twitter-bootstrap-3,overflow,carousel,box-shadow
I have created a carousel, and I'd like to add box-shadow property on the carousel items. This is not possible, because of the carousel's overflow:hidden property. Is there anyway to overcome that? Please check this fiddle *Carousel is not working properly, for some reason, but you can see the css...

How to make Bootstrap Carousel to start from the first slide on button click?

javascript,twitter-bootstrap,twitter-bootstrap-3,carousel
I am using a Bootstrap Carousel in my website and want to achieve this: The carousel should reset and start from the first slide on button click. Is it possible?

Get the height of the next or previous hidden element to set height of the parent element. jquery

javascript,jquery,slider,carousel,hidden
I have a ul which contains images which are hidden and then loaded into a carousel using absolute positioning. The height of these images is constrained in desktop view so I can control the height of the parent element as there is a small toggle menu below the ul. When...

Looking for a BootStrap 3.0 carousel photo gallery [closed]

jquery,twitter-bootstrap,carousel
Anyone aware of a plugin for BS 3.0 that creates a simple or minimal thumbnail driven slideshow that does not use a light box? Responsive is ideal as well. I'm not trying to reinvent the wheel but haven't found anything and am kind of in a rush. saw this, Carousel...

Get the second image in the carousel slider JQuery

jquery,carousel
I am using carousel from http://web.enavu.com/demos/carousel.html . I want the first left image to be opacity: 1, the rest opacity: 0.5. :) Anyone can help? Thank you. <script type="text/javascript"> $(document).ready(function() { //move he last list item before the first item. The purpose of this is if the user clicks to...

Owl carousel isn't working, no error, div dissapears

javascript,css,carousel,owl-carousel
I have a problem with Owl carousel. I added the owl.carousel.css , owl.carousel.js and the owl.theme.css . Made a div with the class="owl-carousel". and called the function $(".owl-carousel").owlCarousel();. When I did this my div disappears and I don't get any errors in my console... Does someone know this? (I use...

How do I get Slick carousel to work? [closed]

jquery,css,carousel,slick.js
I know this has been asked a lot but I've read through loads of other threads related to Slick yet none of the suggested fixes seem to be working for me. I've followed the instructions on http://kenwheeler.github.io/slick/ but am just left with a page that has three images stacked on...

Flexslider rtl swipe direction issue

javascript,jquery,css,carousel,flexslider
I am using the flexslider with rtl support provided by rtl-this.com. When swiping the slider in touch screens, it moves in the opposite direction. What fix can be done ?...

Trying to add carousel to webpage without redirecting

javascript,html,bootstrap,carousel
When I try to add this code to my webpage, whenever I click on the left or right arrow, it tries to redirect to "#carousel-example-generic", is there a way to do this without leaving my current web page? Heres the code: <!doctype html> <html> <head> <meta charset="utf-8"> <link href="http://www.cssscript.com/wp-includes/css/sticky.css" rel="stylesheet"...

Scroll more than one item in ViewPager

android,android-viewpager,carousel
I am trying to scroll more than one item in a ViewPager per swipe. I have implemented a carousel like ViewPager by setting the PagerAdapter's getPageWidth() to return .33f. And I am trying to scroll 3 items per swipe. I have tried incrementing position in ViewPager.onPageScrolled(). But it isn't working....

finding element in the active slide of Bootstrap carousel

jquery,twitter-bootstrap,carousel
I'm trying to do something to a div that is inside a Bootstrap 3 carousel. How do I find that div, though? $('.carousel').on('slid.bs.carousel', function () { var carouselData = $(this).data('bs.carousel'); var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.item.active')); //now I know the current item, but how do I change the .description div //inside that...

Android create vertical carousel with stacked views

android,android-viewpager,stack,carousel
I am trying to implement this carousel style thing. It would be basically stacked fragments above each other and I could scroll through them. When I scroll the very front one would move intuitively to back. Does anyone know any library for that or is it easily doable with ViewPager?...

Simple carousel with pure JavaScript [closed]

javascript,carousel
This is what I have: JS Fiddle <html> <head> <style> #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-align: center; font-size: 60px; } #a{ background: #FF0000; } #b{...

Mobile Images in Bootstarp Carousel [closed]

twitter-bootstrap,carousel
Our carousel looks great on Desktop but when we view it on a mobile device, the images are small and not taking the entire width of the screen. Is there anyway to make the images take up the entire width of the screen or close to it or any updates...

Check condition before changing slide in Slick Slider

javascript,jquery,html5,css3,carousel
I am using this popular carousel (http://kenwheeler.github.io/slick/). I have placed certain elements inside each slide. At least one of these elements must be selected by the user before moving to the next slide. But I cannot figure out how to prevent the user from manually moving to next slide by...

Multiple bootstrap carousels with different settings

javascript,jquery,twitter-bootstrap-3,carousel
There are multiple carousels in my page and they all work the same way. I'd like to make one of them have different settings though (interval), but I can't make it happen. Here is the fiddle. I'd like to have "#slideshow" carousel work with interval/auto slide set to active, and...

Owl Carousel implementation

jquery,twitter-bootstrap,carousel,owl
I can't use the Owl Carousel 2 I would like to use. I think it has something to do witht the files I have connected to my html but there might be a another problem. Do I even have the right files? This is my HTML so far. I already...

Best Solution for Bootstrap Carousel Image Size Changes Causing Elements on Page to Move

html,css,image,twitter-bootstrap,carousel
I have an image carousel on my site's homepage, and sometimes a few of the images have slightly higher height and width. This causes the page elements, such as a list of test items below the carousel, to move around as each image in the carousel changes. What is the...

Bootstrap carousel images not sliding or switching and controls (& indicators) are also not working

html5,twitter-bootstrap,carousel
I am new to bootstrap and i got problems using carousel. The images are not sliding or switching just stands in first image and the controls,indicators are also not working I'm also new to stackoverflow so please excuse if my format is wrong. Code as given below: head <head> <link...

Is it possible to display responsive Boostrap carousel in all breakpoints?

html,twitter-bootstrap,carousel
I want to display 10 slides in a row in huge screen(lg and md) and based on the breakpoint size,carousel has to display the slides(In mobile view 1 slide and in tablet view 3 or 4 slides based on the screen size).Is it possible to design a responsive bootstrap carousel...

Adding navigation buttons below my slider

javascript,html,css,slider,carousel
I created a fade slider with images, text and links. I'd like to add some navigation bullets below it to control the images. like this : http://www.parallaxslider.com/preview_images/skins/bullets_skin.jpg Here is the slider code: html <div class="slides"> <div class="slidiv"> <a href="..." ><img src="..." > <span> text1 </span></a> </div> <div class="slidiv"> <a href="..."...

jQuery Carousel Flex 3D Carousel

jquery,gallery,slideshow,carousel
I've implemented this carousel which works fine, but when I click through all the images taking me back to the start of the carousel, the carousel spins back through all the images to the first image. I've got a jsfiddle set up here to show the problem — http://jsfiddle.net/s0h28mop/6/ rotate_int...

How to add a border for carousel with JPEG / PNG image

html,css,twitter-bootstrap,carousel
I would like to view carousel display inside a tablet or mobile or some other picture border I have. Is there a way to place it?

Slick Carousel navigation is disabled when my initialSlide is the last in a non infinite slide

jquery,carousel,slick-carousel
I am using Slick carousel on my application, and for the most part it is a brilliant plugin. I have run into one problem though. I have got a carousel which is 13 slides long. At different times, a different initial slide will be loaded. When the initial slide is...

How to add border to carousel with two items

css,bootstrap,carousel
My code is as below http://jsfiddle.net/gXN2u/219/ I am trying to add a border to each of the items with the class item-list. However it doesn't show. My actual slider is a vertical slider. What i want to achieve: ![enter image description here][1] Please help...

Font on links changing when Bootstrap carousel rotates

html,css,twitter-bootstrap,text,carousel
I am having the same issue as this user: http://stackoverflow.com/questions/27856262/bootstrap-carousel-affects-all-fonts-on-change-slide#= My working site is: http://bobbyomari.com/clients/charterboost If you scroll towards the bottom of the page and rotate the testimonial, you'll see that the footer links change their thickness. I tried applying the suggestion in the above link, but it's not working...

Make JS carousel repeat

javascript,html,carousel
I'm using the following code for a simple carousel. I'd like to make it repeat after you get to the third quote-item. Can anyone help? Thank you. Here's the JS: <script> show() $(function() { var currentCarousel = 0; function changeCarousel() { $('.quote-item').hide(); $('.quote-item:eq('+ currentCarousel +')').show(); currentCarousel = currentCarousel + 1;...

Bootstrap Carousel images display over one another

jquery,twitter-bootstrap,carousel
When I use the following code, the image and caption for my second slide displays over those for the first slide and the slider stops working. Below is my code, can anyone help me figure out how to move the second image and caption onto the second slide rather than...

Bootstrap Carousel in Firefox

twitter-bootstrap,carousel
I am using the bootstrap carousel in a test site and I cannot get it to run smoothly in Firefox. It runs smooth in Chrome and IE. The nagging problem is when it transitions/slides to the second image, only a portion of the image displays and then loads. The same...

How to get Bootstrap Carousel to fit 100% to screen?

html,css,twitter-bootstrap,bootstrap,carousel
I was wondering how to get the carousel in Bootstrap's Carousel example to fit 100% to screen, as opposed to the way it's displaying now which allows some blank circular images to be included in the main landing page when it is loaded. Here's a simple illustration of what I'm...

CSS Bug: Sliding one image among multiple images in a carousel

css,twitter-bootstrap,twitter-bootstrap-3,carousel
I am trying to implement bootstrap carousel to rotate or slide one image at a time among the multiple images in carousel. The answer here works perfectly fine for a single carousel placed in a page. Bootstrap: Slide only one image among the multiple images in an item of the...

How do I add classes to items in Owl Carousel 2?

jquery,carousel,owl-carousel,owl-carousel-2
My goal is to make a carousel that looks like this: In case you don't know what you're looking at, there are 5 images/items but only the center one is displayed in its full size. The images next to the center one are smaller, and the outer ones smaller still....

Bootstrap 3.3 Carousel - 3 images slide one by one

javascript,css,twitter-bootstrap,twitter-bootstrap-3,carousel
I want to show 3 thumbnails and onClick of arrow, it has to scroll only one at a time... When it comes to version 3.3, it is scrolling 3 thumbnails at a time... (but it is showing exactly what I want after that.). How can I fix this. <div class="container">...

Jquery Content Carousel not loading items properly

jquery,css,asp.net-mvc,twitter-bootstrap-3,carousel
I am working on simple bootstrap content carousel.... Live Demo The problem is that there should load 3 items each slide.....as can be seen from code but there loads only one item on each slide....The rest of the slider is working good except the item loading... Razor Code : <div...

Dynamically change number of slides displayed in 1 frame of carousel

angularjs,carousel,angular-ui-bootstrap
I am new to AngularJS. Right now I have a reusable carousel widget that I modified to display 2 slides in one frame (I make my carousel as a directive so I can use it anywhere). I am using carousel component from angular-ui-bootstrap, and I modified it according to the...

overriding ng-click from bootstrap

angularjs,twitter-bootstrap,carousel,angular-ui-bootstrap
Suppose I am customizing an angularjs bootstrap carousel and making it as a directive. I want to customize the current function that the ng-click calls on each left/right arrow so it calls a custom function before the original function defined in the bootstrap. I know calling multiple functions in ng-click...

Google map as background in Bootstrap carousel not displaying entirely

jquery,css,twitter-bootstrap,google-maps,carousel
I try to add a map as item in Bootstap carousel,in the same way as in this topic Google map with bootstrap 3 carousel bug? ,when the map is on the first item(active),the map is displayed correctly,but when the map is placed on the second position(2nd item,3rd....),the map is not...

Within a slider, the active slide fades out, but the next slide doesn't fade in; it just appears.

jquery,slider,carousel,fadein,fadeout
How can I make the effect smoother so that the next image fades in instead of just appearing? The active slide fades out, and then the next one appears after the first slide fades to white. This doesn't look very smooth or elegant, and I would like to have the...

How to center image in carousel

jquery,css,twitter-bootstrap,twitter-bootstrap-3,carousel
How to center image in carousel ? I tried bootstrap 3 carousel using code from bootstrap tutorial: <a href="/Webconte/Details/124"> <img src="/Webconte/Image/124" /> </a> </div> <div class="item "> <a href="/Webconte/Details/123"> <img src="/Webconte/Image/123" /> </a> </div> <div class="item "> <a href="/Webconte/Details/105"> <img src="/Webconte/Image/105" /> </a> </div> <div class="item "> <a href="/Webconte/Details/95"> <img...

How can I make this CSS only carousel show the first slide by default?

html,css,css3,carousel
I have a CSS only carousel (which is very nice!), the only problem is that the first slide is not selected by default. How could I achieve this without using JavaScript? <div class="carousel"> <div class="item red slide-in" id="item1"><h1>Item 1</h1></div> <div class="item green slide-in" id="item2"><h1>Item 2</h1></div> <div class="item yellow slide-in" id="item3"><h1>Item...

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

javascript,twitter-bootstrap-3,carousel
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...

Extend image fullscreen in bootstrap carousel / prevent from extending past viewport

css,twitter-bootstrap,carousel,fullscreen
I am using the latest version of bootstrap. I have a fullscreen carousel with content inside of it that is vertically centered, 2 issues: I cannot extend the image all the way, I am missing a height:100%; somewhere in my code I am sure of it but I cant figure...

How to prevent height change during animation using 100% width images in bootstrap carousel

html,css,twitter-bootstrap,twitter-bootstrap-3,carousel
Bootstrap 3 carousel should use fixed-height images during animation. Carousel is created using code from bootstrap tutorial <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="item active"> <a href="124"> <img class="carousel-img" src="124" /> </a> </div> <div class="item "> <a href="123"> <img class="carousel-img" src="123" /> </a> </div> </div> </div> Image...

Issue with views on button click

django,image,twitter-bootstrap,upload,carousel
I am trying to make a carousel that you can upload pictures to. However, when I click on the upload button, It switches to another page, rather than giving me just the upload selection panel as Intended. Can anyone tell me why this might be? Views.py from django.shortcuts import render...

How to create a Bootstrap Carousel that uses Dynamic Content

c#,asp.net,twitter-bootstrap,carousel
I am using the bootstrap carousel and it works great with a static list of images in the html, however I want to be able to upload new images and have them displayed in the carousel - without having to deploy a new version of the site. This answer talks...

Showcase Image and Carousel Caption

html,css,twitter-bootstrap,carousel
I'm experiencing a problem with the following code: HTML: <body> <div class="bs-example"> <nav role="navigation" class="navbar navbar-default"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span...

How to move bootstrap 3 carousel caption below images?

css,twitter-bootstrap,twitter-bootstrap-3,carousel
I have this html that shows slideshow images using bootstrap 3 : <div class="col-sm-8"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#myCarousel" data-slide-to="3"></li> <li...

Responsive Bootstrap Carousel with moveable images

jquery,css,twitter-bootstrap,carousel
I'm stuck right now and don't now how to proceed. So I made a Bootstrap Carousel with a fixed height. The images inside the slide should go down slowly. The problem I got right now is that this is working good on my bigger screen. But when the window gets...

Bootstrap carousel controls inline with indicators

twitter-bootstrap,twitter-bootstrap-3,carousel
By default, indicators are at the bottom and controls are left and right, respectively. <div id="carousel" class="carousel slide" data-ride="carousel"> <!-- Carousel indicators --> <ol class="carousel-indicators"> <li data-target="#carousel" data-slide-to="0" class="active"></li> <li data-target="#carousel" data-slide-to="1"></li> <li data-target="#carousel" data-slide-to="2"></li> <li data-target="#carousel" data-slide-to="3"></li> </ol> <!--/Carousel...

Left and Right Carousel Controls not Working when Smooth Scroll for Anchor Tags Used

javascript,jquery,twitter-bootstrap,carousel
I am using the following script for smooth scroll effect for anchor tags: $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false;...

Infinite carousel doesnt work

jquery,html,css,html5,carousel
Trying see this carousel doing infinite laps. After the last image will see the first image again and before the first see the last image. Was used this Jquery: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> $(document).ready(function() { $('#carousel_ul li:first').before($('#carousel_ul li:last')); $('#right_scroll img').click(function(){ var item_width = $('#carousel_ul li').outerWidth() + 10; var left_indent = parseInt($('#carousel_ul').css('left'))...

Owl Carousel custom thumbnail background image disappears on window resize

jquery,resize,thumbnails,carousel,owl-carousel
I made a custom thumbnail for my owl carousel. The thumbnail is the pagination dots of the owl carousel, I just styled it so it will look like a thumbnail, and I put the images in the thumbnail as background image. My problem is whenever I resize the browser, the...

Resetting the timer in a jQuery carousel

javascript,jquery,timer,carousel,jcarousel
I have a carousel that works fine, the only problem i have is when I click the controls the timer doesn't stop. I have a loop that is inside the timer that changes the image. When I click on of the controls I can change my current active carousel image...

Testimonial container showing in Firefox but not Chrome

html,css,google-chrome,firefox,carousel
I am making a website for a client of mine but I can't seem to figure out why the testimonial box is showing in Firefox but not in Chrome. See the pictures below: CSS for the container (at least I think it is): .testimonial p { background: -moz-linear-gradient(center top ,...

Twitter Bootstrap 3 Carousel - display 2 pictures at a time rather than 3

jquery,css,twitter-bootstrap-3,carousel
Is it possible this carousel to display only 2 pictures at a time rather than 3? Here is working demo. I've tried to change columns to col-md-6 and css to 50% but with no luck......

iCarousel view not showing up in ipad

ios,ipad,carousel
I am making an ios application on ipad and i am putting a iCarousel view in my application by the help of this script : http://www.theappguruz.com/tutorial/how-to-use-icarousel-view-controller-in-ios/ and when i complete all the steps and run this application on ipad it doesn't show me anything but when i run this application...

modal carousel is not working on bootstrap

twitter-bootstrap,modal-dialog,carousel
i have this code and the modal carousel only shows the first pic <button type="button" class="btn" data-toggle="modal" data-target="#myModal">Gallery</button> <div class="modal fade " id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> </div> <div...

Caroufedsel breaks with a link tag

javascript,jquery,html5,carousel
I am trying to use this tutorial (http://coolcarousels.frebsite.nl/c/23/) to create a carousel with products from my company. However, each product has a website that I would like to lead it to. When I add a tag to any of the parts of this code, it works fine until only a...

jQuery Carousel Next / Previous Buttons

javascript,jquery,carousel
Here's the Link to the Fiddle. I'm working with a carousel and I want to make the next/previous buttons functional. I tried adding the following code but it doesn't update the index properly. Any help would be appreciated! $($btnNext).click(function (event) { updateSlides(index + 1); event.preventDefault(); } $($btnPrev).click(function (event) { updateSlides(index...

How to make a horizontally scrolling panel or carousel?

html,css,carousel
I'm looking for something similar like this on steam (horizontal scrolling, if mouse hover it stops): Just like this...

HTML Carousel not registering

javascript,jquery,html,slider,carousel
I am trying to get my carousel to function, but when clicking on the arrows, the slides don't change. This is my code, http://codepen.io/rkrc/pen/ogPaqM HTML: <div class="slider"> <!-- picture 01 --> <div class="slide active-slide"> <div class="container"> <img src="image"> </div> </div> <!-- picture 02 --> <div class="slide"> <div class="container"> <img src="image">...

Bootstrap carousel-control disappears on hover

css3,twitter-bootstrap,carousel
Bootstrap carousel-control disappears on hover. could anyone please help me out ! heres the link. http://hg01.ispghosting.com/techashram/UIDev_Inhouse_2014/Vivekraj_KR/Html5/BibAndTucker/index.html...

Bootstrap Carousel - Whole website jumps when image is changing

javascript,html,css,twitter-bootstrap-3,carousel
Hey lovely StackOverflow Community. I have a problem with my website. I added the Bootstrap Carousel from getbootrap.com and it actually works very well. But there is one problem. Everytime the image sitch, my whole website goes up and down. I don't know what could be the problem, cause i...