引导滑块轮播，前图像和后图像的一部分保留在屏幕上

Question

我正在尝试为引导滑块实现以下设计： 你是对的 Stack，这篇文章中的代码似乎确实很多。有时这就是编程网站中的帖子的本质，主要是代码。

所以在写完最上面的一段之后，stack 还需要我补充更多的细节。让我补充一点，如果有人可以帮助我，或者将我指向一个可以按照我的模板设计的画廊，或者给我一些想法，如何将引导滑块转换为我的需要，我将非常感激。

这是代码：

css:

<style>
   .selected img {
    opacity:0.5;
    }


  .carousel-inner {
  position: relative;
  width: 100%;
  overflow: visible !important;
  }

</style>

脚本：

<script>

    $('#myCarousel').carousel({
    interval: 4000
    });

    // handles the carousel thumbnails
    $('[id^=carousel-selector-]').click( function(){
      var id_selector = $(this).attr("id");
      var id = id_selector.substr(id_selector.length -1);
      id = parseInt(id);
      $('#myCarousel').carousel(id);
      $('[id^=carousel-selector-]').removeClass('selected');
      $(this).addClass('selected');
    });

    // when the carousel slides, auto update
    $('#myCarousel').on('slid', function (e) {
      var id = $('.item.active').data('slide-number');
      id = parseInt(id);
      $('[id^=carousel-selector-]').removeClass('selected');
      $('[id=carousel-selector-'+id+']').addClass('selected');
    });

</script>

还有代码：

<div class="container" style="margin-top:20px;">
    <!-- main slider carousel -->
    <div class="row">

    <div class="col-md-12" id="slider">
    <div class="col-md-3">&nbsp;</div>
    <div class="col-md-6" id="carousel-bounding-box">
    <div id="myCarousel" class="carousel slide">
    <!-- main slider carousel items -->
    <div class="carousel-inner">
    <div class="active item" data-slide-number="0">
    <img src="http://placehold.it/1200x480&amp;text=one" class="img-responsive">
    </div>
    <div class="item" data-slide-number="1">
    <img src="http://placehold.it/1200x480/888/FFF" class="img-responsive">
    </div>
    <div class="item" data-slide-number="2">
    <img src="http://placehold.it/1200x480&amp;text=three" class="img-responsive">
    </div>
    <div class="item" data-slide-number="3">
    <img src="http://placehold.it/1200x480&amp;text=four" class="img-responsive">
    </div>
    <div class="item" data-slide-number="4">
    <img src="http://placehold.it/1200x480&amp;text=five" class="img-responsive">
    </div>
    <div class="item" data-slide-number="5">
    <img src="http://placehold.it/1200x480&amp;text=six" class="img-responsive">
    </div>
    <div class="item" data-slide-number="6">
    <img src="http://placehold.it/1200x480&amp;text=seven" class="img-responsive">
    </div>
    <div class="item" data-slide-number="7">
    <img src="http://placehold.it/1200x480&amp;text=eight" class="img-responsive">
    </div>
    </div>
    <!-- main slider carousel nav controls --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
    </div>
    </div>

    <div class="col-md-3">&nbsp;</div>

    </div>
    </div>
    <!--/main slider carousel-->


    <!-- thumb navigation carousel -->
    <div class="col-md-12 hidden-sm hidden-xs text-center" id="slider-thumbs" style="margin-top:20px;">

        <!-- thumb navigation carousel items -->
      <ul class="list-inline">
      <li> <a id="carousel-selector-0" class="selected">
        <img src="http://placehold.it/80x60&amp;text=one" class="img-responsive">
      </a></li>
      <li> <a id="carousel-selector-1">
        <img src="http://placehold.it/80x60&amp;text=two" class="img-responsive">
      </a></li>
      <li> <a id="carousel-selector-2">
        <img src="http://placehold.it/80x60&amp;text=three" class="img-responsive">
      </a></li>
      <li> <a id="carousel-selector-3">
        <img src="http://placehold.it/80x60&amp;text=four" class="img-responsive">
      </a></li>
            <li> <a id="carousel-selector-4">
        <img src="http://placehold.it/80x60&amp;text=five" class="img-responsive">
      </a></li>
      <li> <a id="carousel-selector-5">
        <img src="http://placehold.it/80x60&amp;text=six" class="img-responsive">
      </a></li>
      <li> <a id="carousel-selector-6">
        <img src="http://placehold.it/80x60&amp;text=seven" class="img-responsive">
      </a></li>
      <li> <a id="carousel-selector-7">
        <img src="http://placehold.it/80x60&amp;text=eight" class="img-responsive">
      </a></li>
        </ul>
    </div>
    </div>

Answer 1

我建议使用第三方插件，例如 swiper。 Swiper 有一些非常简洁的演示：http://idangero.us/swiper/demos/

我说的是这个演示，我认为它适合您的需求：http://idangero.us/swiper/demos/300-thumbs-gallery.html

您需要的代码（除了包括 swiper 脚本和 css 文件）可以在 github 上找到：https://github.com/nolimits4web/Swiper/blob/master/demos/300-thumbs-gallery.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/css/swiper.min.css">
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="../dist/css/swiper.min.css">

  <!-- Demo styles -->
  <style>
    html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #000;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 300px;
      margin-left: auto;
      margin-right: auto;
    }
    .swiper-slide {
      background-size: cover;
      background-position: center;
    }
    .gallery-top {
      height: 80%;
      width: 100%;
    }
    .gallery-thumbs {
      height: 20%;
      box-sizing: border-box;
      padding: 10px 0;
    }
    .gallery-thumbs .swiper-slide {
      width: 25%;
      height: 100%;
      opacity: 0.4;
    }
    .gallery-thumbs .swiper-slide-active {
      opacity: 1;
    }
  </style>
</head>
<body>
  <!-- Swiper -->
  <div class="swiper-container gallery-top">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div>
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div>
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div>
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div>
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"></div>
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"></div>
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"></div>
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8)"></div>
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9)"></div>
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10)"></div>
    </div>
    <!-- Add Arrows -->
    <div class="swiper-button-next swiper-button-white"></div>
    <div class="swiper-button-prev swiper-button-white"></div>
  </div>
  <div class="swiper-container gallery-thumbs">
    <div class="swiper-wrapper">
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div>
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div>
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div>
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div>
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"></div>
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"></div>
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"></div>
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8)"></div>
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9)"></div>
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10)"></div>
    </div>
  </div>

  <!-- Swiper JS -->
  <script src="../dist/js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var galleryTop = new Swiper('.gallery-top', {
      spaceBetween: 10,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
    var galleryThumbs = new Swiper('.gallery-thumbs', {
      spaceBetween: 10,
      centeredSlides: true,
      slidesPerView: 'auto',
      touchRatio: 0.2,
      slideToClickedSlide: true,
    });
    galleryTop.controller.control = galleryThumbs;
    galleryThumbs.controller.control = galleryTop;
  </script>
</body>
</html>