Nifty expandable carousel
How do I make an nifty expandable carousel?
What is a nifty expandable carousel? How do you make a nifty expandable carousel? This script and codes were developed by Adam T Pugh on 13 July 2022, Wednesday.
Nifty expandable carousel - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Nifty expandable carousel</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="action_btns"> <div id="prev"><</div> <div id="next">></div>
</div>
<div id="c_holder_outer"> <div id="c_holder_inner" style="left:0%"> <div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div><div class="c"></div> </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>
Nifty expandable carousel - Script Codes CSS Codes
#action_btns div{ background:grey; padding:10px; display:inline-block; color:white; margin:10px;
}
#action_btns { text-align:right;
}
.c{ width:25%; height:200px; background:grey; background-size:cover; display:inline-block; float:none;
}
#c_holder_outer{ overflow:hidden;
}
#c_holder_inner{ white-space: nowrap; word-spacing: 0; position: relative; -webkit-transition: left 0.5s ease-in-out; -moz-transition: left 0.5s ease-in-out; -o-transition: left 0.5s ease-in-out; transition: left 0.5s ease-in-out;
}
Nifty expandable carousel - Script Codes JS Codes
$(document).ready(function(){ $('.c').each(function(){ var url = 'url(http://lorempixel.com/400/200/?rand=' + Math.random() + ")"; $(this).css('background-image',url); }); $('#prev').click(function(){ var left= $('#c_holder_inner')[0].style.left; var new_percent = parseInt(left) + 100 + '%'; $('#c_holder_inner').css('left',new_percent); }); $('#next').click(function(){ var left= $('#c_holder_inner')[0].style.left; var new_percent = parseInt(left) - 100 + '%'; $('#c_holder_inner').css('left',new_percent); });
});
Developer | Adam T Pugh |
Username | tylerism |
Uploaded | July 13, 2022 |
Rating | 3 |
Size | 2,087 Kb |
Views | 36,432 |
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!
Name | Size |
JSON OBJECTS | 1,910 Kb |
Select on change | 1,496 Kb |
This is FREAKOUT | 2,251 Kb |
Trying to style forms | 1,599 Kb |
Tasks example jquery | 1,744 Kb |
3 column float | 1,469 Kb |
A Pen by Adam T Pugh | 1,585 Kb |
Hide show button | 1,657 Kb |
Vertically Align Text V1 | 1,754 Kb |
CSS Animation purple throb circle to square | 1,687 Kb |
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!
Name | Username | Size |
Amazing CSS Menu with Notification Badges | Faizanasad | 2,549 Kb |
Reading Grid | Tappily | 4,306 Kb |
Image Stack Test SCSS | CalvinMorett | 2,799 Kb |
Highbrow Basic HTML Lesson 7 | Kimlarocca | 1,662 Kb |
Matrix | Stathisnikolaidis | 1,922 Kb |
A Pen by aleen42 | Aleen42 | 11,473 Kb |
Three js | Paulq | 2,353 Kb |
Use the Twitchtv JSON API | Roksanaop | 3,561 Kb |
Collapsing Widget | Er40 | 4,279 Kb |
Brown by pure CSS, no image, no javascript | Aaronchuo | 2,652 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!