jquery - 第二轮播不工作-6ren

jquery - 第二轮播不工作

转载作者：行者123 更新时间：2023-11-28 07:29:29

我刚刚在我的网站上添加了第二个旋转木马，但不幸的是，由于未知原因它只是堆叠 - 意味着没有滑动，箭头不起作用。我所做的只是复制了我的第一个正确的工作轮播并将其放入页面下方。有什么问题吗？第一个和第二个轮播标记在 html 代码中的注释中。

CSS:

.jumbotron {
    position: relative;
    background: #000 url('35.jpg') center center no-repeat;
    width: 100%;
    background-size: cover;
    overflow: hidden;
    height: 370px;
    padding-bottom: 1px;
}

.navbar .nav > li > a {
    text-decoration: none;
    color:  white;
    font-size:15px;
    font-family: Arial, sans-serif;
    text-align: center; 
    font-weight: bold;
}

#brand-image
{
height:30px;
margin-top: 1px;
}

#features
{
padding-top: 50px;
}

#gallery
{
padding-top: 50px;
}

#feedback
{
padding-top: 50px;
}

#faq
{
padding-top: 50px;
}



    /* CUSTOMIZE THE CAROUSEL
    -------------------------------------------------- */

    /* Carousel base class */
    .carousel {
      margin-bottom: -90px;             /* odstep miedzy carusel slider a nastepnym containerem tzn O mnie */
    }

    .carousel .container {
      position: relative;
      z-index: 9;
    }

    .carousel-control {
      height: 80px;
      margin-top: 0;
      font-size: 120px;
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
      background-color: transparent;
      border: 0;
      z-index: 10;
    }

    .carousel .item {
      height: 550px;
    }
    .carousel img {
      position: absolute;
      top: 0;
      left: 0;
      min-width: 100%;
      height: 500px;


    }

    .carousel-caption {
      background-color: transparent;
      position: static;
      max-width: 550px;
      padding: 0 20px;
      margin-top: 200px;
    }
    .carousel-caption h1,
    .carousel-caption .lead {
      margin: 0;
      line-height: 1.25;
      color: #fff;
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
    }
    .carousel-caption .btn {
      margin-top: 10px;
    }



    /* MARKETING CONTENT
    -------------------------------------------------- */

    /* Center align the text within the three columns below the carousel */
    .marketing .span4 {
      text-align: center;
    }
    .marketing h2 {
      font-weight: normal;
    }
    .marketing .span4 p {
      margin-left: 10px;
      margin-right: 10px;
    }


    /* Featurettes
    ------------------------- */

    .featurette-divider {
      margin: 80px 0; /* Space out the Bootstrap <hr> more */
    }
    .featurette {
      padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */
      overflow: hidden; /* Vertically center images part 2: clear their floats. */
    }
    .featurette-image {
      margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
    }

    /* Give some space on the sides of the floated elements so text doesn't run right into it. */
    .featurette-image.pull-left {
      margin-right: 40px;
    }
    .featurette-image.pull-right {
      margin-left: 40px;
    }

    /* Thin out the marketing headings */
    .featurette-heading {
      font-size: 50px;
      font-weight: 300;
      line-height: 1;
      letter-spacing: -1px;
    }



    /* RESPONSIVE CSS
    -------------------------------------------------- */

    @media (max-width: 979px) {

      .container.navbar-wrapper {
        margin-bottom: 0;
        width: auto;
      }
      .navbar-inner {
        border-radius: 0;
        margin: -20px 0;
      }

      .carousel .item {
        height: 500px;
      }
      .carousel img {
        width: auto;
        height: 500px;
      }

      .featurette {
        height: auto;
        padding: 0;
      }
      .featurette-image.pull-left,
      .featurette-image.pull-right {
        display: block;
        float: none;
        max-width: 40%;
        margin: 0 auto 20px;
      }
    }


    @media (max-width: 767px) {

      .navbar-inner {
        margin: -20px;
      }

      .carousel {
        margin-left: -20px;
        margin-right: -20px;
      }
      .carousel .container {

      }
      .carousel .item {
        height: 300px;
      }
      .carousel img {
        height: 300px;
      }
      .carousel-caption {
        width: 65%;
        padding: 0 70px;
        margin-top: 100px;
      }
      .carousel-caption h1 {
        font-size: 30px;
      }
      .carousel-caption .lead,
      .carousel-caption .btn {
        font-size: 18px;
      }

      .marketing .span4 + .span4 {
        margin-top: 40px;
      }

      .featurette-heading {
        font-size: 30px;
      }
      .featurette .lead {
        font-size: 18px;
        line-height: 1.5;
      }

    }

html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>My Logo</title>
    <meta name="description" content="Wiredwiki App">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">


    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <link rel="stylesheet" type="text/css" href="custom.css">
</head>

    <style>
    body{
        padding-top: 50px;
    }
    </style>



