Materialize轮播组件初始化失败求助：图片堆叠无功能

先帮你排查轮播失效的核心问题，再给你实现垂直轮播导航的方案：

一、轮播失效的原因及修复 #

你的代码里有几个关键问题导致轮播只堆叠显示：

1. HTML结构错误 #

<title>和部分meta标签放在了<head>标签外面，浏览器解析时会把这些当成<body>内容，破坏页面结构。必须把所有头部相关标签都放到<head>内部。

2. 脚本执行顺序错误 #

你在<head>里写了轮播初始化代码，但materialize.min.js是在body末尾才加载的——这时候执行初始化，M对象（Materialize的全局对象）还不存在，自然没法初始化轮播。

3. 未定义的变量&重复初始化 #

• 原生JS初始化里用了options变量，但你没声明它，会抛出报错阻断代码；
• 同时用了原生JS和jQuery两种初始化方式，虽然不致命，但没必要，选一种更简洁的就行。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <title>TEST</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
  <!--引入jQuery（注意要在Materialize之前加载）-->
  <script src="jquery.min.js"></script>
</head>
<body>
  <div class="carousel">
    <a class="carousel-item" href="#one!"><img src="placeholder.jpg"></a>
    <a class="carousel-item" href="#two!"><img src="placeholder.jpg"></a>
    <a class="carousel-item" href="#three!"><img src="placeholder.jpg"></a>
    <a class="carousel-item" href="#four!"><img src="placeholder.jpg"></a>
    <a class="carousel-item" href="#five!"><img src="placeholder.jpg"></a>
  </div>

  <!--JavaScript放在body末尾，确保DOM和依赖脚本都加载完成-->
  <script type="text/javascript" src="js/materialize.min.js"></script>
  <script>
    // 用jQuery方式初始化（更简洁）
    $(document).ready(function(){
      $('.carousel').carousel();
    });
  </script>
</body>
</html>

二、实现可点击的垂直轮播导航 #

Materialize的Carousel支持垂直模式，你只需要在初始化时添加vertical: true选项，再搭配自定义导航按钮控制轮播切换即可：

完整垂直轮播代码示例 #

<!DOCTYPE html>
<html>
<head>
  <title>垂直轮播导航测试</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
  <script src="jquery.min.js"></script>
  <style>
    /* 自定义导航按钮样式，调整位置 */
    .carousel-nav {
      position: fixed;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 100;
    }
    .carousel-nav .btn {
      margin: 8px 0;
      display: block;
    }
  </style>
</head>
<body>
  <!-- 垂直轮播容器 -->
  <div class="carousel vertical-carousel">
    <a class="carousel-item" href="#section1"><img src="placeholder.jpg"></a>
    <a class="carousel-item" href="#section2"><img src="placeholder.jpg"></a>
    <a class="carousel-item" href="#section3"><img src="placeholder.jpg"></a>
    <a class="carousel-item" href="#section4"><img src="placeholder.jpg"></a>
  </div>

  <!-- 自定义导航按钮 -->
  <div class="carousel-nav">
    <button class="btn waves-effect waves-light" onclick="moveCarousel('prev')">上一页</button>
    <button class="btn waves-effect waves-light" onclick="moveCarousel('next')">下一页</button>
    <!-- 也可以添加跳转到指定项的按钮 -->
    <button class="btn waves-effect waves-light" onclick="goToCarousel(2)">跳转到第3项</button>
  </div>

  <script type="text/javascript" src="js/materialize.min.js"></script>
  <script>
    // 初始化垂直轮播
    let carouselInstance;
    $(document).ready(function(){
      carouselInstance = $('.vertical-carousel').carousel({
        vertical: true, // 开启垂直模式
        duration: 300, // 切换动画时长
        indicators: true // 显示指示器（可选）
      });
    });

    // 导航控制函数
    function moveCarousel(direction) {
      if(direction === 'prev') {
        carouselInstance.carousel('prev');
      } else {
        carouselInstance.carousel('next');
      }
    }

    // 跳转到指定索引的轮播项（索引从0开始）
    function goToCarousel(index) {
      carouselInstance.carousel('set', index);
    }
  </script>
</body>
</html>

关键说明 #

• 初始化时添加vertical: true即可开启垂直轮播；
• 通过carousel('prev')、carousel('next')、carousel('set', index)方法可以手动控制轮播切换；
• 自定义导航按钮的样式可以根据你的需求调整位置和外观。

内容的提问来源于stack exchange，提问作者Matt