Carousel full height

Topic: Carousel full height

Alberto pro asked 6 years ago

Hello, the latest version seems to have introduced a few bugs. Mainly now the full page carousel does not respond to scrolling up and down. You could see the behaviour at dev.vetspresso.com. <mdb-carouselid="top-section" #carouselclass="carousel slide carousel-fade " [isControls]="true" [animation]="animation" [interval]="interval" [noPause]="noPauseSlides" [noWrap]="noWrapSlides" [(activeSlide)]="activeSlideIndex" > <mdb-slide>  <divclass="view hm-indigo-light">  <videoclass="video-fluid"autoplayloop> <sourcesrc="https://mdbootstrap.com/img/video/Lines.mp4"type="video/mp4"/> </video> <divclass="mask waves-light"mdbRippleRadius></div> </div>  <divclass="carousel-caption"> <divclass="animated fadeInDown"> <h3class="h3-responsive">Light mask</h3> <p>First text</p> </div> </div>  </mdb-slide> </mdb-carousel>

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Hi Alberto, I've looked deeper on your's problem, and i forgot, that for proper working on mobile devices, it needed to use HammerJS in your's app.module and app.component. Please read this instruction: http://mdbootstrap.com/angular/advanced/mobile . I've made today few updates to it. Now everything is working fine! Best Regards, Damian

Add comment

Alberto pro answered 6 years ago

0 0 Best answer

See following code

<mdb-carousel class="carousel slide carousel-fade h-75" id="top-section" ng-reflect-no-wrap="false" ng-reflect-no-pause="false" ng-reflect-is-controls="true" ng-reflect-class="carousel slide carousel-fade h" ng-reflect-animation="fade" ng-reflect-active-slide="0" ng-reflect-interval="50000"><div tabindex="0" class="carousel carousel slide carousel-fade h-75 " style="<span style="text-decoration: underline"><em><strong>touch-action:none;</strong></em></span> user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<div>
<div>I used the following hack to fix  it. I thought I share in case somebody else runs in the same predicament. However I believe you should:</div>
<div>1) fix it asap please,</div>
<div>2) refrain from setting styles directly and use scss or if you are altering the dom in code use the renderer2 and do it via classes so that they can be overridden</div>
<div></div>
<div>@ViewChild('carousel') _carousel;</div>
<div><strong>constructor</strong>(privateref:ElementRef, privaterenderer:Renderer2, privaterouter:Router, privateappConfigService:AppConfigService)</div>
<div>{ // nothing here }</div>
<div></div>
<div><strong>ngOnInit()</strong> {</div>
<div>// Hack to fix no scrolling when view is 100%</div>
<div>constcarousel=this._carousel;</div>
<div>constinnerCarouselDiv=carousel.el.nativeElement.children['0'];</div>
<div>this.renderer.removeStyle(innerCarouselDiv, 'touch-action');</div>
<div>}</div>
</div>
<div></div>
<div>Cheers</div>
<div>Alberto</div>
<div></div>

Please insert min. 20 characters.

Ok after wasting an entire day, i found out the issue is that somewhere in your code (i assume) you set a style that specifies touch-action:none on the div that is a direct child of the mdb-carousel. Can't figure out what possessed whoever put that style in place to do so. See following code <mdb-carousel class="carousel slide carousel-fade h-75" id="top-section" ng-reflect-no-wrap="false" ng-reflect-no-pause="false" ng-reflect-is-controls="true" ng-reflect-class="carousel slide carousel-fade h" ng-reflect-animation="fade" ng-reflect-active-slide="0" ng-reflect-interval="50000"><div tabindex="0" class="carousel carousel slide carousel-fade h-75 " style="touch-action:none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">

I used the following hack to fix it. I thought I share in case somebody else runs in the same predicament. However I believe you should:

1) fix it asap please,

2) refrain from setting styles directly and use scss or if you are altering the dom in code use the renderer2 and do it via classes so that they can be overridden

@ViewChild('carousel') _carousel;

constructor(privateref:ElementRef, privaterenderer:Renderer2, privaterouter:Router, privateappConfigService:AppConfigService)

{ // nothing here }

ngOnInit() {

// Hack to fix no scrolling when view is 100%

constcarousel=this._carousel;

constinnerCarouselDiv=carousel.el.nativeElement.children['0'];

this.renderer.removeStyle(innerCarouselDiv, 'touch-action');

}

Cheers

Alberto

Alberto pro commented 6 years ago

Oh also please change your angular example to use actual angular. You have a link to full page carousel in the angular section that when clicked shows the jquery version of the carousel.

Damian Gemza staff commented 6 years ago

Thanks for your's advice Alberto. We'll fix this in next release! Best Regards, Damian

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Hi Alberto, On which browser did you tested it? I've checked your's page on Firefox @ Ubuntu, and i'm able to scroll page down in your's fullpage video carousel. Best Regards, Damian

Alberto pro commented 6 years ago

Hi you need to use a touch based screen. I tested it on 3 android devices and a microsoft surface on IE, Chrome, opera and FF. If you use the scroll bars it scrolls, if you use touch to scroll the page up and down it does not. If you use the menu (e.g about us --> Testimonials) it scrolls down then you can scroll the page with touch unless you go back all the way up to the carousel then you can't scroll anymore. You can imagine how urgent it is as it's the first page the users will see when getting to the site...

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Alberto

Pro User 22Support score
17Questions 11Answers 0Snippets