Simple responsive slides

Developer
Antonija Simic
Size
3,419 Kb
Views
26,312
  1. Simple responsive slides Previews
  2. Simple responsive slides HTML Codes
  3. Simple responsive slides CSS Codes
  4. Simple responsive slides JS Codes

How do I make an simple responsive slides?

Simple responsive slides with keyboard control. Enjoy! . What is a simple responsive slides? How do you make a simple responsive slides? This script and codes were developed by Antonija Simic on 17 August 2022, Wednesday.

Simple responsive slides Previews
IQ Test

Simple responsive slides - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple responsive slides</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav> <ul class="nav-list"> <li class="nav-item one" id="0"></li> <li class="nav-item" id="1"></li> <li class="nav-item" id="2"></li> <li class="nav-item" id="3"></li> </ul>
</nav>
<div class="wrapper"> <div class="slide-wrapper"> <div class="slide current one" id="0"> <h1 class="slide-title">simple responsive slides</h1> <i class="fa fa-keyboard-o"></i> </div> <div class="slide two shrink" id="1"> <h1 class="slide-title">simple responsive slides</h1> <i class="fa fa-keyboard-o"></i> </div> <div class="slide three shrink" id="2"> <h1 class="slide-title">simple responsive slides</h1> <i class="fa fa-keyboard-o"></i> </div> <div class="slide four shrink" id="3"> <h1 class="slide-title">simple responsive slides</h1> <i class="fa fa-keyboard-o"></i> </div> </div> <!--slide-wrapper-->
</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 slides - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic);
html,
body { width: 100%; height: 100%; padding: 0; margin: 0; font-family: "Source Sans Pro";
}
.wrapper { height: 100%; position: relative;
}
.slide { width: 100%; height: 100%; position: absolute; display: none; overflow: hidden; text-align: center; margin: 0 auto;
}
.current { display: block
}
nav { position: absolute; width: 100%; height: 70px; background: #2C3E50; text-align: center; z-index: 99;
}
.nav-list { margin: 0 auto;
}
.nav-item { height: 13px; width: 13px; -webkit-border-radius: 100%; border-radius: 100%; background-color: #fff; display: inline-block; margin: 0 10px; margin-top: 25px; opacity: 0.9;
}
.nav-item#0 { background-color: #4183D7;
}
.nav-item:hover { cursor: pointer; #4183D7 opacity: 1;
}
.nav-colored { background-color: #fff; -webkit-transition: background-color 2s ease; -moz-transition: background-color 2s ease; -ms-transition: background-color 2s ease; -o-transition: background-color 2s ease; transition: background-color 2s ease;
}
.one,
.nav-item.one { background: #4183D7;
}
.two { background: #E74C3C;
}
.three { background: #26A65B;
}
.four { background: #EB9532;
}
.slide-title { margin: 0 auto; top: 50%; position: relative; display: block; color: #fff; font-size: 2em; font-weight: 500;
}
.increase-size { -webkit-transform: scale3d(1.5, 1.5, 1.5); -moz-transform: scale3d(1.5, 1.5, 1.5); -o-transform: scale3d(1.5, 1.5, 1.5); transform: scale3d(1.5, 1.5, 1.5); -webkit-transition: transform 0.5s ease; -moz-transition: transform 0.5s ease; -o-transition: transform 0.5s ease; transition: transform 0.5s ease;
}
.decrease-size { -webkit-transform: scale3d(1, 1, 1); -moz-transform: scale3d(1, 1, 1); -o-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -webkit-transition: transform 0.2s ease; -moz-transition: transform 0.2s ease; -o-transition: transform 0.2s ease; transition: transform 0.2s ease;
}
@keyframes shrink { from { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } to { -webkit-transform: rotateY(88deg); -moz-transform: rotateY(88deg); -o-transform: rotateY(88deg); -ms-transform: rotateY(88deg); transform: rotateY(88deg); }
}
@-webkit-keyframes shrink { from { -webkit-transform: rotateY(0deg); -moz-transform: rotateY0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } to { -webkit-transform: rotateY(88deg); -moz-transform: rotateY(88deg); -o-transform: rotateY(88deg); -ms-transform: rotateY(88deg); transform: rotateY(88deg); }
}
@-moz-keyframes shrink { from { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } to { -webkit-transform: rotateY(88deg); -moz-transform: rotateY(88deg); -o-transform: rotateY(88deg); -ms-transform: rotateY(88deg); transform: rotateY(88deg); }
}
.shrink { -webkit-animation: shrink 1s 1 ease forwards; -moz-animation: shrink 1s 1 ease forwards; -o-animation: shrink 1s 1 ease forwards; animation: shrink 1s 1 ease forwards; overflow: visible !important;
}
@keyframes unshrink { from { -webkit-transform: rotateY(88deg); -moz-transform: rotateY(88deg); -o-transform: rotateY(88deg); -ms-transform: rotateY(88deg); transform: rotateY(88deg); } to { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); }
}
@-webkit-keyframes unshrink { from { -webkit-transform: rotateY(88deg); -moz-transform: rotateY(88deg); -o-transform: rotateY(88deg); -ms-transform: rotateY(88deg); transform: rotateY(88deg); } to { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); }
}
@-moz-keyframes unshrink { from { -webkit-transform: rotateY(88deg); -moz-transform: rotateY(88deg); -o-transform: rotateY(88deg); -ms-transform: rotateY(88deg); transform: rotateY(88deg); } to { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); }
}
.unshrink { -webkit-animation: unshrink 3s 1 ease forwards; -moz-animation: unshrink 3s 1 ease forwards; -o-animation: unshrink 3s 1 ease forwards; animation: unshrink 3s 1 ease forwards; overflow: visible !important;
}
.fa { position: absolute; color: #fff; top: 50%; font-size: 4em; z-index: 99;
}
.fa-keyboard-o { top: 70%; left: 0; right: 0;
}
.ua { position: absolute; right: 20px; bottom: 20px; color: #fff; font-size: 2em;
}
.ua:hover .fa { color: #17BEBB; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;
}

