JCarousel：11 次环绕后的所有幻灯片

JCarousel: All slides after 11 wraps around

我在使用此轮播时遇到了一些奇怪的事情。我有 12 张幻灯片，其中 11 张显示得非常好，但最后一张显示在其他幻灯片上。我在 JSFiddle 中有代码：https://jsfiddle.net/ewillstudios/rzmt1bey/

真不知道是JS的问题还是CSS的问题

感谢您的帮助！

    $(function() {
      $('.jcarousel').jcarousel({
        wrap: "last",
        center: true
      });
      https: //jsfiddle.net/#
        $('body').on('click', '.jcarousel-next', function(e) {
          e.stopPropagation();
          $('.jcarousel').jcarousel('scroll', '+=1');
        });

      $('body').on('click', '.jcarousel-prev', function(e) {
        e.stopPropagation();
        $('.jcarousel').jcarousel('scroll', '-=1');
      });

    });

    .wrapper {
      width: 800px;
    }
    #carousel {
      padding: 0;
    }

    .jcarousel {
      width: 100%;
      position: relative;
      overflow: hidden;
      margin-top: 50px;
    }

    .slides {
      width: 1110%;
      list-style: none;
      position: relative;
    }

    .slides > li {
      width: 9.09%;
      float: left;
      position: relative;
    }

    .slides:after {
      content: '';
      display: table;
      clear: both;
    }

    .jcarousel .col-6-12:first-child {
      position: relative;
    }

    .cover .col-6-12:nth-child(2) {
      padding: 26px 30px 0 30px;
      text-align: center;
    }

    .cover .col-6-12:nth-child(2) h2 {
      font-size: 26px;
      margin-bottom: 74px;
    }

    .jcarousel h3 {
      font-size: 20px;
    }

    .jcarousel p {
      font-size: 13px;
      margin-bottom: 40px;
    }

    img.slider-icon.center-block {
      margin-bottom: 53px;
    }

    .jcarousel p.indicator {
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      position: relative;
      top: 60px;
      color: #D3D3D3;
    }

    .jcarousel p.indicator span {
      color: #A33631;
    }

    .jcarousel li:nth-child(4) .col-6-12:nth-child(2) p.indicator {
      top: 40px;
    }

    .jcarousel .slider-control {
      position: absolute;
      top: 35%;
      z-index: 100;
    }

    .jcarousel .slider-control.right {
      right: 0;
    }

    .jcarousel .slider-control.left {
      left: 0;
    }

    .jcarousel .slider-control.right img {
      transform: rotate(180deg);
    }

    a.slider-control > img {
      cursor: pointer;
    }

    .jcarousel .col-6-12:nth-child(2) {
      padding: 26px 30px 0 30px;
    }

    .row:after {
      content: '';
      display: table;
      clear: both;
    }

    .center {
      margin: 0 auto;
    }

    .center-block {
      display: block;
      margin: 0 auto;
    }

    .grid {
      box-sizing: border-box;
      float: left;
    }

    .col-3-12:last-of-type,
    .col-4-12:last-of-type {
      margin-right: 0;
    }

    .col-3-12 {
      width: 25%;
      padding: 30px;
    }

    .col-4-12 {
      width: 33.33%;
      padding: 30px;
    }

    .col-6-12 {
      width: 50%;
      padding: 30px
    }

    .col-7-12 {
      width: 58.33%;
      padding: 30px;
    }

    .col-12-12 {
      width: 100%;
      padding: 30px;
    }

    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet"> <style> body {
      font-family: 'Open Sans', Helvetica, sans-serif;
    }

    .right {
      float: right;
    }

    .left {
      float: left;
    }

    .text-center {
      text-align: center;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-weight: 700;
    }

    .col-3-12 h2 {
      margin: 31px 0 25px 0;
      font-size: 15px;
    }

    .col-3-12 p {
      margin-top: 20px;
      line-height: 1.3;
    }

    h1 {
      font-size: 24px;
    }

    p {
      font-size: 10px;
    }

    .btn {
      padding: 12px 50px;
      font-weight: 700;
      font-size: 13px;
      text-decoration: none;
    }

    .btn-primary {
      background-color: #A33631;
      color: #fff;
    }

    .btn-lg {
      text-transform: uppercase;
    }

    .btn-secondary {
      background-color: #000;
      color: #fff;
    }

    .img-responsive {
      max-width: 100%;
      width: 100%;
    }

    header {
      font-weight: 700;
      font-size: x-large;
      text-align: center;
    }

    header img {
      margin-bottom: 70px;
    }

    .row:after {
      content: '';
      display: table;
      clear: both;
    }

    .center {
      margin: 0 auto;
    }

    .center-block {
      display: block;
      margin: 0 auto;
    }

    .grid {
      box-sizing: border-box;
      float: left;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jcarousel/0.3.4/jquery.jcarousel.min.js"></script>
   <div class="wrapper">
    <div class="row col-12-12" id="carousel">
      <div class="jcarousel">
        <ul class="slides">

          <li class="cover">
            <div class="grid col-6-12">
              <img class="center-block img-responsive" src="https://www.wallsheets.net/wp-content/uploads/2014/05/ocean-sunset-wallpaper-480x385.jpg" alt="" />
              <a href="#next" class="slider-control right jcarousel-next"><i class="glyphicon glyphicon-chevron-right"></i></a>
            </div>
            <div class="grid col-6-12">

              <h2>Lorem Ipsum</h2>
              <a href="" class="btn btn-primary btn-lg jcarousel-next">Begin Slideshow</a>
              <p class="indicator">
                <span>1</span> / 12</p>
            </div>
          </li>

          <li>

            <div class="grid col-6-12">
              <img class="center-block img-responsive" src="https://www.wallsheets.net/wp-content/uploads/2014/05/ocean-sunset-wallpaper-480x385.jpg" alt="" />
              <a href="#prev" class="slider-control left jcarousel-prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
              <a href="#next" class="slider-control right jcarousel-next"><i class="glyphicon glyphicon-chevron-right"></i></a>
            </div>

            <div class="grid col-6-12">

              <h3>Lorem Ipsum.</h3>
              <p>Salvia fanny pack quinoa cray trust fund locavore, swag crucifix lo-fi readymade tattooed cred godard. Bicycle rights godard stumptown, knausgaard forage messenger bag raw denim iPhone slow-carb polaroid lumbersexual pickled bespoke. Authentic
                single-origin coffee poutine, next level seitan stumptown deep v franzen cliche pug.</p>
              <div class="text-center">
                <a href="" class="text-center btn btn-primary btn-lg jcarousel-next">Next</a>
              </div>
              <p class="indicator">
                <span>2</span> / 12</p>
            </div>

          </li>

          <li>

            <div class="grid col-6-12">
              <img class="center-block img-responsive" src="https://www.wallsheets.net/wp-content/uploads/2014/05/ocean-sunset-wallpaper-480x385.jpg" alt="" />
              <a href="#prev" class="slider-control left jcarousel-prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
              <a href="#next" class="slider-control right jcarousel-next"><i class="glyphicon glyphicon-chevron-right"></i></a>
            </div>

            <div class="grid col-6-12">

              <h3>Lorem Ipsum.</h3>
              <p>Salvia fanny pack quinoa cray trust fund locavore, swag crucifix lo-fi readymade tattooed cred godard. Bicycle rights godard stumptown, knausgaard forage messenger bag raw denim iPhone slow-carb polaroid lumbersexual pickled bespoke. Authentic
                single-origin coffee poutine, next level seitan stumptown deep v franzen cliche pug.</p>
              <div class="text-center">
                <a href="" class="text-center btn btn-primary btn-lg jcarousel-next">Next</a>
              </div>
              <p class="indicator">
                <span>3</span> / 12</p>
            </div>

          </li>

          <li>
            <div class="grid col-6-12">
              <img class="center-block img-responsive" src="https://www.wallsheets.net/wp-content/uploads/2014/05/ocean-sunset-wallpaper-480x385.jpg" alt="" />
              <a href="#prev" class="slider-control left jcarousel-prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
              <a href="#next" class="slider-control right jcarousel-next"><i class="glyphicon glyphicon-chevron-right"></i></a>
            </div>

            <div class="grid col-6-12">

              <h3>Lorem Ipsum.</h3>
              <p>Salvia fanny pack quinoa cray trust fund locavore, swag crucifix lo-fi readymade tattooed cred godard. Bicycle rights godard stumptown, knausgaard forage messenger bag raw denim iPhone slow-carb polaroid lumbersexual pickled bespoke. Authentic
                single-origin coffee poutine, next level seitan stumptown deep v franzen cliche pug.</p>
              <div class="text-center">
                <a href="" class="text-center btn btn-primary btn-lg jcarousel-next">Next</a>
              </div>
              <p class="indicator">
                <span>4</span> / 12</p>
            </div>
          </li>

          <li>
            <div class="grid col-6-12">
              <img class="center-block img-responsive" src="https://www.wallsheets.net/wp-content/uploads/2014/05/ocean-sunset-wallpaper-480x385.jpg" alt="" />
              <a href="#prev" class="slider-control left jcarousel-prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
              <a href="#next" class="slider-control right jcarousel-next"><i class="glyphicon glyphicon-chevron-right"></i></a>
            </div>

            <div class="grid col-6-12">

              <h3>Lorem Ipsum.</h3>
              <p>Salvia fanny pack quinoa cray trust fund locavore, swag crucifix lo-fi readymade tattooed cred godard. Bicycle rights godard stumptown, knausgaard forage messenger bag raw denim iPhone slow-carb polaroid lumbersexual pickled bespoke. Authentic
                single-origin coffee poutine, next level seitan stumptown deep v franzen cliche pug.</p>
              <div class="text-center">
                <a href="" class="text-center btn btn-primary btn-lg jcarousel-next">Next</a>
              </div>
              <p class="indicator">
                <span>5</span> / 12</p>
            </div>
          </li>

          <li>
            <div class="grid col-6-12">
              <img class="center-block img-responsive" src="https://www.wallsheets.net/wp-content/uploads/2014/05/ocean-sunset-wallpaper-480x385.jpg" alt="" />
              <a href="#prev" class="slider-control left jcarousel-prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
              <a href="#next" class="slider-control right jcarousel-next"><i class="glyphicon glyphicon-chevron-right"></i></a>
            </div>

            <div class="grid col-6-12">

              <h3>Lorem Ipsum.</h3>
              <p>Salvia fanny pack quinoa cray trust fund locavore, swag crucifix lo-fi readymade tattooed cred godard. Bicycle rights godard stumptown, knausgaard forage messenger bag raw denim iPhone slow-carb polaroid lumbersexual pickled bespoke. Authentic
                single-origin coffee poutine, next level seitan stumptown deep v franzen cliche pug.</p>
              <div class="text-center">
                <a href="" class="text-center btn btn-primary btn-lg jcarousel-next">Next</a>
              </div>
              <p class="indicator">
                <span>6</span> / 12</p>
            </div>
          </li>

          <li>
            <div class="grid col-6-12">
              <img class="center-block img-responsive" src="https://www.wallsheets.net/wp-content/uploads/2014/05/ocean-sunset-wallpaper-480x385.jpg" alt="" />
              <a href="#prev" class="slider-control left jcarousel-prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
              <a href="#next" class="slider-control right jcarousel-next"><i class="glyphicon glyphicon-chevron-right"></i></a>
            </div>

            <div class="grid col-6-12">

              <h3>Lorem Ipsum.</h3>
              <p>Salvia fanny pack quinoa cray trust fund locavore, swag crucifix lo-fi readymade tattooed cred godard. Bicycle rights godard stumptown, knausgaard forage messenger bag raw denim iPhone slow-carb polaroid lumbersexual pickled bespoke. Authentic
                single-origin coffee poutine, next level seitan stumptown deep v franzen cliche pug.</p>
              <div class="text-center">
                <a href="" class="text-center btn btn-primary btn-lg jcarousel-next">Next</a>
              </div>
              <p class="indicator">
                <span>7</span> / 12</p>
            </div>
          </li>

          <li>
            <div class="grid col-6-12">
              <img class="center-block img-responsive" src="https://www.wallsheets.net/wp-content/uploads/2014/05/ocean-sunset-wallpaper-480x385.jpg" alt="" />
              <a href="#prev" class="slider-control left jcarousel-prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
              <a href="#next" class="slider-control right jcarousel-next"><i class="glyphicon glyphicon-chevron-right"></i></a>
            </div>

            <div class="grid col-6-12">

              <h3>Lorem Ipsum.</h3>
              <p>Salvia fanny pack quinoa cray trust fund locavore, swag crucifix lo-fi readymade tattooed cred godard. Bicycle rights godard stumptown, knausgaard forage messenger bag raw denim iPhone slow-carb polaroid lumbersexual pickled bespoke. Authentic
                single-origin coffee poutine, next level seitan stumptown deep v franzen cliche pug.</p>
              <div class="text-center">
                <a href="" class="text-center btn btn-primary btn-lg jcarousel-next">Next</a>
              </div>
              <p class="indicator">
                <span>8</span> / 12</p>
            </div>
          </li>

          <li>
            <div class="grid col-6-12">
              <img class="center-block img-responsive" src="https://www.wallsheets.net/wp-content/uploads/2014/05/ocean-sunset-wallpaper-480x385.jpg" alt="" />
              <a href="#prev" class="slider-control left jcarousel-prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
              <a href="#next" class="slider-control right jcarousel-next"><i class="glyphicon glyphicon-chevron-right"></i></a>
            </div>

            <div class="grid col-6-12">

              <h3>Lorem Ipsum.</h3>
              <p>Salvia fanny pack quinoa cray trust fund locavore, swag crucifix lo-fi readymade tattooed cred godard. Bicycle rights godard stumptown, knausgaard forage messenger bag raw denim iPhone slow-carb polaroid lumbersexual pickled bespoke. Authentic
                single-origin coffee poutine, next level seitan stumptown deep v franzen cliche pug.</p>
              <div class="text-center">
                <a href="" class="text-center btn btn-primary btn-lg jcarousel-next">Next</a>
              </div>
              <p class="indicator">
                <span>9</span> / 12</p>
            </div>
          </li>

          <li>
            <div class="grid col-6-12">
              <img class="center-block img-responsive" src="https://www.wallsheets.net/wp-content/uploads/2014/05/ocean-sunset-wallpaper-480x385.jpg" alt="" />
              <a href="#prev" class="slider-control left jcarousel-prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
              <a href="#next" class="slider-control right jcarousel-next"><i class="glyphicon glyphicon-chevron-right"></i></a>
            </div>

            <div class="grid col-6-12">

              <h3>Lorem Ipsum.</h3>
              <p>Salvia fanny pack quinoa cray trust fund locavore, swag crucifix lo-fi readymade tattooed cred godard. Bicycle rights godard stumptown, knausgaard forage messenger bag raw denim iPhone slow-carb polaroid lumbersexual pickled bespoke. Authentic
                single-origin coffee poutine, next level seitan stumptown deep v franzen cliche pug.</p>
              <div class="text-center">
                <a href="" class="text-center btn btn-primary btn-lg jcarousel-next">Next</a>
              </div>
              <p class="indicator">
                <span>10</span> / 12</p>
            </div>
          </li>

          <li>
            <div class="grid col-6-12">
              <img class="center-block img-responsive" src="https://www.wallsheets.net/wp-content/uploads/2014/05/ocean-sunset-wallpaper-480x385.jpg" alt="" />
              <a href="#prev" class="slider-control left jcarousel-prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
              <a href="#next" class="slider-control right jcarousel-next"><i class="glyphicon glyphicon-chevron-right"></i></a>
            </div>

            <div class="grid col-6-12">
              <h3>Lorem Ipsum.</h3>
              <p>Salvia fanny pack quinoa cray trust fund locavore, swag crucifix lo-fi readymade tattooed cred godard. Bicycle rights godard stumptown, knausgaard forage messenger bag raw denim iPhone slow-carb polaroid lumbersexual pickled bespoke. Authentic
                single-origin coffee poutine, next level seitan stumptown deep v franzen cliche pug.</p>
              <div class="text-center">
                <a href="" class="text-center btn btn-primary btn-lg jcarousel-next">Next</a>
              </div>
              <p class="indicator">
                <span>11</span> / 12</p>
            </div>
          </li>

          <li>
            <div class="grid col-6-12">
              <img class="center-block img-responsive" src="https://www.wallsheets.net/wp-content/uploads/2014/05/ocean-sunset-wallpaper-480x385.jpg" alt="" />
              <a href="#prev" class="slider-control left jcarousel-prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
            </div>

            <div class="grid col-6-12">
              <h3>Lorem Ipsum.</h3>
              <p>Salvia fanny pack quinoa cray trust fund locavore, swag crucifix lo-fi readymade tattooed cred godard. Bicycle rights godard stumptown, knausgaard forage messenger bag raw denim iPhone slow-carb polaroid lumbersexual pickled bespoke. Authentic
                single-origin coffee poutine, next level seitan stumptown deep v franzen cliche pug.</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    </div>

首先，您的最后一张幻灯片明显跳到了第一张幻灯片下面 - see here。这意味着 CSS 并不完美。让我们看看：你想要 12 张幻灯片的百分比 - 所以你给它们一个宽度而不是 9.09% 做数学运算 100%/12 = 8.33%，因此它们将排成一排

.slides > li {width:8.33%}

其次，你要在插件选项中省略 'wrap: "last" 因为你不喜欢这种效果。

demo