Nice multipart image slider

Developer
Godje
Size
4,041 Kb
Views
34,408
  1. Nice multipart image slider Previews
  2. Nice multipart image slider HTML Codes
  3. Nice multipart image slider CSS Codes
  4. Nice multipart image slider JS Codes

How do I make an nice multipart image slider?

This is a multipart slider. You can change amount of parts by changing "parts" variable. Also, you just have to add on URL into URLS variable and you will have an additional image inserted. Easy-to-use))))). What is a nice multipart image slider? How do you make a nice multipart image slider? This script and codes were developed by Godje on 12 September 2022, Monday.

Nice multipart image slider Previews
IQ Test

Nice multipart image slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Nice multipart image slider</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="btn-left"><</div> <div id="slider"></div> <div id="btn-right">></div> <main> <div id="wrapper"> <p id="madeby">Slider and Pictures made by</p><a href="https://codepen.io/Godje/" target="_blank" id="author">Daniel (Godje) Mayovsky</a> </div> </main> <script src="js/index.js"></script>
</body>
</html>

Nice multipart image slider - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto:100,400,300,500,700&subset=latin,cyrillic);
* { box-sizing: border-box;
}
body { width: 100vw; min-height: 100vh; overflow: hidden; overflow-y: auto; position: relative; z-index: 0; display: block; font-family: 'Roboto';
}
body h1, body h2, body h3, body h4, body h5, body h6, body p { margin: 0;
}
.none { display: none;
}
main { position: absolute; z-index: 19; top: 0; left: 0; width: 100vw; height: 100vh;
}
main #wrapper { position: absolute; margin: 0 auto; text-align: right; color: white; bottom: 0; right: 0; padding-bottom: 20px; padding-right: 20px; padding-top: 20px; padding-left: 20px; background-color: rgba(0, 0, 0, 0.5);
}
main #wrapper #madeby { font-size: 20px; font-weight: 400;
}
main #wrapper #author { font-weight: 700; font-size: 25px; text-decoration: none; color: white;
}
#slider { width: 100vw; height: 100vh; position: relative; display: block; z-index: 1; background-color: #1e1e1e; padding: 0; margin: 0; top: 0; left: 0;
}
#btn-left, #btn-right { background-color: rgba(0,0,0,0.5); width: 50px; height: 75px; position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 20; top: 0; font-size: 50px; color: white; cursor: pointer; text-shadow: 0px 0px 10px rgba(0,0,0,1); border-radius: 50%;
}
#btn-left::-moz-selection, #btn-right::-moz-selection { background-color: transparent;
}
#btn-left::selection, #btn-right::selection { background-color: transparent;
}
#btn-left:active, #btn-right:active { -webkit-transform: translateY(-48%) scale(0.97); transform: translateY(-48%) scale(0.97);
}
#btn-left { top: 50%; left: 20px; -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
#btn-right { right: 20px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
.slide-el { width: 100vw; height: 100vh; position: absolute; display: block; z-index: 1; -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s;
}
.slide-el img { opacity: 0.5;
}
.slide-el img::-moz-selection { background-color: transparent;
}
.slide-el img::selection { background-color: transparent;
}
.slide-el::-moz-selection { background-color: transparent;
}
.slide-el::selection { background-color: transparent;
}
.slide-el.opened { -webkit-transform: translateX(0%); transform: translateX(0%);
}
.slide-el.opened .slide-block { left: 0;
}
.slide-el.opened img { opacity: 1;
}
.slide-el .slide-block { background-repeat: no-repeat; background-attachment: local; position: absolute; overflow: hidden; left: 100%; background-color: #000; background-size: cover;
}
.slide-el .slide-block::-moz-selection { background-color: transparent;
}
.slide-el .slide-block::selection { background-color: transparent;
}
.slide-el .slide-block img { min-height: 100vh; max-height: 100vh; position: relative; display: block; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);
}

Nice multipart image slider - Script Codes JS Codes

