Looking to create a unique vertical scrolling "carousel" using Google's Materialize CSS library. I have a good understanding of the steps required to construct a carousel.
# haml
%ul.carousel
%li.carousel-item
Some Content
%li.carousel-item
Some other Content
...
$(document).ready(function(){
%('.carousel').carousel({
some: 'option',
})
})
Wondering if there is an option that can be included in either the HTML or JavaScript to enable vertical scrolling?
Upon inspection, it appears that the JavaScript adds the class '.scrolling' to the '.carousel' when the animation commences, resulting in the following styles being applied:
.carousel.scrolling{style="z-index: 0; opacity: 1; visibility: visible;
transform: translateX(0px) translateX(5.64957px) translateX(0px)
translateZ(0px);"}
Is there a method to modify the translateX to translateY? I have experimented with adding styles such as:
.carousel{
display: flex;
flex-direction: column;
}