1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: mdb-carousel scrolling down

Adrian Dragomir free asked 4 years ago

I have a 100vh height mdb-carousel slider in my header on mobile (Android/Chrome) but can't swipe to scroll down the page. Side swipe to trigger slide transitions works fine but no page scrolling is happening on upward or downward swipe. Using version mdb-angular-free-8.6.0.

Any help appreciated! Thanks!

Bartosz Termena staff commented 4 years ago

Hi!

Could you show me your code?

Best Regards, Bartosz.

Adrian Dragomir free commented 4 years ago

Yes, of course.

app.component.html A carousel with controls and indicators from https://mdbootstrap.com/docs/angular/advanced/carousel/

Plus some text:

      <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

      <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>

Adrian Dragomir free commented 4 years ago

app.component.scss .carousel { height: 100vh;}

.carousel .carousel-inner { height: 100vh;}

.carousel .carousel-inner .carousel-item,.carousel .carousel-inner .active { height: 100vh;

}

Bartosz Termena staff answered 4 years ago

Hi!

Try to add to your styles this line:

.carousel .carousel-inner {
  height: 100vh;
  overflow-y: scroll; <------
}

Hope it helps!

Best Regards, Bartosz.

Adrian Dragomir free commented 4 years ago

Thank you very much, it is working. But on the desktop browser it appeared a second scroll bar so I modified the setting to overflow-y: auto; and now it is working on both, desktop and mobile. Thank you again. Adrian
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Resolved

Specification of the issue
  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.6.0
  • Device: any
  • Browser: Chrome
  • OS: Android
  • Provided sample code: No
  • Provided link: No
Tags
mdb-carousel
About author
Adrian Dragomir
70Support score
5Questions 4Answers 1Snippets