question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Special Options Carousel not working with v97.7

See original GitHub issue

Me 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.

screen shot 2016-07-29 at 1 19 49 pm

  <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.

image

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:closed
  • Created 7 years ago
  • Comments:7

github_iconTop GitHub Comments

6reactions
Branksycommented, Jan 29, 2017

full_width (which works for me) is written I believe incorrectly in the site docs as ‘fullWidth’…

5reactions
acburstcommented, Jul 29, 2016

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

$('.carousel.carousel-slider').carousel({full_width: true});

I will fix the documentation ASAP

Read more comments on GitHub >

github_iconTop Results From Across the Web

Dogfalo/materialize - Gitter
@GorgonsMaze That's what I'm using all the time, v97.7 ... @stratmask6_twitter @BosnaZmaj Special Option Carousel not displaying > issue has been opened ......
Read more >
Bootstrap 4 Carousel sliders not working - Stack Overflow
So the carousel is working automatically now, but the manual option to go to next and previous still isn't working (sorry, bootstrap novice...
Read more >
Untitled
Sound waves rehab, Stort huvud liten kropp, Sophie pirkin, Van der waals equation example problems, Lincoln continental 1995, Census 1991 uttar pradesh, ...
Read more >
Untitled
Tni vs polisi riau, Svarstyklese, Far cry 4 pc ultra settings, Ireland georgia 2014 stamp, ... Addons fsx windows 7, Vault tec number...
Read more >
Changelog | Theme Park Tycoon 2 Wikia - Fandom
Changed: UI adjustments. Changed: Internal changes. v406: 7-Nov-2022. Fixed: Fixed various minor issues.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found