Full Page Image Slider Using Html, Css, and JavaScript
Welcome to the Codewithrandom blog. In this blog, We learn how to create a Full Page Image Slider. We use Html, Css, and JavaScript for this Full Page Image Slider.
I hope you enjoy our blog so let’s start with a basic html structure for a Full Page Image Slider.
HTML Code For Full Page Image Slider
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Slider html </title> <link rel="stylesheet" href="style.css" /> </head> <body> <div id="main"> <h1>something</h1> <div class="content"> <p>You can press <kbd>▲</kbd> <kbd>▼</kbd> on your keyboard or swipe up/down to navigate. Mouse wheel works too.</p></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script> <script src="index.js"></script> </body> </html>
There is all the html code for the Full Page Image Slider. Now, you can see output without Css and JavaScript. then we Style Using Css and Give Sliding functionality using JavaScript.
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
Output
CSS Code For Full Page Image Slider
html, body {
padding: 0;
margin: 0;
overflow: hidden;
font-family: "Sen";
}
* {
box-sizing: border-box;
outline: none;
-webkit-tap-highlight-color: transparent;
cursor: none;
user-select: none;
-webkit-user-drag: none;
}
#main {
display: flex;
}
#main .part {
flex: 1;
}
#main .part .section {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
#main .part .section img {
width: 100vw;
height: 100vh;
object-fit: cover;
position: absolute;
left: var(--x);
pointer-events: none;
}
.cursor {
width: var(--size);
height: var(--size);
border-radius: 50%;
background: white;
position: absolute;
z-index: 999;
pointer-events: none;
mix-blend-mode: difference;
}
.cursor-f {
width: var(--size);
height: var(--size);
position: absolute;
top: 0;
left: 0;
background-image: url("data:image/svg+xml,%3Csvg width='47' height='47' viewBox='0 0 47 47' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M42.4202 42.4202C38.8403 46 33.3594 46 23.5 46C13.6406 46 8.15966 46 4.57983 42.4202C1 38.8403 1 33.3594 1 23.5C1 13.6406 1 8.15966 4.57983 4.57983C8.15966 1 13.6406 1 23.5 1C33.3594 1 38.8403 1 42.4202 4.57983C46 8.15966 46 13.6406 46 23.5C46 33.3594 46 38.8403 42.4202 42.4202Z' stroke='white'/%3E%3C/svg%3E%0A");
background-size: cover;
mix-blend-mode: difference;
pointer-events: none;
opacity: .5;
}
.buttons {
position: absolute;
right: 25px;
top: 50%;
transform: translateY(-50%);
z-index: 99;
}
.buttons button {
border: none;
background-size: contain;
background: url("data:image/svg+xml,%3Csvg width='10' height='29' viewBox='0 0 10 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 0V27L1 17.4857' stroke='white' stroke-width='2' /%3E%3C/svg%3E%0A") no-repeat;
background-position: center;
width: 10px;
height: 30px;
display: block;
margin: 20px 0;
padding: 0 15px;
transition-duration: .6s;
}
.buttons button.next {
transform: scaleY(-1);
}
.buttons button.prev:active {
transform: translateY(8px);
}
.buttons button.next:active {
transform: scaleY(-1) translateY(8px);
}
h1 {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
z-index: 99;
color: white;
text-align: center;
font-size: 2.6em;
mix-blend-mode: overlay;
pointer-events: none;
}
.content {
width: 90%;
position: absolute;
bottom: 20px;
text-align: center;
left: 0;
right: 0;
margin: auto;
color: white;
z-index: 99;
font-size: .8em;
}
.content p {
margin: .5em auto;
}
.content kbd {
width: 15px;
height: 15px;
border: 1px solid white;
display: inline-block;
border-radius: 3px;
font-size: .9em;
vertical-align: text-top;
}
.content a {
color: rgba(227,227,227,0.78);
text-decoration: none;
border-bottom: 1px solid currentColor;
}
.content a:hover {
padding-bottom: 1px;
}
Here is our updated output Css. Yes, you don’t get any output because we all do with javascript code also we insert images using javascript so when our js code is complete you can see our Full Page Image Slider works.
50+ HTML, CSS & JavaScript Projects With Source Code
Output
 |
