CSS Carousel for Mobile

0
My mobile app makes use of the listview and default css side-scroller with some customizations.  I'm trying to augment that functionality with small, round navigational dots.  Similar to the ones in this jsfiddle I found.  http://jsfiddle.net/zR4qL/118/ I'm not familiar with how to implement something like this as there are the HTML and JS aspects.  I understand the code, just not how it melds within the modeler. Like if I have to use additional js/jquery, html or css snippets from the app store or what the best option would be. /* ========================================================================== Listview side-scroller ========================================================================== */ .side-scroller.mx-listview { margin-top: 20px; ul.mx-list.mx-list-striped.mx-listview-list{ width: 100vw; height: 165px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; } .mx-listview-item { border-radius: 4px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); background-color: #fff; padding: 10px; display: inline-block; margin-bottom: 0; height: 161px; margin-left: 15px; vertical-align: top; .form-group{ text-align: center; padding: 0 15px; .control-label{ font-weight: 600; color: $text-dark; } .form-control-static{ font-weight: 400; color: brand-default; } } &:first-child { border-radius: 0; } &:last-child { border-radius: 0; margin-bottom: 0; //border-bottom: 1px solid $gray-primary; } } .mx-listview-item:last-child{ margin-right: 15px; } &.tips{ margin-top: 0; ul.mx-list.mx-list-striped.mx-listview-list{ height: 310px; } .mx-listview-item { width: 90vw; padding: 0; height: 284px; border-radius: 4px; img{ width: 325px; border-top-left-radius: 4px; border-top-right-radius: 4px; } .tip-content{ padding: 16px; } .h4 .formatstring, p{ white-space: normal; } .tip-adjust-mobile { position: relative; box-sizing: content-box; max-height: 90px; white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis; } } .btn.mx-button.mx-listview-loadMore{ display: none; } } } /* ========================================================================== Listview side-scroller Services ========================================================================== */ .side-scroller-services.mx-listview { margin-top: 0; ul.mx-list.mx-list-striped.mx-listview-list { width: 100vw; height: 135px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; } .mx-listview-item { width: 92vw; display: inline-block; height: 135px; margin-left: 15px; } .mx-listview-item:last-child { margin-right: 15px; } }  
asked
4 answers
0

Hi Andrew,

If you want to add custom html or javascript to your application you can use the html / javascript snippet widget. 

https://appstore.home.mendix.com/link/app/56/Mendix/HTML/-JavaScript-Snippet

 

But before you get started, have you seen the carousel widget in the app store? Hopefully that does everything you need it to do.

https://appstore.home.mendix.com/link/app/47784/Mendix/Carousel

 

 

answered
0

There are some carousel widgets available that might meet your needs. For carousels that show images, search "carousel" in the app store. For one that shows Mendix pages: https://github.com/tieniber/FormCarousel

answered
0

Maybe using a carousel isn't the way to go for my needs.  Since I already have the scrolling effect desired, what would be the best method to add a series of dots using pseudo classes to my existing css that shows the user a) there is more than one item to be scrolled through and b) which one is being viewed.  Any suggestions are appreciated. 

I have my css for the dots, just need to tie them to each item, however many are on the list.  I'm sure I'm overlooking something simple.

answered
0

Hi Andrew, maybe you should check out the IoT Logistics app in the mendix gallery. You can preview the mobile app, and there are some page controls that shows temp. light and humidity. I'm not sure how it's exactly made, but it's on my wishlist for sure:)

Is this the thing you need or?

answered