1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Full Page Carousel

Blissy pro asked 6 years ago

Hi, I cant find the lesson named "Creating full page carousel" could you possibly send me a link to it or the necessary coding needed to produce a full page carousel. Thanks.

Blissy pro answered 6 years ago

Just to let you know Mikolaj, i changed tether.min.js to js/popper.min.js, the  js/popper.min.js was already in my ‘js’ folder and it still didn't work. Then I noticed that the JQuery  link in my HTML was  ”js/jquery-3.1.1.min.js”  and in the js folder it was jQuery v3.2.1. So, i changed the link to ”js/jquery-3.2.1.min.js” and everything is working okay now.

Mikołaj Smoleński staff answered 6 years ago

Hi Paul, Please change 'tether.min.js' to 'popper.min.js' and everything sholud work correctly. After changes it will look like this: <script type="text/javascript" src="js/popper.min.js"></script> You also need to download that script and place it in 'js' folder. Regards

Blissy pro answered 6 years ago 

Start your code here
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Material Design Bootstrap</title> <!-- Font Awesome --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css"> <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Material Design Bootstrap --> <link href="css/mdb.min.css" rel="stylesheet"> <!-- Template styles --> <link href="css/style.css" rel="stylesheet"> </head> <body>   <!--Navbar--> <nav class="navbar navbar-toggleable-md navbar-dark scrolling-navbar fixed-top"> <div class="container"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapseEx2" aria-controls="collapseEx2" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#"> <strong>Navbar</strong> </a> <div class="collapse navbar-collapse" id="collapseEx2"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link">Features</a> </li> <li class="nav-item"> <a class="nav-link">Pricing</a> </li> <li class="nav-item btn-group"> <a class="nav-link dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu" aria-labelledby="dropdownMenu1"> <a class="dropdown-item">Action</a> <a class="dropdown-item">Another action</a> <a class="dropdown-item">Something else here</a> </div> </li> </ul> <form class="form-inline waves-effect waves-light"> <input class="form-control" type="text" placeholder="Search"> </form> </div> </div> </nav> <!--/.Navbar--> <!--Carousel Wrapper--> <div id="carousel-example-1" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false"> <!--Indicators--> <ol class="carousel-indicators"> <li data-target="#carousel-example-1" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-1" data-slide-to="1"></li> <li data-target="#carousel-example-1" data-slide-to="2"></li> </ol> <!--/.Indicators--> <!--Slides--> <div class="carousel-inner" role="listbox"> <!--First slide--> <div class="carousel-item active"> <!--Mask--> <div class="view hm-black-light"> <div class="full-bg-img flex-center"> <ul class="animated fadeInUp col-md-12"> <li> <h1 class="h1-responsive flex-item">Material Design for Bootstrap 4</h1> </li> <li> <p class="flex-item">The most powerful and free UI KIT for Bootstrap</p> </li> <li> <a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-primary btn-lg flex-item">Sign up!</a> </li> <li> <a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default btn-lg flex-item">Learn more</a> </li> </ul> </div> </div> <!--/.Mask--> </div> <!--/.First slide--> <!--Second slide --> <div class="carousel-item"> <!--Mask--> <div class="view hm-black-light"> <div class="full-bg-img flex-center"> <ul class="animated fadeInUp col-md-12"> <li> <h1 class="h1-responsive">Lots of tutorials at your disposal</h1> </li> <li> <p>And all of them are FREE!</p> </li> <li> <a target="_blank" href="https://mdbootstrap.com/bootstrap-tutorial/" class="btn btn-primary btn-lg">Start learning</a> </li> </ul> </div> </div> <!--/.Mask--> </div> <!--/.Second slide --> <!--Third slide--> <div class="carousel-item"> <!--Mask--> <div class="view hm-black-light"> <div class="full-bg-img flex-center"> <ul class="animated fadeInUp col-md-12"> <li> <h1 class="h1-responsive">Visit our support forum</h1></li> <li> <p>Our community can help you with any question</p> </li> <li> <a target="_blank" href="https://mdbootstrap.com/forums/forum/support/" class="btn btn-default btn-lg">Support forum</a> </li> </ul> </div> </div> <!--/.Mask--> </div> <!--/.Third slide--> </div> <!--/.Slides--> <!--Controls--> <a class="carousel-control-prev" href="#carousel-example-1" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carousel-example-1" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> <!--/.Controls--> </div> <!--/.Carousel Wrapper--> <!--Footer--> <footer class="page-footer center-on-small-only"> <!--Footer Links--> <div class="container-fluid"> <div class="row"> <!--First column--> <div class="col-md-3 offset-md-1"> <h5 class="title">ABOUT MATERIAL DESIGN</h5> <p>Material Design (codenamed Quantum Paper) is a design language developed by Google. </p> <p>Material Design for Bootstrap (MDB) is a powerful Material Design UI KIT for most popular HTML, CSS, and JS framework - Bootstrap.</p> </div> <!--/.First column--> <hr class="hidden-md-up"> <!--Second column--> <div class="col-md-2 offset-md-1"> <h5 class="title">First column</h5> <ul> <li><a href="#!">Link 1</a></li> <li><a href="#!">Link 2</a></li> <li><a href="#!">Link 3</a></li> <li><a href="#!">Link 4</a></li> </ul> </div> <!--/.Second column--> <hr class="hidden-md-up"> <!--Third column--> <div class="col-md-2"> <h5 class="title">Second column</h5> <ul> <li><a href="#!">Link 1</a></li> <li><a href="#!">Link 2</a></li> <li><a href="#!">Link 3</a></li> <li><a href="#!">Link 4</a></li> </ul> </div> <!--/.Third column--> <hr class="hidden-md-up"> <!--Fourth column--> <div class="col-md-2"> <h5 class="title">Third column</h5> <ul> <li><a href="#!">Link 1</a></li> <li><a href="#!">Link 2</a></li> <li><a href="#!">Link 3</a></li> <li><a href="#!">Link 4</a></li> </ul> </div> <!--/.Fourth column--> </div> </div> <!--/.Footer Links--> <hr> <!--Call to action--> <div class="call-to-action"> <h4>Material Design for Bootstrap</h4> <ul> <li> <h5>Get our UI KIT for free</h5></li> <li><a target="_blank" href="https://mdbootstrap.com/getting-started/" class="btn btn-info">Sign up!</a></li> <li><a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-default">Learn more</a></li> </ul> </div> <!--/.Call to action--> <!--Copyright--> <div class="footer-copyright"> <div class="container-fluid"> © 2015 Copyright: <a href="https://mdbootstrap.com"> MDBootstrap.com </a> </div> </div> <!--/.Copyright--> </footer> <!--/.Footer-->   <!-- SCRIPTS --> <!-- JQuery --> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <!-- Bootstrap tooltips --> <script type="text/javascript" src="js/tether.min.js"></script> <!-- Bootstrap core JavaScript --> <script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- MDB core JavaScript --> <script type="text/javascript" src="js/mdb.min.js"></script>   </body> </html>   CSS /* TEMPLATE STYLES */   /* Navigation*/ .navbar { background-color: transparent; } .scrolling-navbar { -webkit-transition: background .5s ease-in-out, padding .5s ease-in-out; -moz-transition: background .5s ease-in-out, padding .5s ease-in-out; transition: background .5s ease-in-out, padding .5s ease-in-out; } .top-nav-collapse { background-color: #667490; } footer.page-footer { background-color: #667490; margin-top: 0; } @media only screen and (max-width: 768px) { .navbar { background-color: #667490; } } /* Necessary for full page carousel*/ html, body, .view { height: 100%; } /* Carousel*/ .carousel, .carousel-item, .active { height: 100%; } .carousel-inner { height: 100%; } .carousel-item:nth-child(1) { background-image: url("https://mdbootstrap.com/img/Photos/Others/img%20(50).jpg"); background-repeat: no-repeat; background-size: cover; } .carousel-item:nth-child(2) { background-image: url("https://mdbootstrap.com/img/Photos/Others/img%20(41).jpg"); background-repeat: no-repeat; background-size: cover; } .carousel-item:nth-child(3) { background-image: url("https://mdbootstrap.com/img/Photos/Others/img%20(49).jpg"); background-repeat: no-repeat; background-size: cover; } /*Caption*/ .flex-center { color: #fff; } @media (min-width: 776px) { .carousel .view ul li { display: inline; } .carousel .view .full-bg-img ul li .flex-item { margin-bottom: 1.5rem; } } Regards Paul  

Blissy pro answered 6 years ago

  My  version of MDB:- * Material Design for Bootstrap 4 * Version: MDB PRO 4.4.1

Bartłomiej Malanowski staff commented 6 years ago

Please share your code with us

Blissy pro answered 6 years ago

Thanks for your reply Michal. I have copied all the code over including the template css but the carousel is not moving. Any idea why?

Michal Szymanski staff answered 6 years ago

Hi. This tutorial was outdated and we removed it. If you want to use such a carousel you can just grab a code from this example: https://mdbootstrap.com/previews/docs/latest/html/carousel/image/index.html

Blissy pro commented 6 years ago

Thanks for your reply Michal. I have copied all the code over including the template css but the carousel is not moving. Any idea why?

Bartłomiej Malanowski staff commented 6 years ago

What's your version of MDB?
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: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
Blissy
Pro User 15Support score
5Questions 10Answers 0Snippets