Hello I have a problem.
I am trying to change the options of an Carousel instance on mouseenter event. What do I need to do in order to re-render the instance?
My html:
<div class="carousel carousel-slider center">
<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>
My js:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.carousel');
var instances = M.Carousel.init(elems, {
fullWidth: true,
indicators: false
});
});
document.querySelector('.carousel').
addEventListener('mouseenter', function(event) {
var elem = document.querySelector('.carousel');
M.Carousel.getInstance(elem).options.indicators = true;
});
Here is example on codepen: https://codepen.io/bearwithme/pen/MWaOvbX
Ok first up, I would initialise the indicators to begin with and then just hide and show them with simple css onhover. Waaaaaay easier.
If you must change the function on mouseenter, you'd need to destroy the instance and re-init:
instance.destroy();
var elems = document.querySelectorAll('.carousel');
var instances = M.Carousel.init(elems, {
fullWidth: true,
indicators: true
});