Special Options Carousel not working with v97.7
See original GitHub issueMe and a few other people from the gitter chat have been experiencing issues with the special options carousel. We’re using the latest version v97.7. It seems to be hidden.
<div class="carousel carousel-slider center" data-indicators="true">
<div class="carousel-fixed-item center">
<a class="btn waves-effect white grey-text darken-text-2">button</a>
</div>
<div class="carousel-item red white-text" href="#one!">
<h2>First Panel</h2>
<p class="white-text">This is your first panel</p>
</div>
<div class="carousel-item amber white-text" href="#two!">
<h2>Second Panel</h2>
<p class="white-text">This is your second panel</p>
</div>
<div class="carousel-item green white-text" href="#three!">
<h2>Third Panel</h2>
<p class="white-text">This is your third panel</p>
</div>
<div class="carousel-item blue white-text" href="#four!">
<h2>Fourth Panel</h2>
<p class="white-text">This is your fourth panel</p>
</div>
</div>
$(document).ready(function(){
$('.carousel').carousel();
});
Here’s a codepen of the issue. In dev tools it shows it’s intializing, it’s just not displaying correctly.
When messing around with the css in dev tools I’m able to get it to display somewhat, but it doesn’t look, or feel correct. When sliding there’s a thin white lines that display in the middle of each slide, and the right side seems to show the next slide a bit. It ends up sliding like the original carousel, instead of a like on the documentation page.
For instance in dev tools I messed around with a few things, and I got it to display like this.
By changing these things…
.carousel.carousel-slider {
height: 500px;
}
.carousel .indicators .indicator-item {
margin: 0 5px;
}
.carousel.carousel-slider .carousel-item {
top: 100%;
}
Issue Analytics
- State:
- Created 7 years ago
- Comments:7
full_width (which works for me) is written I believe incorrectly in the site docs as ‘fullWidth’…
I think this may be an error in our documentation. The special options carousel requires the full_width property to be true.
http://codepen.io/anon/pen/xOJqYO
I will fix the documentation ASAP