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 carousel
But I'm using multiple carousel inside single page. So, I modified the existing to target only the certain carousel. Right after changing css, the carousel behaved weird and now slides with a annoying animation like thing. Demo here: http://www.bootply.com/hL5UY8Jnaw
Any suggestion would be highly appreciated.
I was somehow able to correct that CSS bug using some classes and bit more css. You can check the working version here http://bootsnipp.com/user/snippets/vvl6r
Related
I have a rather specific issue. I am using the Chart.js library to create some charts within some div .carousel-item elements. I am also using a Bootstrap 4 template that comes with its own css and some js.
In this specific case I am creating the div .carousel-item and canvas elements dynamically. In the past these were not created dynamically and worked perfectly with the provided css. Now that I am creating these dynamically, the css is not able to properly render the canvas elements. I have attempted to isolate the cause but have been unsuccessful in doing so.
Here is a link to the JSFiddle that demonstrates the issue. If you delete the css the charts will appear how they should without the carousel.
This took me a bit longer to figure out than I am proud to admit but here it is.
The first div .carousel-item in a carousel needs to also have the active class. Otherwise the carousel has nowhere to start from.
Can anyone provide an example of this or at least a successful example of flickity inside bootstrap 4? I am trying to make an horizontal list of cards in a sort of carousel. I want to scroll through them three a time. Using flickity seemed interesting, but I have all sort of problems doing so within bootstrap 4. Cards will not be the same size, or will just disappear. I tried using it with and without row/col classes (the grid), just had different issues.
This is a bit similar to what I want to achieve, except for the scrollbar :
https://www.codeply.com/go/PF4APyGj7F
You can hide scrollbar. Here is the code to hide scrollbar :-
::-webkit-scrollbar {
display: none;
}
After digging into my problem, I asked on the github of Flickity and someone was able to provide me with a working BS4 example. So from there I knew it was possible to use this plugin with BS4. I just had to find what I was doing wrong.
https://github.com/metafizzy/flickity/issues/742
I just finished my new custom Bootstrap Wordpress theme and added a carousel. It works fine, except it's not responsive. The images get pulled out to an unwanted height. I tried everything, but I can't seem to fix it.
Here it is on my website (with uncompressed css): http://your-juliet.net
Does anyone have a clue? I won't mind removing the caption on the carousel in smaller resolutions (but I rather not). Thanks so much!
Fixed, deleted all the custom styling and put the carousel in a col
I just started with ROR and I'm following the One Month Rails tutorial. This includes the Bootstrap responsive navbar. I now added some pins to my pinterest clone. I noticed that the scrolling does not work when the navbar is in full size. when i make the browserwindow smaller so the navigation gets into the small navigation symbol i can scroll the page. You can probably see best on my heroku link: morning-shore-7790.herokuapp.com
It would be great to get a hint on how to solve this.
Thanks a lot
Looks like you've nested the container class inside the navbar, which will always cause this behavior.
If you're using ERB it means you didn't close a div where you should have, if you're using haml or slim it's most likely an indentation oops. If you use chrome, safari or firefox you can see this clearly, just inspect the element and collapse the navbar, if all other content is contained within that, you still haven't fixed it.
If you still have questions post your layout and your index.
I have a client that is looking for a Wordpress plugin or theme that will display an image over a rotating slider, similar to the home page here: https://www.threebakers.com/
Any thoughts on an out-of-the box solution, or do I need to build this one by hand?
Ironically, I did this exact thing on this site here:
http://www.gilbertmeatlocker.com
Its using the popular Flex Slider, but its not Wordpress. I was working with Drupal on that particular site, so its a custom implement of the stand-alone javascript Flex Slider.
I had to fiddle around with z-index and I used negative-margins to move elements into position.
That particular implementation on gilbertmeatlocker.com is extra complex because the silver frame around the edge is also overlapping the Flex Slider. I would recommend not doing a frame like this if possible, though. It added some serious bugs that were difficult to make work on all browsers.
Putting a single image over the slider like your bakery example or the gilbertmeatlocker.com logo shouldn't be a problem though.
If noone else recommends something better, you could try Flex Slider. There is a Wordpress version of it.