消除时间线中图像之间的空白

【问题标题】：Eliminating white space between images in a time line消除时间线中图像之间的空白
【发布时间】：2018-05-31 17:02:34
【问题描述】：

我正在尝试为公司网站创建时间线，我的同事给了我这个示例代码。在它的独创性时间线使用一次显示两张图片。

但是，我要求它在每个幻灯片/动画移动中只显示一张图片，并且图像必须具有较小的尺寸。我已设法减小图像大小并一次预览一张图像。

我现在在一张图片/动画/幻灯片和另一张之间留下了很多空白。我尝试了几种不同的方法，但我无法解决它。任何帮助将不胜感激。

感谢您对网络初学者的帮助和耐心。

克里斯

var $;
$.js = function (el) {
    'use strict';
    return $('[data-js=' + el + ']');
};

function carousel() {
    "use strict";
    $.js('timeline-carousel').slick({
        infinite: false,
        arrows: false,
        dots: true,
        autoplay: false,
        speed: 1000,
        slidesToShow: 1,
        slidesToScroll: 1,
        responsive: [
            {
                breakpoint : 800,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }]
    });
}

carousel();
body {
    margin: 0;
    background-color: #f2f2f2;
    font-family: "Roboto", sans-serif;
}

#title {
    color: #000000;
}

.text {
    color: #000000;
}

* {
    outline: none;
}

.timeline-carousel {
    padding: 6.9444% 6.9444%;
    position: relative;
    overflow:hidden;
}

.timeline-carousel:after, .timeline-carousel:before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    height: 100%;
    width: 6.9444%;
    background-color: #f2f2f2;
    z-index: 3;
    width: 6.9444%;
}

.timeline-carousel:after {
    left: 0;
}

.timeline-carousel:before {
    right: 0;
    opacity: 0;
}

.timeline-carousel .slick-list {
    overflow: visible;
}

.timeline-carousel .slick-dots {
    bottom: -40px;
}

.timeline-carousel h1 {
    color: white;
    font-size: 46px;
    line-height: 50pd;
    margin-bottom: 40px;
    font-weight: 900;
}

.timeline-carousel__image {
    padding-right: 30px;
}

.timeline-carousel__item {
    cursor: pointer;
}

