Full Page Carousel

Topic: Full Page Carousel

Blissy pro asked 7 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.

Add comment

Michal Szymanski staff pro premium priority answered 7 years ago

0 0 Best answer

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 7 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 pro premium commented 7 years ago

What's your version of MDB?

Add comment

Blissy pro answered 7 years ago

0 0 Best answer

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?

Add comment

Blissy pro answered 7 years ago

0 0 Best answer

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

Bartłomiej Malanowski staff pro premium commented 7 years ago

Please share your code with us

Add comment

Blissy pro answered 7 years ago

0 0 Best answer

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>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">  <link href="css/bootstrap.min.css" rel="stylesheet">  <link href="css/mdb.min.css" rel="stylesheet">  <link href="css/style.css" rel="stylesheet"> </head> <body>  <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>   <div id="carousel-example-1" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false">  <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>   <div class="carousel-inner" role="listbox">  <div class="carousel-item active">  <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>  </div>   <div class="carousel-item">  <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>  </div>   <div class="carousel-item">  <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>  </div>  </div>   <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>  </div>   <footer class="page-footer center-on-small-only">  <div class="container-fluid"> <div class="row">  <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>  <hr class="hidden-md-up">  <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>  <hr class="hidden-md-up">  <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>  <hr class="hidden-md-up">  <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>  </div> </div>  <hr>  <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>   <div class="footer-copyright"> <div class="container-fluid"> © 2015 Copyright: <a href="https://mdbootstrap.com"> MDBootstrap.com </a> </div> </div>  </footer>    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>  <script type="text/javascript" src="js/tether.min.js"></script>  <script type="text/javascript" src="js/bootstrap.min.js"></script>  <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

Add comment

Mikołaj Smoleński staff answered 7 years ago

0 0 Best answer

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

Add comment

Blissy pro answered 7 years ago

0 0 Best answer

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.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

User: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

About author

Blissy

Pro User

15Support score
5Questions 10Answers

0Snippets likes 0Snippets