Hi, I have a case where I'm using carousel to show menu list on reactive web. When the page load, the list will be loaded with data to show the available menu. The problem is when the page finishes load, some of the item on the list isn't being detected by carousel, as shown on the picture. The one with the smaller button size isn't being detected by the carousel.
There's also several data after 4, it's not being detected, since the arrow is being disabled. When I tried dragging the carousel, you could see that it's showing up, but quickly hide itself after releasing the mouse hold.
When adding new data to the list, The list will work, but the newly added item won't be detected by carousel, and having the same problem as above.
Below are the attached OML for better understanding on the problem. Is there any way to fix this? Or any way to refresh only the carousel when all of the data finishes load without adding any new data to the list?
Thank you,
Felix
Hello Felix,
I checked your oml but I deleted your carousel and adding a new one. I added container first inside list of carousel then added button inside that container and make alignment of container center.
I applied CSS to button to make its width 50% of container and it looks fine.
Please check attached oml.
Please note that Carousel adding default CSS ( except text-align )to its elements as per screenshot below so now after adding container this CSS will be applied to container itself not to button.
Hey Mostafa,Thanks for the OML and reply! After checking on your OML, I've actually found out that the main cause of it was because of the disable-virtualization attribute wasn't set yet. After setting it to true, the carousel works as intended.Thank you for the help and CSS!
Good to know its working fine now and perfect observation for the difference into this attribute of list, I didn't notice it.
Hi @Felix Intan Bahagia ,There is no technical issue with your implementation, the only issue I found is with the UI.Due to that, you are not able to click on the smaller button because the next button appears on the existing button.Hope this helps you.Regards,Anubhav
Hello Rai,Thanks for the reply! I think that it's not only on the UI, since the problem isn't on clicking the smaller button, but the data that's on the carousel itself.On my attached OML, you could check that i've added 7 default data, but it only shows 4 on carousel. You could also try hold and drag the carousel using the mouse, and you'll see that there's actually more data on the carousel, but you can't click the arrow to scroll on it. Best Regards,Felix