CODEWITHSUNDEEP
carouselmaterialize
user3269927
user3269927

Reputation: 21

Materializecss Carousel not showing up

**materializecss carousal doesn't shows up at all. Other elements are working fine.Following is the whole code. I have just started.

I don't know what am i missing.

Please suggest. documentation of materializecss carousal**

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
      <title>Starter Template - Materialize</title>

      <!-- CSS  -->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
      <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
    </head>
    <body>
      <nav class="light-blue lighten-1" role="navigation">
        <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">Logo</a>
          <ul class="right hide-on-med-and-down">
            <li><a href="#">Navbar Link</a></li>
          </ul>

          <ul id="nav-mobile" class="side-nav">
            <li><a href="#">Navbar Link</a></li>
          </ul>
          <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
        </div>
      </nav>
      <div class="container">
          <div class="carousel">
          <a class="carousel-item" href="#one!"><img src="http://lorempixel.com/250/250/nature/1"></a>
          <a class="carousel-item" href="#two!"><img src="http://lorempixel.com/250/250/nature/2"></a>
          <a class="carousel-item" href="#three!"><img src="http://lorempixel.com/250/250/nature/3"></a>
          <a class="carousel-item" href="#four!"><img src="http://lorempixel.com/250/250/nature/4"></a>
          <a class="carousel-item" href="#five!"><img src="http://lorempixel.com/250/250/nature/5"></a>
        </div>
      </div>


      <script type="text/javascript">

          $(document).ready(function(){
        $('.carousel').carousel();
           });
      </script>
      <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src="js/materialize.js"></script>
      <script src="js/init.js"></script>

      </body>
    </html>

Upvotes: 2

Views: 5643

Answers (3)

Nivratti Boyane
Nivratti Boyane

Reputation: 619

If you are using materialize.js with bootstrap.js then after removing bootstrap.js it works perfecttly in my program

Upvotes: 1

Liaqat Saeed
Liaqat Saeed

Reputation: 428

You have to initialize the carosuel after the materialize script tag

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
      <title>Starter Template - Materialize</title>

      <!-- CSS  -->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
      <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
    </head>
    <body>
      <nav class="light-blue lighten-1" role="navigation">
        <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">Logo</a>
          <ul class="right hide-on-med-and-down">
            <li><a href="#">Navbar Link</a></li>
          </ul>

          <ul id="nav-mobile" class="side-nav">
            <li><a href="#">Navbar Link</a></li>
          </ul>
          <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
        </div>
      </nav>
      <div class="container">
          <div class="carousel">
          <a class="carousel-item" href="#one!"><img src="http://lorempixel.com/250/250/nature/1"></a>
          <a class="carousel-item" href="#two!"><img src="http://lorempixel.com/250/250/nature/2"></a>
          <a class="carousel-item" href="#three!"><img src="http://lorempixel.com/250/250/nature/3"></a>
          <a class="carousel-item" href="#four!"><img src="http://lorempixel.com/250/250/nature/4"></a>
          <a class="carousel-item" href="#five!"><img src="http://lorempixel.com/250/250/nature/5"></a>
        </div>
      </div>



      <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src="js/materialize.js"></script>
      <script src="js/init.js"></script>
         <script type="text/javascript">

          $(document).ready(function(){
        $('.carousel').carousel();
           });
      </script>
      </body>
    </html>

Upvotes: 0

Jo&#227;o Pedro R. Carvalho
Jo&#227;o Pedro R. Carvalho

Reputation: 118

After some tests I saw that you put the scripts in the end of your body tag and the browser is not finding jquery.js nor materialize.js.

Try using them in the beggining of your body like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
  <title>Starter Template - Materialize</title>

  <!-- CSS  -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
  <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
  <script src="js/init.js"></script>

  <nav class="light-blue lighten-1" role="navigation">
    <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">Logo</a>
      <ul class="right hide-on-med-and-down">
        <li><a href="#">Navbar Link</a></li>
      </ul>

      <ul id="nav-mobile" class="side-nav">
        <li><a href="#">Navbar Link</a></li>
      </ul>
      <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
    </div>
  </nav>
  <div class="container">
      <div class="carousel">
      <a class="carousel-item" href="#one!"><img src="http://lorempixel.com/250/250/nature/1"></a>
      <a class="carousel-item" href="#two!"><img src="http://lorempixel.com/250/250/nature/2"></a>
      <a class="carousel-item" href="#three!"><img src="http://lorempixel.com/250/250/nature/3"></a>
      <a class="carousel-item" href="#four!"><img src="http://lorempixel.com/250/250/nature/4"></a>
      <a class="carousel-item" href="#five!"><img src="http://lorempixel.com/250/250/nature/5"></a>
    </div>
  </div>


  <script type="text/javascript">

      $(document).ready(function(){
    $('.carousel').carousel();
       });
  </script>

  </body>
</html>

Upvotes: 2

Related Questions