Simple responsive slides - Script Codes JS Codes

/* Licensing & Terms of Use You are not allowed to take this work “as-is” and sell it, redistribute or re-publish it (with the exception of forking our GitHub repos), or sell “pluginized” versions of it.
*/
$(document).ready(function() { $(".nav-item, .fa-arrow-right, .fa-arrow-left").mouseover(function() { $(this).addClass("increase-size"); $(this).removeClass("decrease-size"); }); $(".nav-item, .fa-arrow-right, .fa-arrow-left").mouseout(function() { $(this).removeClass("increase-size"); $(this).addClass("decrease-size"); }); $(".nav-item").click(function() { var currentNav = $(this), navLinkId = $(this).attr("id"), slides = $(".slide"), currentSlide = $(slides)[navLinkId], slideBg = $(currentSlide).css("background-color"); $(currentSlide).removeClass("shrink").addClass("current unshrink"); $(".slide").not(currentSlide).addClass("shrink").removeClass("current unshrink"); $(currentNav).css("background-color", slideBg); $(".nav-item").not(currentNav).css("background-color", "white"); }); $(this).on("keydown", function(e) { var code = e.keyCode || e.which; var currentSlide = $(".slide.current"); var currentSlideId = $(currentSlide).attr("id"); var currentNav = $(".nav-item")[currentSlideId]; var previousSlide = currentSlide.prev(); var previousSlideId = $(previousSlide).attr("id"); var previousSlideBg = $(previousSlide).css("background-color"); var previousNav = $(".nav-item")[previousSlideId]; var nextSlide = $(".current").next(); var nextSlideId = $(nextSlide).attr("id"); var nextSlideBg = $(nextSlide).css("background-color"); var nextNav = $(".nav-item")[nextSlideId]; if (code == 37) { console.log(previousSlide) console.log(currentSlide) if ($(previousSlide).hasClass("slide")) { console.log("2") console.log(previousSlide) $(currentSlide).removeClass("current unshrink").addClass("shrink"); $(previousSlide).addClass("current unshrink").removeClass("shrink"); $(previousNav).css("background-color", previousSlideBg); $(currentNav).css("background-color", "white"); } } if (code == 39) { console.log("net") if ($(nextSlide).hasClass("slide")) { $(currentSlide).removeClass("current unshrink").addClass("shrink"); $(nextSlide).addClass("current unshrink").removeClass("shrink"); $(nextNav).css("background-color", nextSlideBg); $(currentNav).css("background-color", "white"); } } });
});
Simple responsive slides - Script Codes
Simple responsive slides - Script Codes
Home Page Home
Developer Antonija Simic
Username tonkec
Uploaded August 17, 2022
Rating 4.5
Size 3,419 Kb
Views 26,312
Do you need developer help for Simple responsive slides?

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!

Antonija Simic (tonkec) Script Codes
Name
Pure CSS hamburger icons transition
A Pen by Antonija Simic
Menu with CSS3 transition
Pure CSS side reveal effect
Pure CSS bread-loaf carousel
Material design navigation menu
3D cube flip
Pure css navigation revealed on hover
Flat designed responsive preloader
CSS preloader
Create amazing blog posts 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!