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

时间：2018-05-31 07:58:09

标签： javascript html css

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

然而，我要求它每个幻灯片/动画片段只显示一张图片，并且图片尺寸必须更小。我已设法缩小图像大小并一次预览一张图像。

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

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

克里斯

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>

3 个答案:

答案 0 :(得分：0)

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

＆＃13;
＆＃13; 
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();
＆＃13; 
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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

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

这样做：

.slick-slide {
    width: 300px;
}

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

理想的情况是为您的旋转木马设置一个宽度，然后为每个幻灯片提供一个百分比宽度。希望这有帮助！

答案 2 :(得分：0)

我推荐bootstrap carousel 

<!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>
相关问题
最新问题