6

I've had the fade transition working in a Bootstrap 3 build for a while now, but I just changed the call from a locally held copy of bootstrap.min.css (Bootstrap v3.1.1) to <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> and the the fade transition is no longer working. It just flips straight to the next slide. No transition at all.

I've tried adding the id of the carousel but that didn't work. 

<div id="myCarousel" class="carousel carousel-fade 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 data-target="#myCarousel" data-slide-to="4"></li>
    </ol>

etc.

The CSS is:

.carousel-fade .item {
-webkit-transition: opacity 3s; 
-moz-transition: opacity 3s; 
-ms-transition: opacity 3s; 
-o-transition: opacity 3s; 
transition: opacity 3s;
}
.carousel-fade .active.left {left:0;opacity:0;z-index:2;}
.carousel-fade .next {left:0;opacity:1;z-index:1;}

[BTW: When I put #myCarousel in front of those it defaults to the slide transition.]

You can see a version here using the maxcdn v3.3.0 CSS here: bizharbour.net/projects/jambalaya/index.html

The one using the call to the locally held v3.1.1 css is here: bizharbour.net/projects/jambalaya/crewed-yacht-charter-sample-menu.htmlThe fade is working on this one.

One other thing I changed is the call to jquery and bootstrap js file. I'm now using:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">  </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

Previously I was using: 

<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>

The local bootstrap.js is v3.1.1 which includes Bootstrap: transition.js v3.1.1, if that means anything.

How do I get the carousel in Bootstrap 3.3.0 to recognise the carousel-fade transition?

Thanks for any help.

Cheers, Tracy

Tracy Shorrock
  • 65
  • 2
  • 9
  • The Bootstrap CSS rules take higher precedence than yours. You need something that beats `.carousel-inner > .item`. Try `.carousel-fade > .carousel-inner > .item` – Phil Nov 06 '14 at 02:26
  • Hi Phil, Thanks for the help. I changed the line as you suggested and have a little progress. When I view it on Firefox the slide starts the fade transition, but the next slide just pops up. You can see at the `bizharbour.net/projects/jambalaya/index.html`. I also tried adding `.carousel-fade > .carousel-inner > .item.active` but that made no difference. When I view it Safari there's no difference, still just swapping the slides without any transition or the default slide transition. So, right direction but still missing something. Any ideas? – Tracy Shorrock Nov 06 '14 at 04:38
  • You need to look at the current Bootstrap styles for the carousel and override everything you need to achieve a fade transition. See https://github.com/twbs/bootstrap/blob/v3.3.0/less/carousel.less – Phil Nov 06 '14 at 04:40
  • Thanks for the link. I don't read less yet. Why make it so difficult to customise in this version [sigh]. I've tried `.carousel-fade > .carousel-inner > .item > .transition { -webkit-transition: opacity 3s; -moz-transition: opacity 3s; -ms-transition: opacity 3s; -o-transition: opacity 3s; transition: opacity 3s;}` in my css file. Just goes back to the default slide. So I'm guessing that .transition isn't a class. The bit `// WebKit CSS3 transforms for supported devices` in your link I don't understand. I do know I don't need the rest of the stuff as I'm not using left/right controls. Cheers – Tracy Shorrock Nov 06 '14 at 05:28
  • The compiled CSS is [here](https://github.com/twbs/bootstrap/blob/v3.3.0/dist/css/bootstrap.css#L5842). The carousel part starts at line 5842 – Phil Nov 06 '14 at 05:32
  • Thanks Phil, but I've just made things worse. You can see at the same link, it's still sliding but much more slowly---so I've made some effect! The css is from line 205 at `bizharbour.net/projects/jambalaya/css/jambalaya.css`. I feel I'm being a tad dumb! – Tracy Shorrock Nov 06 '14 at 06:35
  • I also note that it's now affecting all the text on the page, changing to bold and back to normal! Something is definitely not right ... – Tracy Shorrock Nov 06 '14 at 06:39
  • This issue has been driving me nuts forever. I eventually downgraded my bootstrap version. – brenjt Nov 07 '14 at 05:17
  • I'm thinking of doing the same but it seems nuts. Will continue to look for a working solution, and hope someone is able to post an answer. – Tracy Shorrock Nov 07 '14 at 05:33

1 Answers1

3

I faced the same problem and I think I have a solution for what you need. In 3.3 they added CSS transforms to improve carousel performance in modern browsers so you need to override some styles. Tell me if it worked for you. :)

-webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);

My solution here: http://codepen.io/transportedman/pen/NPWRGq?editors=110

transportedman
  • 46
  • 1
  • Sorry for the delay in getting back to you. Thanks, I implemented your CSS and it's fixed it for Firefox and Chrome (on the Mac) but not Safari 6.0.2. It's also working on the default browser on my Samsung Galaxy Tab BTW. If anybody else could check it on Safari on a Mac that would be helpful, maybe it's just me! What do you think @transportedman? – Tracy Shorrock Nov 24 '14 at 02:06
  • The solution seems to be working for me. A few other things: Ensure to remove the `class="sld-transition-2"` from the body tag; this shows up on some Bootstrap templates and can interfere with the transition effect. Also, I added `data-ride="carousel" data-interval="7000"` to the main carousel div for my requirements. – Alex Mar 20 '15 at 19:45