<body data-spy="scroll" data-target="#my-navbar">

  <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
    <a class="navbar-brand" href="#">
        <!--<img id="brand-image" alt="Website Logo" src="111.png" /> -->
        <a class="navbar-brand" href="#"></a>
    </a>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                   <li><a href="#feedback"><span class="glyphicon glyphicon-user"></span> O MNIE</a> 
                    <li><a href="#gallery"><span class="glyphicon glyphicon-credit-card"></span> blabla</a> 
                    <li><a href="#features"><span class="glyphicon glyphicon-th-large"></span> blabla</a> 
                    <li><a href="#faq"><span class="glyphicon glyphicon-headphones"></span> blabla</a> 
                    <li><a href="#contact"><span class="glyphicon glyphicon-earphone"></span>KONTAKT</a> 
                </ul>
            </div>
        </div>
    </div>

<!-- FIRST CAROUSEL -->

    <div class="carousel slide" id="myCarousel">
      <div class="carousel-inner">
        <div class="item active">
          <img src="new/3.jpg">
          <div class="container">
            <div class="carousel-caption">
              <h1>Example headline.</h1>
              <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <a class="btn btn-large btn-primary" href="#">Sign up today</a>
            </div>
          </div>
        </div>
        <div class="item">
          <img alt="" src="new/1.jpg">
          <div class="container">
            <div class="carousel-caption">
              <h1>Another example headline.</h1>
              <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <a class="btn btn-large btn-primary" href="#">Learn more</a>
            </div>
          </div>
        </div>
        <div class="item">
          <img alt="" src="new/2.jpg">
          <div class="container">
            <div class="carousel-caption">
              <h1>One more for good measure.</h1>
              <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <a class="btn btn-large btn-primary" href="#">Browse gallery</a>
            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
    </div><!-- /.carousel -->

    <!--
    <div class="jumbotron">
        <div class="container">
        </div>
        </div>-->


    <!-- Feedback-->
    <div class="container" id="moj">
        <section>
            <div class="page-header" id="feedback">
                <h2>Kilka słów o mnie.<small> couple words about myself</small></h2>
            </div>

            <div class="row">
                <div class="col-md-4">
                    <blockquote>
                        <p>blabla</p>
                        <footer>blabla</footer>
                    </blockquote>
                </div>
                <div class="col-md-4">
                    <blockquote>
                        <p>blabla</p>
                        <footer>blabla
</footer>
                    </blockquote>
                </div>
                <div class="col-md-4">
                    <blockquote>
                        <p>blabla</p>
                        <footer>blabla
</footer>
                    </blockquote>
                </div>
            </div><!-- End row -->
        </section>
    </div><!--End Container-->

<!-- call to action -->
    <section>
        <div class="well">
            <div class="container text-center">
                <h3><i>blabla</i></h3>
                <p><i>blabla<i></p>




            </div><!-- end Container-->

        </div><!-- end well-->
    </section><!-- Call to action -->

<!-- Gallery -->
    <div class="container">
        <section>
            <div class="page-header" id="gallery">
                <h2>bla<small> Couple of already realased projects.</small></h2>
            </div>
                </section>
    </div>

<!-- SECOND CAROUSEL -->

            <div class="carousel slide" id="myCarousel">
      <div class="carousel-inner">
        <div class="item active">
          <img src="projekty/hotel/1.png">
          <div class="container">
            <div class="carousel-caption">
              <h1>Example headline.</h1>
              <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <a class="btn btn-large btn-primary" href="#">Sign up today</a>
            </div>
          </div>
        </div>
        <div class="item">
          <img alt="" src="projekty/hotel/1.png">
          <div class="container">
            <div class="carousel-caption">
              <h1>Another example headline.</h1>
              <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <a class="btn btn-large btn-primary" href="#">Learn more</a>
            </div>
          </div>
        </div>
        <div class="item">
          <img alt="" src="projekty/hotel/3.png">
          <div class="container">
            <div class="carousel-caption">
              <h1>One more for good measure.</h1>
              <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <a class="btn btn-large btn-primary" href="#">Browse gallery</a>
            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
    </div><!-- /.carousel -->

已编辑:

第二个旋转木马:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="projekty/hotel/3.png" alt="">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="projekty/hotel/1.png" alt="">
      <div class="carousel-caption">
      </div>
    </div>
    <div class="item">
      <img src="projekty/hotel/2.png" alt="">
      <div class="carousel-caption">
      </div>
    </div>

  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

最佳答案

id "myCarousel"被使用了两次，使它们独一无二。它会起作用。

关于jquery - 第二轮播不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31623115/

文章推荐： javascript - 按钮无法触发 jquery ui 中的幻灯片

文章推荐： javascript - 如何用html5制作播放按钮？

文章推荐： jquery - 如何将事件类添加到基于 URL 的导航菜单

文章推荐： Android应用程序不同风格的标题在同一个标题栏