.timeline-carousel__item .media-wrapper {
    opacity: 0.4;
    
    padding-bottom: 30%;
    width: 40%;
    
    -webkit-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    -o-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.timeline-carousel__item:last-child .timeline-carousel__item-inner:after {
  width: calc(100% - 30px);
}

.timeline-carousel__item-inner {
  position: relative;
  padding-top: 45px;
}
.timeline-carousel__item-inner:after {
  position: absolute;
  width: 100%;
  top: 45px;
  left: 0;
  content: "";
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.timeline-carousel__item-inner .year {
  font-size: 36px;
  line-height: 36px;
  color: #000000;
  display: table;
  letter-spacing: -1px;
  padding-right: 10px;
  background-color: #f2f2f2;
  z-index: 1;
  position: relative;
  margin: -15px 0 20px;
  font-weight: 900;
}
.timeline-carousel__item-inner .year:after {
  content: "";
  position: absolute;
  display: block;
  left: -10px;
  top: 0;
  height: 100%;
  width: 10px;
  background-color: #f2f2f2;
  z-index: 3;
}

.timeline-carousel__item-inner p {
  font-size: 16px;
  line-height: 18px;
  color: #000000;
  width: 60%;
  font-weight: 400;
}

.timeline-carousel__item-inner .read-more:hover:after {
  width: 100%;
}

.timeline-carousel__item-inner .pointer {
  height: 29px;
  position: relative;
  z-index: 1;
  margin: -4px 0 16px;
}

.timeline-carousel__item-inner .pointer:after, .timeline-carousel__item-inner .pointer:before {
  position: absolute;
  content: "";
}

.timeline-carousel__item-inner .pointer:after {
  width: 9px;
  height: 9px;
  border-radius: 100%;
  top: 0;
  left: 0;
  background-color: #b38c52;
}

.timeline-carousel__item-inner .pointer:before {
  width: 1px;
  height: 100%;
  top: 0;
  left: 4px;
  background-color: #b38c52;
}

.timeline-carousel .slick-active .media-wrapper {
  opacity: 1 !important;
}

.slick-dots {
  bottom: 60px;
  list-style: none;
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  z-index: 2;
}

.slick-dots li {
  cursor: pointer;
  display: inline-block;
  margin: 0 6px;
  position: relative;
  width: 10px;
  height: 10px;
}

.slick-dots li:last-child {
  margin-right: 0;
}

.slick-dots li.slick-active button {
  background: #b38c52;
  border-color: #b38c52;
}

.slick-dots li button {
  display: block;
  font-size: 0;
  width: 10px;
  height: 10px;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  -webkit-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  -o-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.slick-dots li button:hover {
  background: #b38c52;
  border-color: #b38c52;
}

.link {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 20px;
  z-index: 9999;
}

.link a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #fff;
}

.link .fa {
  font-size: 28px;
  margin-right: 8px;
  color: #fff;
}
<!DOCTYPE html>
<html lang="en" >

<head>
    <meta charset="UTF-8">
    <title>Responsive history timeline</title>

    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700,900" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css'>

    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css'>

    <link rel="stylesheet" href="css/style.css">
</head>

<body>
<!--Timeline carousel-->
<section class="timeline-carousel">
    <h1 id="title" >History timeline</h1>
    <div class="timeline-carousel__item-wrapper" data-js="timeline-carousel">
        <!--Timeline item-->
        <div class="timeline-carousel__item">
            <div class="timeline-carousel__image">
                <div class="media-wrapper media-wrapper--overlay" style="background: url('https://www.historyonthenet.com/wp-content/uploads/2016/12/135151-004-0D4D550E.jpg') center center; background-size:cover;"></div>
            </div>
            <div class="timeline-carousel__item-inner">
                <span class="year">Late 1800</span>
                <p>Started trading.</p>
            </div>
        </div>
        <!--/Timeline item-->
       
        <!--/Timeline item-->
        <div class="timeline-carousel__item">
            <div class="timeline-carousel__image">
                <div class="media-wrapper media-wrapper--overlay" style="background: url('https://www.historyonthenet.com/wp-content/uploads/2016/12/135151-004-0D4D550E.jpg') center center; background-size:cover;"></div>
            </div>
            <div class="timeline-carousel__item-inner">
                <span class="year">1960</span>
                <p>Francis Busuttil and Sons Limited was formed.</p>
            </div>
        </div>
        <!--/Timeline item-->
        
       <!--/Timeline item-->
        <div class="timeline-carousel__item">
            <div class="timeline-carousel__image">
                <div class="media-wrapper media-wrapper--overlay" style="background: url('https://www.historyonthenet.com/wp-content/uploads/2016/12/135151-004-0D4D550E.jpg') center center; background-size:cover;"></div>
            </div>
            <div class="timeline-carousel__item-inner">
                <span class="year">1960</span>
                <p>Acquisition of the first premises in Santa Venera.</p>
            </div>
        </div>
        <!--/Timeline item-->
        
        <!--/Timeline item-->
        <div class="timeline-carousel__item">
            <div class="timeline-carousel__image">
                <div class="media-wrapper media-wrapper--overlay" style="background: url('https://www.historyonthenet.com/wp-content/uploads/2016/12/135151-004-0D4D550E.jpg') center center; background-size:cover;"></div>
            </div>
            <div class="timeline-carousel__item-inner">
                <span class="year">1984</span>
                <p>Establishment of the Wines and Spirits Division.</p>
            </div>
        </div>
        <!--/Timeline item-->
        
        <!--/Timeline item-->
        <div class="timeline-carousel__item">
            <div class="timeline-carousel__image">
                <div class="media-wrapper media-wrapper--overlay" style="background: url('https://www.historyonthenet.com/wp-content/uploads/2016/12/135151-004-0D4D550E.jpg') center center; background-size:cover;"></div>
            </div>
            <div class="timeline-carousel__item-inner">
                <span class="year">1990</span>
                <p>Expansion of the distribution center.</p>
            </div>
        </div>
        <!--/Timeline item-->
        
        <!--/Timeline item-->
        <div class="timeline-carousel__item">
            <div class="timeline-carousel__image">
                <div class="media-wrapper media-wrapper--overlay" style="background: url('https://www.historyonthenet.com/wp-content/uploads/2016/12/135151-004-0D4D550E.jpg') center center; background-size:cover;"></div>
            </div>
            <div class="timeline-carousel__item-inner">
                <span class="year">1993</span>
                <p>Appointed distributor of General Mills.</p>
            </div>
        </div>
        <!--/Timeline item-->
        
        <!--/Timeline item-->
        <div class="timeline-carousel__item">
            <div class="timeline-carousel__image">
                <div class="media-wrapper media-wrapper--overlay" style="background: url('https://www.historyonthenet.com/wp-content/uploads/2016/12/135151-004-0D4D550E.jpg') center center; background-size:cover;"></div>
            </div>
            <div class="timeline-carousel__item-inner">
                <span class="year">1993</span>
                <p>Appointed distributor of Tate of Lyles.</p>
            </div>
        </div>
        <!--/Timeline item-->
        
        <!--/Timeline item-->
        <div class="timeline-carousel__item">
            <div class="timeline-carousel__image">
                <div class="media-wrapper media-wrapper--overlay" style="background: url('https://www.historyonthenet.com/wp-content/uploads/2016/12/135151-004-0D4D550E.jpg') center center; background-size:cover;"></div>
            </div>
            <div class="timeline-carousel__item-inner">
                <span class="year">1995</span>
                <p>Appointed distributor of Mars.</p>
            </div>
        </div>
        <!--/Timeline item-->
        
        <!--/Timeline item-->
        <div class="timeline-carousel__item">
            <div class="timeline-carousel__image">
                <div class="media-wrapper media-wrapper--overlay" style="background: url('https://www.historyonthenet.com/wp-content/uploads/2016/12/135151-004-0D4D550E.jpg') center center; background-size:cover;"></div>
            </div>
            <div class="timeline-carousel__item-inner">
                <span class="year">2000</span>
                <p>Group restructuring.</p>
            </div>
        </div>
        <!--/Timeline item-->
        
        <!--/Timeline item-->
        <div class="timeline-carousel__item">
            <div class="timeline-carousel__image">
                <div class="media-wrapper media-wrapper--overlay" style="background: url('https://www.historyonthenet.com/wp-content/uploads/2016/12/135151-004-0D4D550E.jpg') center center; background-size:cover;"></div>
            </div>
            <div class="timeline-carousel__item-inner">
                <span class="year">2012</span>
                <p>Establishment of the new offices.</p>
            </div>
        </div>
        <!--/Timeline item-->
        
        <!--/Timeline item-->
        
        <div class="timeline-carousel__item">
            <div class="timeline-carousel__image">
                <div class="media-wrapper media-wrapper--overlay" style="background: url('https://www.historyonthenet.com/wp-content/uploads/2016/12/135151-004-0D4D550E.jpg') center center; background-size:cover;"></div>
            </div>
            <div class="timeline-carousel__item-inner">
                <span class="year"> March 2018</span>
                <p>Acquisition of Charles Darmanin.</p>
            </div>
        </div>
        <!--/Timeline item-->
        
        <!--/Timeline item-->
        <div class="timeline-carousel__item">
            <div class="timeline-carousel__image">
                <div class="media-wrapper media-wrapper--overlay" style="background: url('https://www.historyonthenet.com/wp-content/uploads/2016/12/135151-004-0D4D550E.jpg') center center; background-size:cover;"></div>
            </div>
            <div class="timeline-carousel__item-inner">
                <span class="year">July 2018</span>
                <p>Appointed distributor of Barilla.</p>
            </div>
        </div>
        <!--/Timeline item-->
       
    </div>
</section>
<!--Timeline carousel-->
       <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
      <script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js'></script>
    <script  src="js/index.js"></script>
</body>
</html>

【问题讨论】：

  • 您能否创建一个MCVE 并举例说明您想要达到的目标（一幅画就足够了）？您在寻找.timeline-carousel__item .media-wrapper { width: 100%; } 吗？我猜。如果是这样，我会写一个正确的答案。

标签： javascript html css


【解决方案1】：

图像之间有这么多空白的原因是您只更改每张幻灯片中图像的大小，而不是幻灯片本身。

这样做：

.slick-slide {
    width: 300px;
}

.timeline-carousel__item .media-wrapper {
    width: 100%;
}

最好给你的轮播设置一个宽度，然后给每张幻灯片一个百分比宽度。希望这会有所帮助！

【讨论】：

  • 谢谢马修，这很有帮助
【解决方案2】：

您应该控制轮播包装的大小，然后媒体包装应该是 100%。如果您不希望滑块中的其他项目溢出到当前视图中，则轮播包装器上的填充也应为 0

var $;
$.js = function (el) {
    'use strict';
    return $('[data-js=' + el + ']');
};

function carousel() {
    "use strict";
    $.js('timeline-carousel').slick({
        infinite: false,
        arrows: false,
        dots: true,
        autoplay: false,
        speed: 1000,
        slidesToShow: 1,
        slidesToScroll: 1,
        responsive: [
            {
                breakpoint : 800,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }]
    });
}

carousel();
body {
    margin: 0;
    background-color: #f2f2f2;
    font-family: "Roboto", sans-serif;
}

#title {
    color: #000000;
}

.text {
    color: #000000;
}

* {
    outline: none;
}

.timeline-carousel {
    width: 40vw;
    position: relative;
    overflow:hidden;
}

.timeline-carousel:after, .timeline-carousel:before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    height: 100%;
    width: 6.9444%;
    background-color: #f2f2f2;
    z-index: 3;
    width: 6.9444%;
}

