method moveRight doesn't work Or RTL support issues

[MortezaT]

• I'm submitting a ...
  • bug report
• What is the current behavior?
  I got one issue report and one question to ask.
  1- I think currIndex has been set out of array boundary by mistake In function CurrentChildWith (line 274) and it should be set to length - 1 - just like the if statement's condition -. this stops move right
  2- I think there are lots of problems with RTL support since reachesRightBound is emits false in the very beginning and moveLeft works even after reaching left bound but it's not the same on right bound.

[bfwg]

Hi @MortezaT , sorry for the delayed response. Can you give me some reproducing steps and a use case so I can take a closer look? Thanks!

[MortezaT]

Hi @bfwg, Thanks for the response.
Currently I'm pretty busy with some other stuff, but I'll do it ASAP.

[bfwg]

No problem, take your time.

[MortezaT]

here you can see my implementation. I hope this helps with the problem.

[bfwg]

Hi @MortezaT , 2.0.0-beta.2 is out, let me know it made your implementation issue worst or better. Thanks!

[MortezaT]

Neither beta.2 nor beta.3 worked at all.
they both come up with error which suggests that it hasn't been recognized by angular. Here is the error:

 Can't bind to 'scrollbar-hidden' since it isn't a known property of 'div'.

Did I miss something?

[bfwg]

Hi @MortezaT , 2.0.0 uses drag-scroll as the carousel host element instead of div. Also, to mark child elements, we need to use drag-scroll-item directive.

  <drag-scroll>
    <img drag-scroll-item src="some-url" />
    <img drag-scroll-item src="some-url" />
    <img drag-scroll-item src="some-url" />
  </drag-scroll>

More information can be found in the README.md.

Cheers.

[MortezaT]

Hi @bfwg Thanks.
Is there any documentation for the new version, because It looks like they're way too different.
I can't understand why there is 20px addition to the width and height of .drag-scroll-content.

[bfwg]

To hide the scroll bar, we need to create a new wrapper div and insert the div between the parent div and the carousel div(.drag-scroll-content).

For example:
This is a normal carousel

When we try to hide the scrollbar, there is no magic! We simply create a wrapper div, and set the size of that wrapper div as the same as container div but minus its scrollbar width/height. The 20px is the height/weight of the scrollbar in the current browser.

Finally, we detach the container div, attach the wrapper div to parent div and insert the container div back to the wrapper div.

Since the wrapper's overflow attribute has been set to 'hidden', the scrollbars are no longer shown.
I hope my drawing skill is still up to the game 😛

Let me know if you have more questions, or if the new version is causing you any issues.

Thanks!

[MortezaT]

@bfwg
Thanks. Now with this visual explanation everything is obvious for me and I confess this is a smart idea.
Everything looks fine except the very first time navigation. I have to drag a little bit before ( just a bit not a complete photo) to get navs working.
Meanwhile method moveRight works at the moment and moves scroll to the left (end)

[bfwg]

I am going to close this issue. Please let me know if I need to reopen this. Thanks!

[nicholasirsyad]

Dear @bfwg

In my case, when the webapp is opened in different sized windows sometimes the reachesRightBound or the moveRight() method does not work. Sometimes reachesRightBound does not return true when the carousel's already showing the last item.

It depends on the width of the windows too. When I dragged the window, my carousel adjust the width because I set it to width: 100%. But at certain widths, it seems the carousel is stuck - there seems to be an extra padding at the right that moveRight() wouldn't scroll. So the value for reachesRightBound always return false, even though it's already at the right most item.