开发者社区 问答 正文

如何让引导转盘滑动?

我的旋转木马不会改变幻灯片。实际的转盘将在我的站点上打开,但是我无法单击右侧或左侧指示器来切换到不同的幻灯片。我不确定我做错了什么。我试着改变我的java脚本命令。我试着删除并重新启动我的转盘,但没有成功。

("carousel").carousel();

<!DOCTYPE html>

  <html lang="en">

  <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Home Page</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="styles/restaurantStyles.css" />

  <script>

  </script>
    <style>

      </style>


    </head>
    <body onload="alert('This website is best viewed with JavaScript enabled. Please check your settings to ensure JavaScript is enabled before proceeding');">
      <div class="container">
<div class="jumbotron jumbotron-fluid">

     
        <div id="carousel" class="carousel slide carousel" data-ride="carousel" style="width: 400px;">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block w-100" src="images/newLoc.png" alt="newLoc">
            </div>
            <div class="carousel-item">
              <img class="d-block w-100" src="images/Seasonal.png" alt="Seasonal Menu">
            </div>
            <div class="carousel-item">

展开
收起
sossssss 2019-12-09 17:10:17 1432 分享
分享
版权
举报
阿里云 AI 助理回答

看起来你可能在使用Bootstrap的Carousel组件遇到问题,该组件用于创建带有滑动效果的图片轮播。根据你的描述,你已经尝试了一些基本的故障排除步骤,但问题仍然存在。这里有一些可能的解决方案和检查点,希望能帮助你解决问题:

  1. 确保JavaScript已正确加载:首先,请确认Bootstrap的JS文件以及jQuery(因为Bootstrap Carousel依赖于jQuery)已经被正确地链接到你的HTML文件中,并且它们的加载顺序是先加载jQuery,后加载Bootstrap JS。正确的顺序如下:

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    
  2. 检查初始化代码:你提供的代码片段 ("carousel").carousel(); 看起来像是试图初始化Carousel,但是没有指定具体的元素ID或类名。确保你在选择器中指定了正确的元素ID或类名,例如,如果你的Carousel容器的ID是myCarousel,正确的初始化代码应该是:

    $("#myCarousel").carousel();
    
  3. 检查HTML结构:确保你的HTML结构遵循Bootstrap Carousel的要求,包括.carousel, .carousel-inner, .carousel-item, 以及可选的.carousel-indicators.carousel-control-prev/.carousel-control-next。一个基本的Carousel结构示例如下:

    <div id="myCarousel" class="carousel slide" data-ride="carousel">
     <ol class="carousel-indicators">
       <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
       <li data-target="#myCarousel" data-slide-to="1"></li>
       <!-- 更多幻灯片指示器 -->
     </ol>
     <div class="carousel-inner">
       <div class="carousel-item active">
         <!-- 第一张幻灯片的内容 -->
       </div>
       <div class="carousel-item">
         <!-- 第二张幻灯片的内容 -->
       </div>
       <!-- 更多幻灯片内容 -->
     </div>
     <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
       <span class="carousel-control-next-icon" aria-hidden="true"></span>
       <span class="sr-only">Next</span>
     </a>
    </div>
    
  4. 查看浏览器控制台错误:打开浏览器的开发者工具(通常通过按F12或右键选择“检查”),查看控制台是否有任何错误信息。这可能会提供关于为什么指示器不工作的原因。

  5. 兼容性问题:虽然不太常见,但有时特定的浏览器版本或JavaScript设置可能会导致问题。尝试在不同的浏览器中测试你的Carousel以排除这种可能性。

如果以上建议都不能解决问题,可能需要更详细地检查你的具体实现细节或者查看是否有其他脚本冲突。

有帮助
无帮助
AI 助理回答生成答案可能存在不准确,仅供参考
0 条回答
写回答
取消 提交回答
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等