Sorry, I repost the problem:
I want to remove a single container when their border right x become inferior to the border left x of their parent. It work fine with visibility hidden, but not with remove() as it remove all the containers.
Here the complete code of the problem...
Here is the JavaScript, for what the result is unexpected
let isPassed = setInterval(function() {
let containers = document.querySelectorAll(".container");
let division = document.querySelector(".division")
containers.forEach((container) => {
let containerRight = parseInt(container.getBoundingClientRect().right);
let zoneLeft = parseInt(division.getBoundingClientRect().left);
if (containerRight <= zoneLeft) {
//container.style.visibility = "hidden"; // work fine
//container.style.display = "none"; // hide all the container
container.remove() // remove all the container
}
})
}, 100);
body,
html {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.division {
position: relative;
display: flex;
flex-direction: row;
width: 320px;
height: 128px;
border: 1px solid red;
/* overflow: hidden; */
}
.container {
display: flex;
flex-direction: column;
position: relative;
bottom: 0;
height: 128px;
width: 64px;
display: flex;
align-items: center;
visibility: visible;
animation: translation 5s linear;
border: 1px solid rgb(0, 0, 0);
}
.container>div {
display: flex;
position: relative;
justify-content: center;
width: 64px;
height: 64px;
border: 1px solid black;
}
#keyframes translation {
0% {
right: 64px;
}
100% {
right: 896px;
}
}
<div class="division">
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
If you remove() the most left container, the other contains will move over to fill the gap that is there by removing the previous containers.
When they move, they instantly match your if, and therefore they are removed them self.
Fix 1
Use justify-content: flex-end; on the .division so that the containers are aligned from the end of the box, so it won't overlap if you remove any of them. This way remove() will work as expected
let isPassed = setInterval(function() {
let containers = document.querySelectorAll(".container");
let division = document.querySelector(".division")
containers.forEach((container) => {
let containerRight = parseInt(container.getBoundingClientRect().right);
let zoneLeft = parseInt(division.getBoundingClientRect().left);
if (containerRight <= zoneLeft) {
container.remove();
}
})
}, 100);
body,
html {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.division {
justify-content: flex-end;
position: relative;
display: flex;
flex-direction: row;
width: 320px;
height: 128px;
border: 1px solid red;
/* overflow: hidden; */
}
.container {
display: flex;
flex-direction: column;
position: relative;
bottom: 0;
height: 128px;
width: 64px;
display: flex;
align-items: center;
visibility: visible;
animation: translation 5s linear;
border: 1px solid rgb(0, 0, 0);
}
.container>div {
display: flex;
position: relative;
justify-content: center;
width: 64px;
height: 64px;
border: 1px solid black;
}
#keyframes translation {
0% {
right: 64px;
}
100% {
right: 896px;
}
}
<div class="division">
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
Fix 2
Using style.visibility = "hidden" is your best option, if you don't want to change the HTML/CSS to prevent the moving of the containers when you remove() one.
let isPassed = setInterval(function() {
let containers = document.querySelectorAll(".container");
let division = document.querySelector(".division")
containers.forEach((container) => {
let containerRight = parseInt(container.getBoundingClientRect().right);
let zoneLeft = parseInt(division.getBoundingClientRect().left);
if (containerRight <= zoneLeft) {
container.style.visibility = "hidden"; // work fine
}
})
}, 100);
body,
html {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.division {
position: relative;
display: flex;
flex-direction: row;
width: 320px;
height: 128px;
border: 1px solid red;
/* overflow: hidden; */
}
.container {
display: flex;
flex-direction: column;
position: relative;
bottom: 0;
height: 128px;
width: 64px;
display: flex;
align-items: center;
visibility: visible;
animation: translation 5s linear;
border: 1px solid rgb(0, 0, 0);
}
.container>div {
display: flex;
position: relative;
justify-content: center;
width: 64px;
height: 64px;
border: 1px solid black;
}
#keyframes translation {
0% {
right: 64px;
}
100% {
right: 896px;
}
}
<div class="division">
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="container A">
<div class="box1"></div>
<div class="box2"></div>
</div>
</div>
Related
I currently make a tab which the tab content is containing iframe. I want it to every time the tab is clicked, the iframe reload the page.
But when I inspected, the source attributes exist in every iframe, and the issues shows up that states: Uncaught TypeError: Cannot read properties of undefined (reading 'setAttribute'). I'm very new in JavaScript, and have no idea to code. Please help me through this. Thank you so much.
So, here's the code :
let tabs = document.querySelectorAll('.tab');
let content = document.querySelectorAll('.content-item');
for (let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', () => tabClick(i));
}
function tabClick(currentTab) {
removeActive();
tabs[currentTab].classList.add('active');
content[currentTab].classList.add('active');
content[currentTab].removeAttribute('src');
}
function removeActive() {
for (let i = 0; i < tabs.length; i++) {
tabs[i].classList.remove('active');
content[i].classList.remove('active');
content[i].setAttribute('src', content[i].getAttribute('data-src'));
}
}
.container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.tabs {
display: flex;
justify-content: center;
width: 100%;
}
.tab {
font-size: 16px;
padding: 5px 15px;
cursor: pointer;
}
.tab.active {
background-color: rgb(250, 97, 9);
}
.content {
width: 100vw;
margin-top: 50px;
}
.content-item {
display: none;
padding: 0px;
border: none;
}
.content-item.active {
display: flex;
justify-content: center;
}
.content-iframe {
border: none;
padding: 0px;
margin: 0px;
width: 100vw;
height: 50vh;
}
<div class="container">
<div class="tabs">
<div class="tab active">Tokyo</div>
<div class="tab">Paris</div>
<div class="tab">Washington</div>
<div class="tab">Jakarta</div>
<div class="tab">London</div>
</div>
<div class="content">
<div class="content-item active">
<iframe class="content-iframe" data-src="https://en.wikipedia.org/wiki/Tokyo" src="https://en.wikipedia.org/wiki/Tokyo" loading="lazy"></iframe>
</div>
<div class="content-item">
<iframe class="content-iframe" data-src="https://en.wikipedia.org/wiki/Paris" src="https://en.wikipedia.org/wiki/Paris" loading="lazy"></iframe>
</div>
<div class="content-item">
<iframe class="content-iframe" data-src="https://en.wikipedia.org/wiki/Washington" src="https://en.wikipedia.org/wiki/Washington" loading="lazy"></iframe>
</div>
<div class="content-item">
<iframe class="content-iframe" data-src="https://en.wikipedia.org/wiki/Jakarta" src="https://en.wikipedia.org/wiki/Jakarta" loading="lazy"></iframe>
</div>
<div class="content-item">
<iframe class="content-iframe" data-src="https://en.wikipedia.org/wiki/London" src="https://en.wikipedia.org/wiki/London" loading="lazy"></iframe>
</div>
</div>
</div>
First, I think you were doing the two iframe operations in the wrong place. I've reversed them so the iframe is cleared in removeActive(). Then, you weren't targeting the iframes with your source updates.
Otherwise you're doing great. Keep it up!
let tabs = document.querySelectorAll('.tab');
let content = document.querySelectorAll('.content-item');
for (let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', () => tabClick(i));
}
function tabClick(currentTab) {
const iframe = content[currentTab].querySelector('iframe');
removeActive();
tabs[currentTab].classList.add('active');
content[currentTab].classList.add('active');
iframe.setAttribute('src', iframe.getAttribute('data-src'));
}
function removeActive() {
for (let i = 0; i < tabs.length; i++) {
tabs[i].classList.remove('active');
content[i].classList.remove('active');
content[i].querySelector('iframe').removeAttribute('src');
}
}
.container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.tabs {
display: flex;
justify-content: center;
width: 100%;
}
.tab {
font-size: 16px;
padding: 5px 15px;
cursor: pointer;
}
.tab.active {
background-color: rgb(250, 97, 9);
}
.content {
width: 100vw;
margin-top: 50px;
}
.content-item {
display: none;
padding: 0px;
border: none;
}
.content-item.active {
display: flex;
justify-content: center;
}
.content-iframe {
border: none;
padding: 0px;
margin: 0px;
width: 100vw;
height: 50vh;
}
<div class="container">
<div class="tabs">
<div class="tab active">Tokyo</div>
<div class="tab">Paris</div>
<div class="tab">Washington</div>
<div class="tab">Jakarta</div>
<div class="tab">London</div>
</div>
<div class="content">
<div class="content-item active">
<iframe class="content-iframe" data-src="https://en.wikipedia.org/wiki/Tokyo" src="https://en.wikipedia.org/wiki/Tokyo" loading="lazy"></iframe>
</div>
<div class="content-item">
<iframe class="content-iframe" data-src="https://en.wikipedia.org/wiki/Paris" src="https://en.wikipedia.org/wiki/Paris" loading="lazy"></iframe>
</div>
<div class="content-item">
<iframe class="content-iframe" data-src="https://en.wikipedia.org/wiki/Washington" src="https://en.wikipedia.org/wiki/Washington" loading="lazy"></iframe>
</div>
<div class="content-item">
<iframe class="content-iframe" data-src="https://en.wikipedia.org/wiki/Jakarta" src="https://en.wikipedia.org/wiki/Jakarta" loading="lazy"></iframe>
</div>
<div class="content-item">
<iframe class="content-iframe" data-src="https://en.wikipedia.org/wiki/London" src="https://en.wikipedia.org/wiki/London" loading="lazy"></iframe>
</div>
</div>
</div>
Ok, let's say that I have two buttons, a container with two divs and below I have my footer, like this:
<button id="bt1">Show all</button>
<button id="bt2">Show curses</button>
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
<footer></footer>
I'm displaying content inside my divs. Div "one" has more height, much more. In order to hide div "two" and don't overlap content, I use opacity:0.
I have two buttons, to show or to hide div "one" or "two" (using jQuery).
But if I only use opacity:0 to hide div "one" when I show div "two", the page leaves a big space empty (due to div "one" has more height than div "two"). As here:
enter image description here
So I decided to use display:none to hide div "one", in order to don't leave space and just show the necessary space for div "two". But my footer goes up!! And overlaps content with div "two".
Here is the image: enter image description here
How can I solve this? Any ideas? I realized that my footer moves because not finding the content of div "one", it goes up. Sorry for my english haha
Here I leave you guys an excelent example of what happens to me, you can COPY and run:
HTML:
var cont_all = $('.one');
var bt1 = $('#bt1');
var cont_curses = $('.two');
var bt2 = $('#bt2');
bt2.click(function(){
cont_all.css('display', 'none');
cont_curses.css('opacity', '1');
});
bt1.click(function(){
cont_curses.css('opacity', '0');
cont_all.css('display', 'flex');
});
h2 {
text-align: center;
font-size: 40px;
}
.container {
margin-top: 50px;
position: relative;
height: auto;
padding-bottom: 50px;
}
.one, .two {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
height: auto;
}
.one {
overflow: hidden;
}
.two {
width: 100%;
position: absolute;
top: 0px;
opacity: 0;
}
.chart {
width: 30%;
height: 200px;
margin: 15px;
background: #2096CE;
}
.curse {
width: 30%;
height: 200px;
margin: 15px;
background: #23AD5A;
}
footer {
height: 200px;
background: black;
color: white;
display: flex;
justify-content: center;
text-align: center;
}
p {
text-align: center;
font-size: 35px;
margin: auto 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<h2>Problem with divs</h2>
</header>
<button id="bt1">Show all</button>
<button id="bt2">Show curses</button>
<div class="container">
<div class="one">
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
</div>
<div class="two">
<div class="curse"></div>
<div class="curse"></div>
<div class="curse"></div>
<div class="curse"></div>
</div>
</div>
<footer>
<p>I'm the footer</p>
</footer>
Well it's not the same at all, because it's a big project, but basically is that.
Full answer
check the max-height toggles
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display None</title>
<link rel="stylesheet" href="estilos.css">
<style>
h2 {
text-align: center;
font-size: 40px;
}
.container {
margin-top: 50px;
position: relative;
height: auto;
padding-bottom: 50px;
}
.one, .two {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
height: auto;
overflow: hidden;
}
.chart {
width: 30%;
height: 200px;
margin: 15px;
background: #2096CE;
}
.curse {
width: 30%;
height: 200px;
margin: 15px;
background: #23AD5A;
}
footer {
height: 200px;
background: black;
color: white;
display: flex;
justify-content: center;
text-align: center;
}
p {
text-align: center;
font-size: 35px;
margin: auto 0;
}
</style>
</head>
<body>
<header>
<h2>Problem with divs</h2>
</header>
<button id="bt1">Show all</button>
<button id="bt2">Show curses</button>
<div class="container">
<div class="one">
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
<div class="chart"></div>
</div>
<div class="two">
<div class="curse"></div>
<div class="curse"></div>
<div class="curse"></div>
<div class="curse"></div>
</div>
</div>
<footer>
<p>I'm the footer</p>
</footer>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var cont_all = $('.one');
var bt1 = $('#bt1');
var cont_curses = $('.two');
var bt2 = $('#bt2');
bt2.click(function(){
cont_all.css('max-height', '0px');
cont_curses.css('max-height', '100%');
});
bt1.click(function(){
cont_curses.css('max-height', '0px');
cont_all.css('max-height', '100%');
});
</script>
</body>
</html>
I am slightly changed #alexkarpen answer. Instead of max-height you can also use fadeIn() and fadeOut() jquery function. it looks a little bit cool
var cont_all = $('.one');
var bt1 = $('#bt1');
var cont_curses = $('.two');
var bt2 = $('#bt2');
var cont_project = $('.three');
var bt3 = $('#bt3');
bt2.click(function(){
cont_all.fadeOut("slow");
cont_project.fadeOut();
cont_curses.fadeIn("slow");
});
bt3.click(function(){
cont_all.fadeOut();
cont_curses.fadeOut();
cont_project.fadeIn("slow");
});
bt1.click(function(){
cont_curses.fadeIn("slow");
cont_project.fadeIn("slow");
cont_all.fadeIn("slow");
});
.container {
margin-top: 30px;
position: relative;
height: auto;
padding-bottom: 50px;
}
.one, .two, .three {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
height: auto;
overflow: hidden;
}
.card {
width: 25%;
height: 200px;
margin: 15px;
}
.chart {
background: #2096CE;
}
.curse {
background: #23AD5A;
}
.project {
background: pink;
}
footer {
height: 200px;
background: black;
color: white;
display: flex;
justify-content: center;
text-align: center;
}
p {
text-align: center;
font-size: 35px;
margin: auto 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="bt1">Show All</button>
<button id="bt2">Show Curses</button>
<button id="bt3">Show Projects</button>
<div class="container">
<div class="one">
<div class="card chart"></div>
<div class="card chart"></div>
<div class="card chart"></div>
<div class="card chart"></div>
<div class="card chart"></div>
<div class="card chart"></div>
</div>
<div class="two">
<div class="card curse"></div>
<div class="card curse"></div>
<div class="card curse"></div>
</div>
<div class="three">
<div class="card project"></div>
<div class="card project"></div>
</div>
</div>
<footer>
<p>I'm the footer</p>
</footer>
Try this:
footer { height: 200px; background: black; color: white; display: flex; justify-content: center; text-align: center; position:fixed; bottom: 0px; }
I'm trying to create a responsive dots connecting among the images like below.
I'm able to achieve this with CSS, but the layout is collapsing when I tried to change the image widths or parent div width. How can I make this layout work for all screens and image dimensions?
Here is my code link:
https://jsfiddle.net/SampathPerOxide/q2yab607/29/
.dotted-line,
.dotted-line1 {
display: flex;
}
.over {
display: flex;
align-items: center;
justify-content: center;
}
.dotted-line::after {
content: ".......";
letter-spacing: 3px;
font-size: 30px;
color: #9cbfdb;
display: table-cell;
vertical-align: middle;
padding-left: 1px;
}
.dotted-line1::before {
content: "........";
letter-spacing: 3px;
font-size: 30px;
color: #9cbfdb;
display: table-cell;
vertical-align: middle;
padding-right: 1px;
}
.top:before {
transform: rotate(90deg);
content: "........";
letter-spacing: 3px;
font-size: 30px;
color: #9cbfdb;
position: absolute;
top: 5em;
margin-left: 0.5em;
}
<div style="width:90px;margin:0px auto;">
<div style=" height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
" class="top">
<img src="https://i.pinimg.com/736x/39/4b/f6/394bf6e1c3f2a7351105290ef9fe9dd1.jpg" style="width:100px;">
</div>
<br/><br/><br/>
<div class="over">
<div style="" class="dotted-line">
<img src="https://stat.overdrive.in/wp-content/odgallery/2020/06/57263_2020_Mercedes_Benz_GLS.jpg" style="width:100px;">
</div>
<div style="">
<h4 style="text-align:center;padding:10px;">
Choose
</h4>
</div>
<div style="" class="dotted-line1">
<img src="https://stat.overdrive.in/wp-content/odgallery/2020/06/57263_2020_Mercedes_Benz_GLS.jpg" style="width:100px;">
</div>
</div>
</div>
I would go for
display flex to easily arrange the items inside a flexbox
Use a repeated background-image with radial-gradient to achieve repeated responsive dots
* {
margin: 0;
box-sizing: border-box;
}
h4 {
padding: 1em;
}
.flex {
display: flex;
}
.flex.col {
flex-direction: column;
}
.flex.center {
justify-content: center;
}
.grow {
flex-grow: 1;
}
.dots-h,
.dots-v {
flex-grow: 1;
background-image: radial-gradient(1px 1px at center, #888 1px, transparent 1px);
}
.dots-h {
height: 1em;
background-repeat: repeat-x;
background-size: 10px 1em;
margin: auto 0;
}
.dots-v {
width: 1em;
background-repeat: repeat-y;
background-size: 1em 10px;
margin: 0 auto;
}
<div>
<div class="flex center">
<img src="https://picsum.photos/id/1/100/100">
</div>
<div class="flex center">
<img src="https://picsum.photos/id/2/100/100">
<div class="dots-h"></div>
<div class="flex col center">
<div class="dots-v"></div>
<h4>Choose</h4>
<div class="grow"><!-- Just a spacer --></div>
</div>
<div class="dots-h"></div>
<img src="https://picsum.photos/id/9/100/100">
</div>
</div>
I want to have a similar effect like on this page: https://melaniedaveid.com/ (half of the page is scrollable).
I can make a sticky box, but there are certain things that I don't know how to make, such as the text. The text must be bigger than the box, but if overflow: hidden, then it is not scrollable. If it's overflow: scroll, it scrolls only if the mouse is hovering over the section, but I want the mouse to be able to scroll anywhere on the page.
body {
display: flex;
}
.example {
width: 50%;
}
.block {
background: #888888;
height: 300px;
/* margin: 1em; */
border: 1px solid black;
}
.block.one {
height: 100px;
}
.box {
width: 100%;
height: 100px;
background: orange;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
}
.sticky {
position: sticky;
top: 10px;
}
.orange{
background: orange;
}
<div class="example">
<div class="block one"></div>
<div class="block">
<p class="box sticky"> </p>
</div>
<div class="block"></div>
</div>
<div class="example">
<div class="block one"></div>
<div class="block orange"></div>
<div class="block"></div>
</div>
Is this how you want it?
To create the sticky effect use position: sticky.
Code:
#wrapper {
display:flex;
flex-direction:row;
}
#sticky {
position: sticky;
position: -webkit-sticky;
background: #f83d23;
width: 50%;
height: 300px;
top: 0;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 6px #000;
color: #fff;
}
#para{
width:50%;
margin:10px;
}
<div id="wrapper">
<div id="sticky">
sticky
</div>
<div id="para">
This is a para
</div>
</div>
I have a layout made with iDangerous swiper and iScroll.js and I've found that I can't make click on any link or submit button inside of that layout.
I have made a Codepen as an example: http://codepen.io/anon/pen/eNzMVX
This is the layout and the initialization of Swiper and iScroll:
$(document).ready(function () {
//initialize swiper when document ready
var mainSwiper = new Swiper ('#slideshow', {
// Optional parameters
direction: 'horizontal',
keyboardControl: true,
mousewheelControl: false,
grabCursor: true,
loop: false
});
var scrollSwiper = new Swiper ('#scroller--1', {
// Optional parameters
scrollbar: '',
grabCursor: true,
direction: 'vertical',
keyboardControl: true,
slidesPerView: 'auto',
mousewheelControl: true,
freeMode: true
})
});
html,
body {
height: 100%;
overflow: hidden;
position: relative;
}
.main-wrap,
.content {
height: 100%;
position: relative;
}
.bg--darkgrey,
.bg--grey {
color: #fff;
}
.bg--darkgrey {
background-color: #a9a9a9;
}
.bg--grey {
background-color: #4b4b4b;
}
.bg--radial-gradient-trans {
top: 0;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
position: absolute;
background: -webkit-radial-gradient(rgba(255,255,255,0), rgba(0,0,0,0.8));
background: radial-gradient(rgba(255,255,255,0), rgba(0,0,0,0.8));
}
.bg--radial-gradient {
background: -webkit-radial-gradient(rgba(255,255,255,0.2), #c1c1c1);
background: radial-gradient(rgba(255,255,255,0.2), #c1c1c1);
}
.bg--linear-gradient {
background: -webkit-linear-gradient(#c1c1c1, rgba(255,255,255,0.2));
background: linear-gradient(#c1c1c1, rgba(255,255,255,0.2));
}
.header__cover {
width: 100%;
height: 100%;
min-height: 200px;
text-align: center;
position: relative;
background-size: cover;
}
.header__cover h1,
.header__cover h2,
.header__cover h3,
.header__cover p {
color: #fff;
}
.header__cover h1,
.header__cover h2,
.header__cover h3 {
text-transform: uppercase;
}
.header__cover--content {
top: 50%;
z-index: 2;
width: 100%;
padding: 1em 1.5em;
position: absolute;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.page__slide--1 {
background-color: #f00;
}
.page__slide--2 {
background-color: #008000;
}
.page__slide--content {
width: 100%;
min-height: 200px;
}
.swiper-container {
width: 100%;
height: 100%;
position: relative;
}
.swiper-slide {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
position: relative;
-webkit-box-orient: vertical;
-o-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.page__slide--content a {
color: #fff;
}
<div class="main-wrap">
<div class="content">
<div id="slideshow" class="swiper-container">
<div class="swiper-wrapper">
<article class="swiper-slide page__slide--1" id="home">
<div class="swiper-container" id="scroller--1">
<div class="swiper-wrapper">
<div class="swiper-slide">
<header class="header__cover">
<article class="header__cover--content">
<h1 class="beta">Slide 1</h1>
</article>
<div class="dotted"></div>
<div class="bg--radial-gradient-trans"></div>
<div class="triangle-fold"></div>
</header>
</div>
<div class="swiper-slide" style="background-color: blue;">
<div class="page__slide--content">
Google
</div>
</div>
</div>
</div>
</article>
<article class="swiper-slide page__slide--2" id="empresa">
<div class="swiper-container" id="scroller--2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<header class="header__cover">
<article class="header__cover--content">
<h1 class="beta">Slide 2</h1>
</article>
<div class="dotted"></div>
<div class="bg--radial-gradient-trans"></div>
<div class="triangle-fold"></div>
</header>
</div>
<div class="swiper-slide">
<div class="page__slide--content"></div>
</div>
</div>
</div>
</article>
</div>
<!-- .slideshow__container -->
</div>
<!-- #slideshow -->
</div>
</div>