使幻灯片的背景透明

时间：2018-09-28 11:55:25

标签： html css html5 css3 slideshow

我只希望幻灯片显示部分与屏幕具有相同的大小和比例，但我想将结果页面嵌入到其他网站的中间。

因此，当我将其作为iframe添加到页面时，我希望页面的背景是透明的。

function slideshow() {
  // clone
  $('.slider-1').clone().removeClass('slider-1').addClass('slider-2').insertAfter($('.slider'));

  // set first
  $('.slider-1').slick({
    draggable: false,
    dots: false,
    infinite: true,
    responsive: true,
    asNavFor: '.slider-2',
    touchThreshold: 20,
    speed: 1000,
    fade: true
  });

  // set second
  $('.slider-2').slick({
    dots: true,
    infinite: true,
    responsive: true,
    asNavFor: '.slider-1',
    arrows: false,
    speed: 1000,
    easing: 'easeInOutQuart'
  });
}

$(function() {
  slideshow();
  setTimeout(function() {
    $('.slider-1 .slick-next').click();
  }, 1000);
})
 body, html {
  height: 100%;
  background: #000;
  overflow: hidden;
}

.slideshow {
  position: relative;
  height: 100%;
  z-index: 1;
}

/*----------------------------------------
Slider 1
----------------------------------------*/
.slider {
  height: 100%;
  overflow: hidden;
}
.slider .item {
  overflow: hidden;
  position: relative;
  height: 100%;
}
.slider .item img {
  width: auto;
  height: 100%;
  position: relative;
  z-index: 1;
  left: 50%;
  -webkit-transform: translateX(-50%) scale(1.4);
          transform: translateX(-50%) scale(1.4);
  opacity: .4;
  -webkit-filter: blur(50px) saturate(3);
          filter: blur(50px) saturate(3);
}

