Carousel click control out of bounds With NoWrap

[LoganTann]

Moved the issue to the community fork

Go to materializecss#180

---

Everything is said in the title : when we declare a carousel with the nowrap option, the mouse control displays an empty slide before the first and after the last element

Expected Behavior

We can navigate (in PC) over the carousel by clicking in the left or in the right.
When we click in the left of the first item of the carousel, there should be any movements. It is the same for the right of the last item

Current Behavior

When we click in the left of the first item of the carousel, there is a movement in a empty item. It is the same for the right of the last item.

Possible Solution

there is a similar issue fixed for the control functions, but not the click): #5977

Steps to Reproduce (for bugs)

<!--HTML struct-->
<div class='carousel'>
  <a class='carousel-item' href='#vol1'> <img src='/res/img/covers/1.jpg' alt='art'/></a
  <a class='carousel-item' href='#vol2'> <img src='/res/img/covers/2.jpg' alt='art'/>
  <!-- [...] -->
  <a class='carousel-item' href='#vol13'> <img src='/res/img/covers/13.jpg' alt='art'/></a>
</div>

carousel init options :

{
	noWrap: true,
	indicators: true,
	shift: 20,
	padding: 00,
	dist: -20,
	onCycleTo: function(e){console.log(e);}
}

Context

i just tried the code and found that strange bug...

Your Environment

• Version used: 1.0 release
• Browser Name and version: Chrome 77.0, Firefox 69.0
• Operating System and version (desktop or mobile): Windows 7
• Link to your project : The content might change over the time : https://kagescan.legtux.org/scan-dev/kagerou-days/

[doughballs]

@LoganTann

Interesting. What happens if you set:

'numVisible':3

Can you make a code pen so I can have a play around?

[LoganTann]

Sorry for the late reply...
Here is the pen : https://codepen.io/shinprog/pen/oNNgJee
instructions to produce the issue is inside :)

[LoganTann]

Bug might be found

Seems like it is due to :

let clickedIndex = $(e.target)
          .closest('.carousel-item')
          .index();

The script get the index of the clicked item. usually, The user will click inside the .carousel-item class but if I click in the .carousel but not in a carousel-item then it triggers a -1 index.
I don't know if I explained it well, I hope that the reader of my message will understand...

How to improve and fix the bug

At the moment I don't have a developement environment to fix the bug, build the code and do tests 😞 . If someone would be kind enough to correct that for me 🙏 .
We could replace the line 317 : this._cycleTo(clickedIndex); by :

if (clickedIndex<0) {
  if (e.clientX - e.target.getBoundingClientRect().left > this.el.clientWidth/2) { // relative x position > center of carousel = clicked at the right part of the carousel
    this.next();
  } else {
    this.prev();
  }
} else{
  this._cycleTo(clickedIndex);
}

[pwcreative]

@LoganTann

You were right:

https://codepen.io/doughballs/pen/rNNxKZW

How are you compiling/using js for your project? I amended the js component for the carousel and it works in the forked codepen. I just copied and pasted it at the top of the js in the codepen.

Looks like this doesn't break the component when noWrap is false. I've never done a pull request before or done any testing so could be a good one to start on! Or someone more advanced can take care of it.

[LoganTann]

Closing as completed here : materializecss#187