mdickie free asked 6 years ago


please can i get the codes for a full page carousel slider in bootstrap 4

Anna Morawska staff answered 6 years ago


Hi,

If you want to use our full page carousel slider component, please check out our documentation and live preview here.

There are few examples. You can choose whatever you like, depending on the type of account you have.

If you want it to become full-page, just add following code to your css file:

/* Necessary for full page carousel*/

html,
body,
.view {
 height: 100%;
}

/* Carousel*/

.carousel,
.carousel-item,
.carousel-item.active {
 height: 100%;
}

.carousel-inner {
 height: 100%;
}

.carousel-item:nth-child(1) {
 background-image: url("https://mdbootstrap.com/img/Photos/Others/images/76.jpg");
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center center;
}

.carousel-item:nth-child(2) {
 background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/30.jpg");
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center center;
}

.carousel-item:nth-child(3) {
 background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img%20(10).jpg");
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center center;
}

Is this resolve your problem?

Best regards,
Ania


mdickie free commented 6 years ago

thanks


Please insert min. 20 characters.

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: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags