ADVERTISEMENT

Full Page Image Slider Using Html, Css, and JavaScript

Telegram Group Join Now

ADVERTISEMENT

Full Page Image Slider Using Html, Css, and JavaScript

Full Page Image Slider Using Html, Css, and JavaScript
Full Page Image Slider Using Html, Css, and JavaScript

 

ADVERTISEMENT

ADVERTISEMENT

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.

ADVERTISEMENT

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.

ADVERTISEMENT

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

Output

Full Page Image Slider
Full Page Image Slider

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.

ADVERTISEMENT

50+ HTML, CSS & JavaScript Projects With Source Code

Output

Full Page Image Slider
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)

ADVERTISEMENT

here you can see live output on codepen and use in your project.

ADVERTISEMENT

Full Page Image Slider Using Html, Css, and JavaScript

Full Page Image Slider
Full Page Image Slider

 

 

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!

ADVERTISEMENT

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.

ADVERTISEMENT

Written by – Code With Random/Anki

ADVERTISEMENT

Codepen by – Arseny M.

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT