A Pen by maharajan

Developer
Maharajan
Size
2,134 Kb
Views
10,120
  1. A Pen by maharajan Previews
  2. A Pen by maharajan HTML Codes
  3. A Pen by maharajan CSS Codes
  4. A Pen by maharajan JS Codes

How do I make an a pen by maharajan?

What is a a pen by maharajan? How do you make a a pen by maharajan? This script and codes were developed by Maharajan on 26 January 2023, Thursday.

A Pen by maharajan Previews
IQ Test

A Pen by maharajan - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by maharajan</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="slider"> <div class="slide active"></div> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div>
</div>
<div class="navigate previous">previous</div>
<div class="navigate next">Next</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by maharajan - Script Codes CSS Codes

.slider
{ width:100%; height:auto; position:relative; overlfow:hidden;
}
.slide
{ width:100%; height:200px; background:green; display:none; transition:all .5s ease; position:absolute; left:100%;
}
.slide:first-child
{ display:block; left:0px;
}
.slide:nth-of-type(2)
{ background:blue;
}
.slide:nth-of-type(3)
{ background:orange;
}
.slide:nth-of-type(4)
{ background:gold;
}
.navigate
{ width:100px; padding:10px 5px; font-family:sans-serif; background: orange; border-radius:5px; margin-top: 220px; text-align:center;cursor:pointer; border:2px solid #fff;
}
.navigate.previous
{ float:left;
}
.slide.active
{ left:0px;
}
.navigate.next
{ float:right;
}
.navigate:hover
{ border:2px solid orange; background:#fff;
}

A Pen by maharajan - Script Codes JS Codes

$(function() {
var left;
$('.next').on('click',function() {
var getposition=parseInt($('.active').index())+1; if(getposition != $('.slide').length) { var nextposition=getposition+1; if(getposition==1) { left='-101%'; } $('.slide:nth-of-type('+getposition+')').animate({'left':left},100).removeClass('active'); $('.slide:nth-of-type('+nextposition+')').show().animate({'left':'0px'},100).addClass('active'); } });
$('.previous').on('click',function() {
var getposition=parseInt($('.active').index())+1;
if(getposition != 1) { var nextposition=getposition-1; if(getposition==1) { left='0px'; } $('.slide:nth-of-type('+getposition+')').animate({'left':'101%'},100).removeClass('active'); $('.slide:nth-of-type('+nextposition+')').show().animate({'left':'0px'},100).addClass('active'); }
}); });
A Pen by maharajan - Script Codes
A Pen by maharajan - Script Codes
Home Page Home
Developer Maharajan
Username mhrjnsa1
Uploaded January 26, 2023
Rating 3
Size 2,134 Kb
Views 10,120
Do you need developer help for A Pen by maharajan?

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!

Maharajan (mhrjnsa1) Script Codes
Name
Simeple snake design
Circle loader
Text appearance
Locator
Drop down options disable
Parallax slider
Notification
Sound waves
Border hover effect
Pure css loader
Create amazing SEO content 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!