[Bug]: Carousel onCycleTo method does not get called

[trymeouteh]

Before submitting...

• I have searched for duplicate or closed issues.
• I have read the CONTRIBUTING document and my issue is following the guidelines.
• I have read the template completely before filling it in.

Context

The onCycleTo() method does not get called when I interact with a carousel.

Current Behavior

The onCycleTo() method never gets called

Expected behavior

The onCycleTo() method gets called when the carousel item is moved.

Possible Solutions or Causes

Perhaps this method is depricated?

Steps to reproduce

1. npm i @materializecss/materialize
2. Copy this code into a file called test.html

<link rel="stylesheet" href="node_modules/@materializecss/materialize/dist/css/materialize.min.css" />

<style>
	.carousel-item div {
		height: 100%;

		border: 5px solid black;

		background-color: red;

		font-size: 48;
		text-align: center;
	}
</style>

<div class="carousel carousel-slider">
	<div class="carousel-item active">
		<div>1</div>
	</div>
	<div class="carousel-item active">
		<div>2</div>
	</div>
	<div class="carousel-item active">
		<div>3</div>
	</div>
	<div class="carousel-item active">
		<div>4</div>
	</div>
</div>

<script src="node_modules/@materializecss/materialize/dist/js/materialize.min.js"></script>

<script>
	const myCarousel = M.Carousel.init(document.querySelector('.carousel'), {
		fullWidth: true,
		onCycleTo: function () {
			console.log('Hello World');
		},
	});
</script>

Your Environment

• Version used: 2.2.2
• Browser Name and version: Firefox 143
• Operating System and version (desktop or mobile): Linux Mint 22
• Additional information you want to tell us: Installed Materialize using npm

[Jerit3787]

Hi @trymeouteh,
The solution is similar to another issue opened by you. Adding an event listener for DOMContentLoaded will fix this. Please refer to #640.

Thanks 🙏

[trymeouteh]

I did try adding DOMContentLoaded but the onCycleTo method does not get triggered when a slide is changed.

<link rel="stylesheet" href="node_modules/@materializecss/materialize/dist/css/materialize.min.css" />

<style>
	.carousel-item div {
		height: 100%;

		border: 5px solid black;

		background-color: red;

		font-size: 48;
		text-align: center;
	}
</style>

<div class="carousel carousel-slider">
	<div class="carousel-item active">
		<div>1</div>
	</div>
	<div class="carousel-item active">
		<div>2</div>
	</div>
	<div class="carousel-item active">
		<div>3</div>
	</div>
	<div class="carousel-item active">
		<div>4</div>
	</div>
</div>

<script src="node_modules/@materializecss/materialize/dist/js/materialize.min.js"></script>

<script>
	document.addEventListener('DOMContentLoaded', function () {
		const myCarousel = M.Carousel.init(document.querySelector('.carousel'), {
			fullWidth: true,
			onCycleTo: function () {
				console.log('Hello World');
			},
		});
	});
</script>

[Jerit3787]

Thank you @trymeouteh . Sorry for the overlook. This seems like a valid issue. Reopening the issue. I'll test this more thoroughly once I have access to a computer

CodePen for reference.

p/s: please attach a CodePen after this for maintainers to better check the issue

[Jerit3787]

Hi, I have made a pull request, if you need urgent use, use files from my repo or prebuilt from here.

Thanks :)

[trymeouteh]

Thank you for taking a look and making a pull request.