Hello @mdb2 @tommyw

Your problem is caused by this, that if you want to scroll over carousel in mobile view, you have to use the HammerJS in your application. Without Hammer, you're not able to scroll over Carousel while in mobile view.

Please take a look at our Mobile docs page - there's everything which you have to know about using HammerJS for mobile carousel.

Best Regards,

Damian

Thank you for all the details. We will take a closer look at this problem and try to provide a fix or workaround for that.

I have the same problem with carousels overall on mobiles, iPhone at least.. I have a tiny internal concept site, https://sustainableinvesting.azurewebsites.net. It works as it should, but on my iPhone, I cannot scroll up/down if I swipe on the carousel images. if I swipe below the carousel it works as it should. This is the same on all my websites and code is just a plain carousel with an w-100 image. It's been the same since early 6.x and same with latest Angular MDB version. It's not the hugest problem, but irritating and hopeless if carousel takes up a large portion on the screen height - you just cannot scroll at all..

Very simple setup. Inside the modal:

<mdb-carousel class="carousel" [noWrap]="true" [interval]="'0'">
  <mdb-carousel-item>
    <img class="d-block" src="assets/images/welcome.gif">
    <p class="caption">
      bla bla
    </p>
  </mdb-carousel-item>
  <mdb-carousel-item>
    <h3>Header</h3>
    <ol>
      <li>bla bla</li>
      <li>bla bla</li>
      <li>bla bla</li>
      <li>bla bla</li>
      <li>bla bla</li>
    </ol>
  </mdb-carousel-item>
  <mdb-carousel-item>
    <h3>Header</h3>
    <ol>
      <li>bla bla</li>
      <li>bla bla</li>
      <li>bla bla</li>
      <li>bla bla</li>
      <li>bla bla</li>
    </ol>
  </mdb-carousel-item>
  <mdb-carousel-item>
    <h3>Header</h3>
    <ol>
      <li>bla bla</li>
      <li>bla bla</li>
      <li>bla bla</li>
      <li>bla bla</li>
      <li>bla bla</li>
    </ol>
  </mdb-carousel-item>
</mdb-carousel>

The modal code is:

<div style="overflow-y: auto" mdbModal #genericFormModal="mdb-modal" class="modal fade modal-ext"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">    
      <div class="modal-header white-text" >
        <button type="button" class="close" aria-label="Close" (click)="genericFormModal.hide()">
          <span aria-hidden="true">×</span>
        </button>
        <p class="heading">         
          {{ title }}
        </p>
          </div>

// Here is where the content code entered

        </div>
  </div>
</div>

Could you provide the code on which we will be able to debug this problem?