.timeline-carousel:after {
    left: 0;
}

.timeline-carousel:before {
    right: 0;
    opacity: 0;
}

.timeline-carousel .slick-list {
    overflow: visible;
}

.timeline-carousel .slick-dots {
    bottom: -40px;
}

.timeline-carousel h1 {
    color: white;
    font-size: 46px;
    line-height: 50pd;
    margin-bottom: 40px;
    font-weight: 900;
}

.timeline-carousel__image {
   // padding-right: 30px;
    width: 100%:
}

.timeline-carousel__item {
    cursor: pointer;
}

.timeline-carousel__item .media-wrapper {
    opacity: 0.4;
    
    padding-bottom: 30%;
    width: 100%;
    
    -webkit-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    -o-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.timeline-carousel__item:last-child .timeline-carousel__item-inner:after {
  width: calc(100% - 30px);
}

.timeline-carousel__item-inner {
  position: relative;
  padding-top: 45px;
}
.timeline-carousel__item-inner:after {
  position: absolute;
  width: 100%;
  top: 45px;
  left: 0;
  content: "";
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.timeline-carousel__item-inner .year {
  font-size: 36px;
  line-height: 36px;
  color: #000000;
  display: table;
  letter-spacing: -1px;
  padding-right: 10px;
  background-color: #f2f2f2;
  z-index: 1;
  position: relative;
  margin: -15px 0 20px;
  font-weight: 900;
}
.timeline-carousel__item-inner .year:after {
  content: "";
  position: absolute;
  display: block;
  left: -10px;
  top: 0;
  height: 100%;
  width: 10px;
  background-color: #f2f2f2;
  z-index: 3;
}

.timeline-carousel__item-inner p {
  font-size: 16px;
  line-height: 18px;
  color: #000000;
  width: 60%;
  font-weight: 400;
}

.timeline-carousel__item-inner .read-more:hover:after {
  width: 100%;
}

.timeline-carousel__item-inner .pointer {
  height: 29px;
  position: relative;
  z-index: 1;
  margin: -4px 0 16px;
}

.timeline-carousel__item-inner .pointer:after, .timeline-carousel__item-inner .pointer:before {
  position: absolute;
  content: "";
}

.timeline-carousel__item-inner .pointer:after {
  width: 9px;
  height: 9px;
  border-radius: 100%;
  top: 0;
  left: 0;
  background-color: #b38c52;
}

.timeline-carousel__item-inner .pointer:before {
  width: 1px;
  height: 100%;
  top: 0;
  left: 4px;
  background-color: #b38c52;
}

.timeline-carousel .slick-active .media-wrapper {
  opacity: 1 !important;
}

.slick-dots {
  bottom: 60px;
  list-style: none;
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  z-index: 2;
}

.slick-dots li {
  cursor: pointer;
  display: inline-block;
  margin: 0 6px;
  position: relative;
  width: 10px;
  height: 10px;
}

.slick-dots li:last-child {
  margin-right: 0;
}

.slick-dots li.slick-active button {
  background: #b38c52;
  border-color: #b38c52;
}

.slick-dots li button {
  display: block;
  font-size: 0;
  width: 10px;
  height: 10px;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  -webkit-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  -o-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.slick-dots li button:hover {
  background: #b38c52;
  border-color: #b38c52;
}

.link {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 20px;
  z-index: 9999;
}

.link a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #fff;
}

.link .fa {
  font-size: 28px;
  margin-right: 8px;
  color: #fff;
}
<!DOCTYPE html>
<html lang="en" >

<head>
    <meta charset="UTF-8">
    <title>Responsive history timeline</title>

    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700,900" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css'>

    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css'>

    <link rel="stylesheet" href="css/style.css">
</head>

<body>
<!--Timeline carousel-->
<section class="timeline-carousel">
    <h1 id="title" >History timeline</h1>
    <div class="timeline-carousel__item-wrapper" data-js="timeline-carousel">
        <!--Timeline item-->
        <div class="timeline-carousel__item">
            <div class="timeline-carousel__image">
                <div class="media-wrapper media-wrapper--overlay" style="background: url('https://www.historyonthenet.com/wp-content/uploads/2016/12/135151-004-0D4D550E.jpg') center center; background-size:cover;"></div>
            </div>
            <div class="timeline-carousel__item-inner">
                <span class="year">Late 1800</span>
                <p>Started trading.</p>
            </div>
        </div>
        <!--/Timeline item-->
       
        <!--/Timeline item-->
        <div class="timeline-carousel__item">
            <div class="timeline-carousel__image">
                <div class="media-wrapper media-wrapper--overlay" style="background: url('https://www.historyonthenet.com/wp-content/uploads/2016/12/135151-004-0D4D550E.jpg') center center; background-size:cover;"></div>
            </div>
            <div class="timeline-carousel__item-inner">
                <span class="year">1960</span>
                <p>Francis Busuttil and Sons Limited was formed.</p>
            </div>
        </div>
        <!--/Timeline item-->
        
       <!--/Timeline item-->
        <div class="timeline-carousel__item">
            <div class="timeline-carousel__image">
                <div class="media-wrapper media-wrapper--overlay" style="background: url('https://www.historyonthenet.com/wp-content/uploads/2016/12/135151-004-0D4D550E.jpg') center center; background-size:cover;"></div>
            </div>
            <div class="timeline-carousel__item-inner">
                <span class="year">1960</span>
                <p>Acquisition of the first premises in Santa Venera.</p>
            </div>
        </div>
        <!--/Timeline item-->
        
        <!--/Timeline item-->
        <div class="timeline-carousel__item">
            <div class="timeline-carousel__image">
                <div class="media-wrapper media-wrapper--overlay" style="background: url('https://www.historyonthenet.com/wp-content/uploads/2016/12/135151-004-0D4D550E.jpg') center center; background-size:cover;"></div>
            </div>
            <div class="timeline-carousel__item-inner">
                <span class="year">1984</span>
                <p>Establishment of the Wines and Spirits Division.</p>
            </div>
        </div>
        <!--/Timeline item-->
        
        <!--/Timeline item-->
        <div class="timeline-carousel__item">
            <div class="timeline-carousel__image">
                <div class="media-wrapper media-wrapper--overlay" style="background: url('https://www.historyonthenet.com/wp-content/uploads/2016/12/135151-004-0D4D550E.jpg') center center; background-size:cover;"></div>
            </div>
            <div class="timeline-carousel__item-inner">
                <span class="year">1990</span>
                <p>Expansion of the distribution center.</p>
            </div>
        </div>
        <!--/Timeline item-->
        
        <!--/Timeline item-->
        <div class="timeline-carousel__item">
            <div class="timeline-carousel__image">
                <div class="media-wrapper media-wrapper--overlay" style="background: url('https://www.historyonthenet.com/wp-content/uploads/2016/12/135151-004-0D4D550E.jpg') center center; background-size:cover;"></div>
            </div>
            <div class="timeline-carousel__item-inner">
                <span class="year">1993</span>
                <p>Appointed distributor of General Mills.</p>
            </div>
        </div>
        <!--/Timeline item-->
        
        <!--/Timeline item-->
        <div class="timeline-carousel__item">
            <div class="timeline-carousel__image">
                <div class="media-wrapper media-wrapper--overlay" style="background: url('https://www.historyonthenet.com/wp-content/uploads/2016/12/135151-004-0D4D550E.jpg') center center; background-size:cover;"></div>
            </div>
            <div class="timeline-carousel__item-inner">
                <span class="year">1993</span>
                <p>Appointed distributor of Tate of Lyles.</p>
            </div>
        </div>
        <!--/Timeline item-->
        
        <!--/Timeline item-->
        <div class="timeline-carousel__item">
            <div class="timeline-carousel__image">
                <div class="media-wrapper media-wrapper--overlay" style="background: url('https://www.historyonthenet.com/wp-content/uploads/2016/12/135151-004-0D4D550E.jpg') center center; background-size:cover;"></div>
            </div>
            <div class="timeline-carousel__item-inner">
                <span class="year">1995</span>
                <p>Appointed distributor of Mars.</p>
            </div>
        </div>
        <!--/Timeline item-->
        
        <!--/Timeline item-->
        <div class="timeline-carousel__item">
            <div class="timeline-carousel__image">
                <div class="media-wrapper media-wrapper--overlay" style="background: url('https://www.historyonthenet.com/wp-content/uploads/2016/12/135151-004-0D4D550E.jpg') center center; background-size:cover;"></div>
            </div>
            <div class="timeline-carousel__item-inner">
                <span class="year">2000</span>
                <p>Group restructuring.</p>
            </div>
        </div>
        <!--/Timeline item-->
        
        <!--/Timeline item-->
        <div class="timeline-carousel__item">
            <div class="timeline-carousel__image">
                <div class="media-wrapper media-wrapper--overlay" style="background: url('https://www.historyonthenet.com/wp-content/uploads/2016/12/135151-004-0D4D550E.jpg') center center; background-size:cover;"></div>
            </div>
            <div class="timeline-carousel__item-inner">
                <span class="year">2012</span>
                <p>Establishment of the new offices.</p>
            </div>
        </div>
        <!--/Timeline item-->
        
        <!--/Timeline item-->
        
        <div class="timeline-carousel__item">
            <div class="timeline-carousel__image">
                <div class="media-wrapper media-wrapper--overlay" style="background: url('https://www.historyonthenet.com/wp-content/uploads/2016/12/135151-004-0D4D550E.jpg') center center; background-size:cover;"></div>
            </div>
            <div class="timeline-carousel__item-inner">
                <span class="year"> March 2018</span>
                <p>Acquisition of Charles Darmanin.</p>
            </div>
        </div>
        <!--/Timeline item-->
        
        <!--/Timeline item-->
        <div class="timeline-carousel__item">
            <div class="timeline-carousel__image">
                <div class="media-wrapper media-wrapper--overlay" style="background: url('https://www.historyonthenet.com/wp-content/uploads/2016/12/135151-004-0D4D550E.jpg') center center; background-size:cover;"></div>
            </div>
            <div class="timeline-carousel__item-inner">
                <span class="year">July 2018</span>
                <p>Appointed distributor of Barilla.</p>
            </div>
        </div>
        <!--/Timeline item-->
       
    </div>
</section>
<!--Timeline carousel-->
       <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
      <script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js'></script>
    <script  src="js/index.js"></script>
</body>
</html>

【讨论】：

    【解决方案3】：

    我推荐引导轮播

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <style>

  .carousel-inner img {
      width: 30%;
      height: 40%;
  }
  .carousel-item {
    padding-top: 15%;
    padding-left: 40%;
  }

  div {
    height:100vh;
}
  </style>
</head>
<body>

<div id="demo" class="carousel slide col-xs-1" data-ride="carousel" style="">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://www.historyonthenet.com/wp-content/uploads/2016/12/135151-004-0D4D550E.jpg" alt="Los Angeles">
      <div class="carousel-caption">
        <h3>Los Angeles</h3>
      </div>   
    </div>
    <div class="carousel-item">
      <img src="https://www.historyonthenet.com/wp-content/uploads/2016/12/135151-004-0D4D550E.jpg" alt="Chicago">
      <div class="carousel-caption">
        <h3>Chicago</h3>
      </div>   
    </div>
    <div class="carousel-item">
      <img src="https://www.historyonthenet.com/wp-content/uploads/2016/12/135151-004-0D4D550E.jpg" alt="New York">
      <div class="carousel-caption">
        <h3>New York</h3>
      </div>   
    </div>
  </div>
</div>

</body>

<script>
$(document).ready(function() {
   $("#demo").swiperight(function() {
      $(this).carousel('prev');
    });
   $("#demo").swipeleft(function() {
      $(this).carousel('next');
   });
});
</script>

</html>

    【讨论】：

      猜你喜欢
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode