I've been struggling a few days on bootstrap carousel, that should slide left/right like the default one, but with added fading (new item slowly gain opacity when coming in and previous item slowly loses opacity when moving out), I've tried many variations, but some of them doesn't work in Firefox, other keeps failing in opera etc.
Here is the HTML:
<section>
<div class="container">
<h2>Some title</h2>
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-sm-12">
<p>Some text</p>
<div class="ingo col-sm-8 col-sm-offset-2">
<div id="pubCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="foto" src="{{'assets/img/some-image.jpg'|theme }}"/>
<h3 class="name longn">Carousel text</h3>
</div>
<div class="item">
<img class="foto" src="{{'assets/img/some-image.jpg'|theme }}"/>
<h3 class="name">Carousel text</h3>
</div>
</div>
<div class="pub-counter">
<p class="counter-line"></p>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#pubCarousel" role="button" data-slide="prev">
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#pubCarousel" role="button" data-slide="next">
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
Here is my carousel setup which doesn't work (I know it's bad right now, I tried like 10 solutions but it doesn't work anyway), rest of the carousel is default:
.ingo .carousel-inner>.item {
-webkit-transition: -webkit-transform 1s ease-in-out, opacity 2s ease-in-out;
-moz-transition: -moz-transform 1s ease-in-out, opacity .5s ease-in-out;
-o-transition: -o-transform 1s ease-in-out, opacity 2s ease-in-out;
transition: transform 1s ease-in-out, opacity 2s ease-in-out;
}
.ingo .carousel-inner>.item.active,.ingo .carousel-inner>.item.active {
-webkit-transition: -webkit-transform 1s ease-in-out, opacity .5s ease-in-out;
-moz-transition: -moz-transform 1s ease-in-out, opacity .5s ease-in-out;
-o-transition: -o-transform 1s ease-in-out, opacity .5s ease-in-out;
transition: transform 1s ease-in-out, opacity 2s ease-in-out;
}
.ingo .carousel .item {
opacity:0;
}
.ingo .carousel .carousel-inner .active {
opacity: 1;
}
.ingo .carousel .carousel-inner .next,
.ingo .carousel .carousel-inner .prev
.ingo .carousel .carousel-inner .active.left,
.ingo .carousel .carousel-inner .active.right {
left: 0;
opacity: 0;
}
.ingo .carousel .carousel-inner .next.left,
.ingo .carousel .carousel-inner .prev.right {
opacity: 1;
}
I'm not using any JS modification. I hope this answer doesn't duplicate some already posted question, I just couldn't find the solution.
Thanks for all the help guys, appreciate it so much.
