Has anyone used Materialize in the past? Strange carousel bug

Has anyone used Materialize in the past? Strange carousel bug
0

#1

Hello, I’m working on my portfolio as I am now done all the front end challenges. I’m using Materialize as a front end framework.

My site uses a carousel to display some of my recent projects. I’ve implemented the carousel following the code here http://materializecss.com/carousel.html. all of the images in my carousel link to an individual project page which will contain a little bit of information about the project.

The bug is this: when the users spins the carousel forwards from the current image (ie they click an image to the right of the currently active image) the next image will properly link to the project page.

However, when the user spins the carouself backwards from the current image (ie. they click an image to the left of the currently active image) the next image will appear but the link will not work.

I’ve some other users mentioning this on github and it seems like no one is able to get this to work correctly. A video of the problem can be seen here https://vimeo.com/194631609.

Has anyone experienced this in the past/Have any suggestions or workarounds?

My code if anyone is curious:

div.carousel
  a(href="/projects/twitch_viewer").carousel-item: img(src="http://res.cloudinary.com/ddbeeuyr4/image/upload/v1486764480/twitch_viewer_nb_neyobf.png")
  a(href="/projects/wiki_view").carousel-item: img(src="http://res.cloudinary.com/ddbeeuyr4/image/upload/v1486764480/wiki_view_nb_si5smv.png")
  a(href="/projects/simon").carousel-item: img(src="http://res.cloudinary.com/ddbeeuyr4/image/upload/v1486764480/simon_nb_yoqoh1.png") 
  a(href="/projects/tic_tac_toe").carousel-item: img(src="http://res.cloudinary.com/ddbeeuyr4/image/upload/v1486764480/tic_tac_toe_nb_by5m14.png")
  a(href="/projects/pomodoro").carousel-item: img(src="http://res.cloudinary.com/ddbeeuyr4/image/upload/v1486764480/pomodoro_nb_x7043d.png")
  a(href="/projects/asteroids_ai").carousel-item: img(src="http://res.cloudinary.com/ddbeeuyr4/image/upload/v1486764480/asteroids_ai_nb_ibulb5.png")
  a(href="/projects/ween_scraper").carousel-item: img(src="http://res.cloudinary.com/ddbeeuyr4/image/upload/v1486764480/generic_code_nb_e3pil6.png")
  a(href="/projects/automate_daily_reports").carousel-item: img(src="http://res.cloudinary.com/ddbeeuyr4/image/upload/v1486764480/generic_code_nb_e3pil6.png")


#2

There is a bug in their library.

        function click(e) {
          // Disable clicks if carousel was dragged.
          if (dragged) {
            e.preventDefault();
            e.stopPropagation();
            return false;

          } else if (!options.fullWidth) {
            var clickedIndex = $(e.target).closest('.carousel-item').index();
            var diff = (center % count) - clickedIndex;

            // Disable clicks if carousel was shifted by click
            if (diff !== 0) {
              e.preventDefault();
              e.stopPropagation();
            }
            cycleTo(clickedIndex);
          }
        }

This function determines what happens when the item is clicked. When you scroll left and click the link diff ends up being -8 instead of 0, which triggers the e.preventDefault(), which stops the link from navigating.

If you want to get it working, you’ll have to figure out where diff is set in their javascript and correct their logic or submit an issue.


#3

Glancing at it again, It turns out the problem is their use of % in this statement:

var diff = (center % count) - clickedIndex;

In javascript, % is the remainder operator not the modulo operator.

In other languages, the modulo operator would work in this case (with negative numbers).

In javascript, -1 % 8 = -1 (not 7).

You could fix it yourself by handling negatives better in their library.

I see they have over 1000+ open issues and nearly 300 pull requests… you can add to the pile if you want. I’d steer clear of their lib personally.


#4

@cjsheets, thank you very much for this digging into the problem to this extent.

I have forked a copy of materialize on github and cloned it to my local machine. I’ve found the code that you’re referencing and I would like to make changes but I’m having trouble understanding how I can view the effects of my changes to the code (ie. I want to see if my changes actually fix the problem).

In the repo there looks to be several files that have this bit of code in it. There is materialize/bin/materialize.js (which looks to be a minified version of all the code in the project). There is also materialize/dist/js/materialize.js which is the non minified version of all the code (8000+ lines). Then, there is also materialize/js/carousel.js which contains only the carousel logic. I am making an assumption that this is the best place to make the change because it is the most compartmentalized, but I don’t understand how the change here will be reflected in the other files that also contain this carousel code.

For example, how are the changes updated in the minified versions? Or, even in the non-minified 8000+ line file? Is this something grunt/gulp handles? I haven’t any experience with these tools but am curious about them.

Would it be possible for me to set up a carousel that uses MY updated code specifically? I’m just not sure how I can do this (perhaps <script> set to my local repo…? but again, how do I change the code across all the files, minified files etc!)

This is a bit rambly and I hope it makes sense. I’ve always wanted to try to contribute to open source and I figured this might be a great way to get my feet wet.

Again thanks so much for taking an in-depth look at this bug