Simple responsive fullscreen slider

Developer
Joseph
Size
2,997 Kb
Views
22,264
  1. Simple responsive fullscreen slider Previews
  2. Simple responsive fullscreen slider HTML Codes
  3. Simple responsive fullscreen slider CSS Codes
  4. Simple responsive fullscreen slider JS Codes

How do I make an simple responsive fullscreen slider?

A simple fullscreen css & jQuery slider using translateX and translate3d smoothness!If this can be further simplified suggestions are most welcome.. What is a simple responsive fullscreen slider? How do you make a simple responsive fullscreen slider? This script and codes were developed by Joseph on 21 November 2022, Monday.

Simple responsive fullscreen slider Previews
IQ Test

Simple responsive fullscreen slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>simple responsive fullscreen slider</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="slide-window"> <ol id="slides" start="1"> <li class="slide color-0 alive" style="background-image:url(http://stuckincustoms.smugmug.com/Portfolio/i-JSxf5Nm/0/X3/Burning-Man-Day-6%20%28202%20of%201606%29-X3.jpg);"></li> <li class="slide color-1" style="background-image:url(http://stuckincustoms.smugmug.com/Portfolio/i-KMjVHRd/0/X3/Andramada-X3.jpg);"></li> <li class="slide color-2" style="background-image:url(http://stuckincustoms.smugmug.com/Burning-Man/i-dd9xmfn/0/X3/The%20Steamy%20Car-X3.jpg);"></li> <li class="slide color-3" style="background-image:url(http://stuckincustoms.smugmug.com/Portfolio/i-KscS8CF/0/X3/Burning-Man-Day-1%20%281006%20of%201210%29-X3.jpg);"></li> <li class="slide color-4" style="background-image:url(http://stuckincustoms.smugmug.com/Portfolio/i-jQcPqJb/0/X3/Burning-Man-Last-Day-Night%20%28151%20of%201120%29-X3.jpg);"></li> </ol> <span class="nav fa fa-chevron-left fa-3x" id="left"></span> <span class="nav fa fa-chevron-right fa-3x" id="right"></span> <div id="credit">Photography by Trey Ratcliff<br>Slide No.<span id="count">1</span><br><span id="zoom">zoom</span></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple responsive fullscreen slider - Script Codes CSS Codes

body::-webkit-scrollbar { display: none; }
#slide-window { position:fixed; width:100%; height:100%; overflow:hidden; top:0px; left:0px; }
#slides { height:100%; position:absolute; margin:0px; padding:0px; -webkit-transform: translate3d(0px,0px,0px); transform: translate3d(0px,0px,0px); transition: all 0.66s ease; -webkit-transition: all 0.66s ease; }
.slide { list-style:none; position: relative; float: left; margin: 0; padding: 0; width: 500px; height: 100%; background: #ccc; text-align: center; line-height: 300px; background-size: cover; background-position:50% 50%; color:#fff; -webkit-transform: translate3d(0px,0px,0px); visibility:hidden; -webkit-transform-style: preserve-3d; }
.alive { visibility:visible; }
.nav { position:fixed; z-index:9; top:50%; cursor:pointer; color:#fff; opacity:0.7; transition: all 0.66s ease; -webkit-transition: all 0.66s ease; }
.nav:hover { opacity:1.0; }
#left { left:3%; }
#right { right:3%; }
#credit { position:fixed; top:25px; left:25px; color:#eaeaea; font-family: 'Courier New', Courier, monospace; }

Simple responsive fullscreen slider - Script Codes JS Codes

$.global = new Object();
$.global.item = 1;
$.global.total = 0;
$(document).ready(function()	{	var WindowWidth = $(window).width();	var SlideCount = $('#slides li').length;	var SlidesWidth = SlideCount * WindowWidth; $.global.item = 0; $.global.total = SlideCount;	$('.slide').css('width',WindowWidth+'px');	$('#slides').css('width',SlidesWidth+'px'); $("#slides li:nth-child(1)").addClass('alive'); $('#left').click(function() { Slide('back'); }); $('#right').click(function() { Slide('forward'); }); });
function Slide(direction)	{ if (direction == 'back') { var $target = $.global.item - 1; } if (direction == 'forward') { var $target = $.global.item + 1; } if ($target == -1) { DoIt($.global.total-1); } else if ($target == $.global.total) { DoIt(0); } else { DoIt($target); }	}
function DoIt(target) { var $windowwidth = $(window).width();	var $margin = $windowwidth * target; var $actualtarget = target+1; $("#slides li:nth-child("+$actualtarget+")").addClass('alive'); $('#slides').css('transform','translate3d(-'+$margin+'px,0px,0px)'); $.global.item = target; $('#count').html($.global.item+1); }
Simple responsive fullscreen slider - Script Codes
Simple responsive fullscreen slider - Script Codes
Home Page Home
Developer Joseph
Username jibbon
Uploaded November 21, 2022
Rating 4.5
Size 2,997 Kb
Views 22,264
Do you need developer help for Simple responsive fullscreen 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!

Joseph (jibbon) Script Codes
Name
3d transform card flip
A Pen by Joseph
Large canvas mousemove experiment
Mousy canvas experiment
NEW SPACE COLONY - safe
Fluid full-width vimeo element
Bloody Simple Grid
3d image canvas play
Css only parallax
Fluid poster wall
Create amazing love letters 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!