I wanted to ask, how would I add pictures into a frame for a website? I will make carousels so it will cycle through pictures as well as have arrows so the user can manually scroll through those pictures.
But I want those pictures only to show up within the frame design I have.
I’m attaching the picture of a frame into which I want to add other pictures which will cycle through and also will be able to manually cycle through them.Frame
I have this so far.
https://jsfiddle.net/Neolix/fsn91box/
The frame is not there because I call it from my folder in .css file under label.
(The problem with this I have is that it scrolls through pages, I want it to only scrolls through images inside that frame)
here is the HTML code:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="css.css" />
</head>
<body>
<form>
<input type="radio" name="fancy" autofocus value="pools" id="pools" />
<input type="radio" name="fancy" value="trisky" id="trisky" />
<input type="radio" name="fancy" value="filler" id="filler" />
<input type="radio" name="fancy" value="Lorem ipsum dolor" id="Lorem ipsum dolor" />
<label for="pools">🏊 Pools</label><label for="trisky">♨️ trisky</label><label for="filler"> filler</label><label for="Lorem ipsum dolor">Lorem ipsum dolor</label>
</form>
</body>
</html>
Here is the css for it:
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
overflow: hidden;
}
label {
background-image: url("banner2.png");
color: #fff;
transition: transform 400ms ease-out;
display: inline-block;
min-height: 100%;
width: 100vw;
height: 100vh;
position: relative;
z-index: 1;
text-align: center;
line-height: 100vh;
}
form {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
white-space: nowrap;
}
input {
position: absolute;
}
.keys {
position: fixed;
z-index: 10;
bottom: 0;
left: 0;
right: 0;
padding: 1rem;
color: #fff;
text-align: center;
transition: all 300ms linear;
opacity: 0;
}
input:focus ~ .keys {
opacity: 0.8;
}
input:nth-of-type(1):checked ~ label:nth-of-type(1),
input:nth-of-type(2):checked ~ label:nth-of-type(2),
input:nth-of-type(3):checked ~ label:nth-of-type(3),
input:nth-of-type(4):checked ~ label:nth-of-type(4){
z-index: 0;
}
input:nth-of-type(1):checked ~ label {
transform: translate3d(0, 0, 0);
}
input:nth-of-type(2):checked ~ label {
transform: translate3d(-100%, 0, 0);
}
input:nth-of-type(3):checked ~ label {
transform: translate3d(-200%, 0, 0);
}
input:nth-of-type(4):checked ~ label {
transform: translate3d(-300%, 0, 0);
}
label {
background-size: cover;
font-size: 3rem;
}
label:before,
label:after {
color: white;
display: block;
background: rgba(255, 72, 0, 0.253);
position: absolute;
padding: 1rem;
font-size: 3rem;
height: 10rem;
vertical-align: middle;
line-height: 10rem;
top: 50%;
transform: translate3d(0, -50%, 0);
cursor: pointer;
}
label:before {
content: "276D";
right: 100%;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
}
label:after {
content: "276C";
left: 100%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
}