iPhone - 轮播
我在我的应用程序中使用开源 iCarousel 来实现轮播控件。我使用的轮播类型是 iCarouselTypeRotary 并且图像在这种类型中线性排列。但是，我需要图像像所附图像中的旋转木马一样带来
jQuery 3D 轮播？
有人看过像这样的 jQuery 3D 轮播教程吗？ http://web.enavu.com/demos/3dcarouselwip/ 没有给出来源，但想知道是否有人有关于如何连续圈出 DIV 并调整
WPF 轮播/旋转元素
我正在开发一种使用相机自动拍摄照片的软件。我希望用户能够设置照片间隔。我希望它看起来和工作起来像某种轮播。它应该是这样的: 当我滑动(或用鼠标拖动)时，它应该沿给定方向移动: 所选项目应始终位于中间
javascript - 轮播 - 停止横向滚动
抱歉问了个愚蠢的问题。我正在寻找带有按钮的旋转木马。我在 Bootply 上找到了这个模板，它完全符合我的要求。我在开发方面还很陌生。也许有人可以向我解释如何摆脱侧面滚动效果。我知道我必须向 Jav
用于表单元素的 JQuery 轮播
我正在寻找一个可以处理表单元素的 jQuery 轮播风格插件。这是我需要做的。我有三个表单元素:两个常规文本框和一个文本区域。还有两个按钮，上一个和下一个。单击下一步按钮时，文本框/文本区域会切
具有拖放功能的 jQuery 轮播
我想构建一个包含两个图像轮播的网页，并且我希望能够将图像从一个轮播拖动到另一个。我已经有了与 jCarouselLite 一起使用的图像轮播:它使用两个 UL 元素来指定轮播的图像。这工作得很好。
javascript - Bootstrap 轮播
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭 1
PHP Bootstrap 轮播
我有这段代码可以从数据库中获取轮播图片或视频 $stmt = $con->prepare("SELECT * FROM `Main`"); $stmt->execut
带有图像功能的 jQuery 轮播
我需要做这个 slider ，我找到了一些代码并尝试了，但没有一个完全是 LIKE THIS .bloco03 img {
jquery - 轮播/幻灯片仅在移动设备上
我的任务是制作 3 张图片的轮播/幻灯片，只能在移动设备上使用。在桌面上，这些图像将显示在 3 列中。有没有一种方法可以自动转换，而无需我创建两个不同的模块并根据屏幕尺寸隐藏/显示一个？最佳答案你
具有不同元素位置的 Jquery 轮播
我需要在卡片轮播上创建这种效果。我使用 Owl Carousel ，我给了元素框阴影。但我坚持制作不同位置元素的效果，例如 3d 或任何名称。这是我想做的 http://www.awesomescr
javascript - 轮播 Bootstrap
我已经盯着这段相同的代码看了大约 4 个小时，并尝试观看一些不同的教程。问题是 slider 加载，有 3 张幻灯片的空间，但它只显示第一张幻灯片。所有图像加载良好(在浏览器中验证)，但轮播不会更改
javascript - 轮播 - 无法定位中心图像
我的 carouse/slider 有问题，我已经做到了，上一张和下一张图片每边各占 25%，中央图片占 50% 宽度。问题是我能够更改左右图像的背景，但我似乎无法将相同的颜色应用于中间图像。我已经尝
javascript - 如何将我的背景制作成自动幻灯片/轮播？
我想一次放 5 张图片作为页面的背景，即一张图片会显示一小段时间(比如每张一秒钟)，然后重复它们。我想知道有没有办法用 CSS 或 JS 来做到这一点？预先感谢您的帮助! 最佳答案这也许就是您正
jQuery 触摸可拖动响应滚动条/幻灯片/轮播？
我正在寻找一个支持触摸、可拖动、响应式 jQuery 滚动条/幻灯片/轮播/ slider ，用于显示水平可滚动项目列表(例如， eshop、最近将照片添加到数据库等)。它看起来类似于苹果应用程序商
javascript - 夹层中的 Bootstrap 轮播
我想要夹层画廊的 Bootstrap 轮播。基本上;我正在拉入所有图像，并且我想要单行三张图像轮播。这是我非常讨厌的一段工作代码；我真的很想让它适用于无限数量的图像。 {% if page.d
javascript - Rails Bootstrap 轮播
大家好，我有这段代码，我一直在为我的网站编写代码。我正在尝试实现一个轮播功能，其中一张图片在另一张图片之后滑动。我遇到的问题是图片不会滑动。这是我的代码在欢迎 Controller 的索引页面中的样子
javascript - 带有事件点的 jQuery 轮播
我正在构建一个简单的轮播，一旦用户水平滚动，事件点就会改变事件状态。但是，当我滚动时，jQuery 左侧位置返回值没有改变: li_left = li.position().left; // this
flutter 轮播 slider 将文本放置在图像下
我正在尝试将文本放在轮播 slider 中的图像下方，但现在文本出现在图像上，而不是下方。它看起来像这样: 但我希望它看起来像这样: 这是我的代码: final CarouselSlider aut
css - Bootstrap 轮播 - 如何只增加高度
我在使用 boostrap carousel 时遇到 CSS 问题我只是想让它更高，我已经尝试了几个 css 但没有任何效果。代码是在这个 jsFiddle 中，http://jsfiddle.ne

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - 第二轮播不工作