/*----------------------------------------
Slider 2
----------------------------------------*/
.slider-2 {
  position: absolute;
  z-index: 11;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 0%;
  padding-bottom: 35%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.slider-2:before {
  content: '';
  position: absolute;
  left: -1%;
  bottom: -1%;
  width: 102%;
  height: 50%;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  z-index: 1;
  pointer-events: none;
}
.slider-2 .item {
  height: 0;
  padding-bottom: 16%;
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
  background: #333;
}
.slider-2 .item.slick-active {
  z-index: 10;
}
.slider-2 .item img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  height: 100%;
  width: auto;
  opacity: 1;
  -webkit-filter: none;
          filter: none;
}
.slider-2 .slick-dots {
  bottom: 15px;
  z-index: 1;
  text-align: center;
  position: absolute;
  padding: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.slider-2 .slick-dots li {
  display: inline;
  margin: 0;
  padding: 0;
}
.slider-2 .slick-dots li button {
  border: none;
  background: none;
  text-indent: -9999px;
  font-size: 0;
  width: 20px;
  height: 20px;
  outline: none;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.slider-2 .slick-dots li button:before {
  content: '';
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 4px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: .7;
  transition: all .5s ease-out;
}
.slider-2 .slick-dots li.slick-active button:before {
  -webkit-transform: translate(-50%, -50%) scale(1.4);
          transform: translate(-50%, -50%) scale(1.4);
  opacity: 1;
}

/*----------------------------------------
Arrows
----------------------------------------*/
.slick-arrow {
  position: absolute;
  z-index: 10;
  left: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0;
  outline: none;
  width: 40px;
  height: 40px;
}
.slick-arrow:before {
  content: '';
  width: 30px;
  height: 30px;
  background-color: #fff;
  -webkit-mask-image: url(http://cdn.flaticon.com/svg/22/22086.svg);
          mask-image: url(http://cdn.flaticon.com/svg/22/22086.svg);
  display: block;
  opacity: .5;
  transition: all .5s ease-out;
}
.slick-arrow.slick-next {
  left: auto;
  right: 10px;
}
.slick-arrow.slick-next:before {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.slick-arrow:hover:before {
  opacity: 1;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css'>

<div class="slideshow">
  <div class="slider slider-1">
    <div class="item">
      <img src="https://images.unsplash.com/photo-1465935343323-d742334bcbda?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925">
    </div>
    <div class="item">
      <img src="https://images.unsplash.com/photo-1443890923422-7819ed4101c0?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925">
    </div>
    <div class="item">
      <img src="https://images.unsplash.com/photo-1474861644511-0f2775ae97cc?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925">
    </div>
  </div>
</div>

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<script src='http://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js'></script>

1 个答案:

答案 0 :(得分：0)

不确定我是否理解您的问题。

  1. 将背景颜色从html，正文移动到.slideshow
  2. 增加高度：.slick-list和.slick-track的高度100％

function slideshow() {
  // clone
  $('.slider-1').clone().removeClass('slider-1').addClass('slider-2').insertAfter($('.slider'));

  // set first
  $('.slider-1').slick({
    draggable: false,
    dots: false,
    infinite: true,
    responsive: true,
    asNavFor: '.slider-2',
    touchThreshold: 20,
    speed: 1000,
    fade: true
  });

  // set second
  $('.slider-2').slick({
    dots: true,
    infinite: true,
    responsive: true,
    asNavFor: '.slider-1',
    arrows: false,
    speed: 1000,
    easing: 'easeInOutQuart'
  });
}

$(function() {
  slideshow();
  setTimeout(function() {
    $('.slider-1 .slick-next').click();
  }, 1000);
})
body, html {
  height: 100%;
  background: transparent;
  overflow: hidden;
}

.slideshow {
  background: #000;
  position: relative;
  height: 100%;
  z-index: 1;
}

.slick-list,
.slick-track{
  height: 100%;
}

/*----------------------------------------
Slider 1
----------------------------------------*/
.slider {
  height: 100%;
  overflow: hidden;
}
.slider .item {
  overflow: hidden;
  position: relative;
  height: 100%;
}
.slider .item img {
  width: auto;
  height: 100%;
  position: relative;
  z-index: 1;
  left: 50%;
  -webkit-transform: translateX(-50%) scale(1.4);
          transform: translateX(-50%) scale(1.4);
  opacity: .4;
  -webkit-filter: blur(50px) saturate(3);
          filter: blur(50px) saturate(3);
}

/*----------------------------------------
Slider 2
----------------------------------------*/
.slider-2 {
  position: absolute;
  z-index: 11;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 0%;
  padding-bottom: 35%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.slider-2:before {
  content: '';
  position: absolute;
  left: -1%;
  bottom: -1%;
  width: 102%;
  height: 50%;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  z-index: 1;
  pointer-events: none;
}
.slider-2 .item {
  height: 0;
  padding-bottom: 16%;
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
  background: #333;
}
.slider-2 .item.slick-active {
  z-index: 10;
}
.slider-2 .item img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  height: 100%;
  width: auto;
  opacity: 1;
  -webkit-filter: none;
          filter: none;
}
.slider-2 .slick-dots {
  bottom: 15px;
  z-index: 1;
  text-align: center;
  position: absolute;
  padding: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.slider-2 .slick-dots li {
  display: inline;
  margin: 0;
  padding: 0;
}
.slider-2 .slick-dots li button {
  border: none;
  background: none;
  text-indent: -9999px;
  font-size: 0;
  width: 20px;
  height: 20px;
  outline: none;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.slider-2 .slick-dots li button:before {
  content: '';
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 4px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: .7;
  transition: all .5s ease-out;
}
.slider-2 .slick-dots li.slick-active button:before {
  -webkit-transform: translate(-50%, -50%) scale(1.4);
          transform: translate(-50%, -50%) scale(1.4);
  opacity: 1;
}

/*----------------------------------------
Arrows
----------------------------------------*/
.slick-arrow {
  position: absolute;
  z-index: 10;
  left: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0;
  outline: none;
  width: 40px;
  height: 40px;
}
.slick-arrow:before {
  content: '';
  width: 30px;
  height: 30px;
  background-color: #fff;
  -webkit-mask-image: url(http://cdn.flaticon.com/svg/22/22086.svg);
          mask-image: url(http://cdn.flaticon.com/svg/22/22086.svg);
  display: block;
  opacity: .5;
  transition: all .5s ease-out;
}
.slick-arrow.slick-next {
  left: auto;
  right: 10px;
}
.slick-arrow.slick-next:before {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.slick-arrow:hover:before {
  opacity: 1;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css'>

<div class="slideshow">
  <div class="slider slider-1">
    <div class="item">
      <img src="https://images.unsplash.com/photo-1465935343323-d742334bcbda?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925">
    </div>
    <div class="item">
      <img src="https://images.unsplash.com/photo-1443890923422-7819ed4101c0?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925">
    </div>
    <div class="item">
      <img src="https://images.unsplash.com/photo-1474861644511-0f2775ae97cc?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925">
    </div>
  </div>
</div>

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<script src='http://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js'></script>

相关问题
最新问题