| nothing in output(let’s write js for output |
JavaScript Code For Full Page Image Slider
const cols = 3;
const main = document.getElementById('main');
let parts = [];
let images = [
"https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80",
"https://images.unsplash.com/photo-1544198365-f5d60b6d8190?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80",
"https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2700&q=80"
];
let current = 0;
let playing = false;
for (let i in images) {
new Image().src = images[i];
}
for (let col = 0; col < cols; col++) {
let part = document.createElement('div');
part.className = 'part';
let el = document.createElement('div');
el.className = "section";
let img = document.createElement('img');
img.src = images[current];
el.appendChild(img);
part.style.setProperty('--x', -100/cols*col+'vw');
part.appendChild(el);
main.appendChild(part);
parts.push(part);
}
let animOptions = {
duration: 2.3,
ease: Power4.easeInOut
};
function go(dir) {
if (!playing) {
playing = true;
if (current + dir < 0) current = images.length - 1;
else if (current + dir >= images.length) current = 0;
else current += dir;
function up(part, next) {
part.appendChild(next);
gsap.to(part, {...animOptions, y: -window.innerHeight}).then(function () {
part.children[0].remove();
gsap.to(part, {duration: 0, y: 0});
})
}
function down(part, next) {
part.prepend(next);
gsap.to(part, {duration: 0, y: -window.innerHeight});
gsap.to(part, {...animOptions, y: 0}).then(function () {
part.children[1].remove();
playing = false;
})
}
for (let p in parts) {
let part = parts[p];
let next = document.createElement('div');
next.className = 'section';
let img = document.createElement('img');
img.src = images[current];
next.appendChild(img);
if ((p - Math.max(0, dir)) % 2) {
down(part, next);
} else {
up(part, next);
}
}
}
}
window.addEventListener('keydown', function(e) {
if (['ArrowDown', 'ArrowRight'].includes(e.key)) {
go(1);
}
else if (['ArrowUp', 'ArrowLeft'].includes(e.key)) {
go(-1);
}
});
function lerp(start, end, amount) {
return (1-amount)*start+amount*end
}
const cursor = document.createElement('div');
cursor.className = 'cursor';
const cursorF = document.createElement('div');
cursorF.className = 'cursor-f';
let cursorX = 0;
let cursorY = 0;
let pageX = 0;
let pageY = 0;
let size = 8;
let sizeF = 36;
let followSpeed = .16;
document.body.appendChild(cursor);
document.body.appendChild(cursorF);
if ('ontouchstart' in window) {
cursor.style.display = 'none';
cursorF.style.display = 'none';
}
cursor.style.setProperty('--size', size+'px');
cursorF.style.setProperty('--size', sizeF+'px');
window.addEventListener('mousemove', function(e) {
pageX = e.clientX;
pageY = e.clientY;
cursor.style.left = e.clientX-size/2+'px';
cursor.style.top = e.clientY-size/2+'px';
});
function loop() {
cursorX = lerp(cursorX, pageX, followSpeed);
cursorY = lerp(cursorY, pageY, followSpeed);
cursorF.style.top = cursorY - sizeF/2 + 'px';
cursorF.style.left = cursorX - sizeF/2 + 'px';
requestAnimationFrame(loop);
}
loop();
let startY;
let endY;
let clicked = false;
function mousedown(e) {
gsap.to(cursor, {scale: 4.5});
gsap.to(cursorF, {scale: .4});
clicked = true;
startY = e.clientY || e.touches[0].clientY || e.targetTouches[0].clientY;
}
function mouseup(e) {
gsap.to(cursor, {scale: 1});
gsap.to(cursorF, {scale: 1});
endY = e.clientY || endY;
if (clicked && startY && Math.abs(startY - endY) >= 40) {
go(!Math.min(0, startY - endY)?1:-1);
clicked = false;
startY = null;
endY = null;
}
}
window.addEventListener('mousedown', mousedown, false);
window.addEventListener('touchstart', mousedown, false);
window.addEventListener('touchmove', function(e) {
if (clicked) {
endY = e.touches[0].clientY || e.targetTouches[0].clientY;
}
}, false);
window.addEventListener('touchend', mouseup, false);
window.addEventListener('mouseup', mouseup, false);
let scrollTimeout;
function wheel(e) {
clearTimeout(scrollTimeout);
setTimeout(function() {
if (e.deltaY < -40) {
go(-1);
}
else if (e.deltaY >= 40) {
go(1);
}
})
}
window.addEventListener('mousewheel', wheel, false);
window.addEventListener('wheel', wheel, false);Portfolio Website using HTML and CSS (Source Code)
here you can see live output on codepen and use in your project.
Full Page Image Slider Using Html, Css, and JavaScript
Now we have completed our full Page Image Slider. Here is our updated output with html,css, and javascript. Hope you like the Slider html. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
Thank you!
In this post, we learn how to create a Full Page Image Slider Using Html, Css, and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you learn quickly.
Written by – Code With Random/Anki
Codepen by – Arseny M.