var body, html, sliderBody, btnLeft, btnRight, i, parts, vHeight, vWidth, slide, slideBlock, slides
//Variable definitions
var i = 0, parts = 7, //Main html elements body = document.body, html = document.element, sliderBody = _id("slider"), btnLeft = _id("btn-left"), btnRight = _id("btn-right"), transitionTime = 1; //viewport Height and Width vHeight = window.innerHeight, vWidth = window.innerWidth,
window.onload = function(){ prats = parts; if(vWidth < 640){ parts = 1 } else (parts = prats)
} urls = ["http://cs626524.vk.me/v626524202/1d47/o33_EJR640E.jpg", "http://cs631322.vk.me/v631322202/23952/PJMaDOn6as4.jpg", "http://cs627529.vk.me/v627529202/3c7d4/ST7Ia7JC_lo.jpg", "http://cs630117.vk.me/v630117202/22b1f/ILT1HdQZoqk.jpg", "http://cs629301.vk.me/v629301202/4ac5e/u1Ed3_qEn-g.jpg", ];
window.addEventListener("resize", function(){ vHeight = window.innerHeight; vWidth = window.innerWidth; if(vWidth < 640){ parts = 1 } slideBlockCreate();
}, false);
window.onload = function(){ createElements();
}
function createElements(){ slide = _createEl("div"); slide.className += "slide-el"; slideBlockCreate();
}
function slideBlockCreate(){ slideBlock = _createEl("div"); slideBlock.className += "slide-block slide-block-"; slideBlock.style.width = vWidth + "px"; slideBlock.style.height = (vHeight / parts ) + "px"; slideBlock.style["transition"] = "left "+ transitionTime +"s"; slideLayout();
}
function slideLayout(){ sliderBody.innerHTML = ""; for(var i=0; i < urls.length; i++){ sliderBody.appendChild(slide.cloneNode(true)); }; var slides = _cl("slide-el"); for(var i=0; i < slides.length; i++){ for(var x=0; x < parts; x++){ slides[i].appendChild(slideBlock.cloneNode(true)) slides[i].className = "slide-el slide-el-"+ i +"" } }; for(var i = 0; i < slides.length; i++){ slides[i].style.zIndex = i; for(var x=0;x<slides[i].children.length;x++){ var offset = (x*(100/parts)); var imageOffset = vHeight / offset; var transitionDelay = ((transitionTime / parts)/2)*x; slides[i].children[x].style.top = offset + "%"; slides[i].children[x].innerHTML = "<img src="+ urls[i] +" style='top: "+(((vHeight / parts)*-1)*x)+"px'>" // slides[i].children[x].style["background-image"] = "url("+urls[i]+")"; // slides[i].children[x].style["background-position"] = "50% "+((((vHeight / parts)*-1)*x))/+"px"; slides[i].children[x].style["transition-delay"] = transitionDelay +"s"; } } addStyle();
}
function addStyle(){ var slides = _cl("slide-el"); slides[i].className += " opened";
}
btnLeft.addEventListener("click", function(){ goLeft();
});
function goLeft(){ var slides = _cl("slide-el"); if(i > 0){ i--; removeClass(slides[i+1], "opened") } else { i = urls.length - 1; for(x=0;x<urls.length;x++){ slides[x].className += " opened" } }
}
btnRight.addEventListener("click", function(){ goRight();
});
function goRight(){ var slides = _cl("slide-el"); if(i < urls.length -1){ i++; slides[i].className += " opened" } else { i = 0; for(x = urls.length; x > 0 ; x--){ removeClass(slides[x], "opened"); } }
}
//Helper functions
function _id(el){ return document.getElementById(""+ el +"");
}
function _cl(el){ return document.getElementsByClassName(""+ el +"")
}
function _createEl(el){ return document.createElement(""+ el +"");
}
function removeClass(el, _class) { if (el && el.className && el.className.indexOf(_class) >= 0) { var pattern = new RegExp('\\s*' + _class + '\\s*'); el.className = el.className.replace(pattern, ' '); }
}
Nice multipart image slider - Script Codes
Nice multipart image slider - Script Codes
Home Page Home
Developer Godje
Username Godje
Uploaded September 12, 2022
Rating 4
Size 4,041 Kb
Views 34,408
Do you need developer help for Nice multipart image slider?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Godje (Godje) Script Codes
Name
Dot Digit Input
Dark Spirit Fire
Just a simplest particle canvas
Shoal of Pursuers
Ceasar Cipher Encryptor
Polar Roses
Polygon Cursor Canvas
Archimedean Spiral
Wavy thing
Just SMILE
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!