Full page carousels Angular

Topic: Full page carousels Angular

Mr Song pro asked 8 years ago

How to Full page carousels?

Add comment

Damian Gemza staff answered 8 years ago

Hi Janis, You have to edit _carousel.scss file located in: /scss/angular/free/ directory. Edit:

.carousel-item.active, .carousel-item-next, .carousel-item-prev {

display: flex;

overflow: hidden;

}

to looks like:

.carousel-item.active, .carousel-item-next, .carousel-item-prev {

display: flex;

overflow: hidden;

height: 100vh;

}

Best Regards, Damian

Tolulope J. Adetula free commented 7 years ago

it didnt work for me, it just brought the carousel to the middle. although the width is still 100%

Damian Gemza staff commented 7 years ago

Hello Tolulope, Please remember, that you have to use full hd images (1920x1080px). If images will be smaller, you won't be able to make full page carousel. Best Regards, Damian

Add comment

Dawid Adach pro answered 8 years ago

0 0 Best answer

Please insert min. 20 characters.

Dear songangular, please use the following, make sure to use pictures which are big enough:

<!--Carousel Wrapper-->

<mdb-carousel [animation]="'slide'">

<!--First slide-->

<mdb-slide>

<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="First slide">

</mdb-slide>

<!--/First slide-->

<!--Second slide-->

<mdb-slide>

<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(129).jpg" alt="Second slide">

</mdb-slide>

<!--/Second slide-->

<!--Third slide-->

<mdb-slide>

<img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" alt="Third slide">

</mdb-slide>

<!--/Third slide-->

</mdb-carousel>

<!--/.Carousel Wrapper-->

Janis Leicis free commented 8 years ago

Hi! I also interested how to implement Full page carousels. Your Full page carousel example on https://mdbootstrap.com/wp-content/themes/mdbootstrap4/Tutorials/bootstrap/III-1/index.html use css not scss, and jQuery not typescript. The code witch you provide for songangular not useful for full page carousel even if I use pictures which are big enough. It takes 100% width but not height. Can you give an example Full page carousel with typescript and scss? or some advice what I have to change in carousel.scss file to get this effect?

Add comment

Dawid Adach pro answered 8 years ago

0 0 Best answer

Dear songangular,

please reffer to our docs:

https://mdbootstrap.com/angular/advanced/carousel/

you can use i.e. this code:
<pre>

<mdb-carousel class="carousel slide" [animation]="'slide'">
 
 <mdb-slide>
 
 <div class="view hm-indigo-light">
 
 <video class="video-fluid" autoplay loop>
 <source src="https://mdbootstrap.com/img/video/Lines.mp4" type="video/mp4" />
 </video>
 <div class="mask waves-light" mdbRippleRadius></div>
 </div>

<div class="carousel-caption">
 <div class="animated fadeInDown">
 <h3 class="h3-responsive">Light mask</h3>
 <p>First text</p>
 </div>
 </div>
 
 </mdb-slide>
 
 
 <mdb-slide>
 
 <div class="view hm-purple-slight">
 
 <video class="video-fluid" autoplay loop>
 <source src="https://mdbootstrap.com/img/video/animation-intro.mp4" type="video/mp4" />
 </video>
 <div class="mask waves-light" mdbRippleRadius></div>
 </div>

<div class="carousel-caption">
 <div class="animated fadeInDown">
 <h3 class="h3-responsive">Super light mask</h3>
 <p>Secondary text</p>
 </div>
 </div>
 
 </mdb-slide>
 
 
 <mdb-slide>
 
 <div class="view hm-black-strong">
 
 <video class="video-fluid" autoplay loop>
 <source src="https://mdbootstrap.com/img/video/cube.mp4" type="video/mp4" />
 </video>
 <div class="mask waves-light" mdbRippleRadius></div>
 </div>

<div class="carousel-caption">
 <div class="animated fadeInDown">
 <h3 class="h3-responsive">Strong mask</h3>
 <p>Third text</p>
 </div>
 </div>
 
 </mdb-slide>
 
</mdb-carousel>
</pre>

Please insert min. 20 characters.

Dear songangular, please reffer to our docs: https://mdbootstrap.com/angular/advanced/carousel/ you can use i.e. this code:

<!--Carousel Wrapper-->
<mdb-carousel class="carousel slide" [animation]="'slide'">
 <!--First slide-->
 <mdb-slide>
 <!--Mask color-->
 <div class="view hm-indigo-light">
 <!--Video source-->
 <video class="video-fluid" autoplay loop>
 <source src="https://mdbootstrap.com/img/video/Lines.mp4" type="video/mp4" />
 </video>
 <div class="mask waves-light" mdbRippleRadius></div>
 </div>

<!--Caption-->
 <div class="carousel-caption">
 <div class="animated fadeInDown">
 <h3 class="h3-responsive">Light mask</h3>
 <p>First text</p>
 </div>
 </div>
 <!--Caption-->
 </mdb-slide>
 <!--/First slide-->
 <!--Second slide-->
 <mdb-slide>
 <!--Mask color-->
 <div class="view hm-purple-slight">
 <!--Video source-->
 <video class="video-fluid" autoplay loop>
 <source src="https://mdbootstrap.com/img/video/animation-intro.mp4" type="video/mp4" />
 </video>
 <div class="mask waves-light" mdbRippleRadius></div>
 </div>

<!--Caption-->
 <div class="carousel-caption">
 <div class="animated fadeInDown">
 <h3 class="h3-responsive">Super light mask</h3>
 <p>Secondary text</p>
 </div>
 </div>
 <!--Caption-->
 </mdb-slide>
 <!--/Second slide-->
 <!--Third slide-->
 <mdb-slide>
 <!--Mask color-->
 <div class="view hm-black-strong">
 <!--Video source-->
 <video class="video-fluid" autoplay loop>
 <source src="https://mdbootstrap.com/img/video/cube.mp4" type="video/mp4" />
 </video>
 <div class="mask waves-light" mdbRippleRadius></div>
 </div>

<!--Caption-->
 <div class="carousel-caption">
 <div class="animated fadeInDown">
 <h3 class="h3-responsive">Strong mask</h3>
 <p>Third text</p>
 </div>
 </div>
 <!--Caption-->
 </mdb-slide>
 <!--/Third slide-->
</mdb-carousel>
<!--Carousel Wrapper-->

Mr Song pro commented 8 years ago

Thank, but I use it for image, it doesn't full screen as "https://mdbootstrap.com/wp-content/themes/mdbootstrap4/Tutorials/bootstrap/III-1/index.html#carousel-example-1"

Mr Song pro commented 8 years ago

I using for Ipad, mobile, and PC but doesn't full screen.In Angular Carousel full page just have live preview and don't have code usage.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Specification of the issue

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

Mr Song

Pro User 20Support score
6Questions 1Answers 0Snippets