Make the background of the slideshow transparent

Question

I just want the slideshow part in the same size and ratio to the screen, but I want to embed the result page in middle of some other site.

So I want the background of the page to be transparent when I add it as an iframe to the page.

 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> 

Answer 1

Not sure if I understand your question.

1. Move background color from html, body to .slideshow
2. Add height: 100% to .slick-list & .slick-track

 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>