Animated Carousel on CSS with Minimal JS
How do I make an animated carousel on css with minimal js?
Responsive header with CSS animated carousel from test landing page (JS only for images self switching).. What is a animated carousel on css with minimal js? How do you make a animated carousel on css with minimal js? This script and codes were developed by Maxim Konoval on 16 September 2022, Friday.
Animated Carousel on CSS with Minimal JS Previews
Animated Carousel on CSS with Minimal JS - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Carousel on CSS with Minimal JS</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MoGo</title> <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300italic' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'> <link rel='stylesheet prefetch' href='https://dl.dropboxusercontent.com/u/69747888/MoGo%20carousel/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <header class="main-header"> <div class="header-wrapper"> <div class="main-logo">MoGo</div> <nav> <ul class="main-menu"> <li><a href="#section-2">About</a></li> <li><a href="#section-5">Service</a></li> <li><a href="#section-7">Work</a></li> <li><a href="#section-9">Blog</a></li> <li><a href="#main-footer">Contact</a></li> <li><a href="#"><span class="fa fa-shopping-cart"></span></a></li> <li><a href="#"><span class="fa fa-search"></span></a></li> </ul> </nav> </div> </header> <section id="section-1"> <div class="content-slider"> <input type="radio" id="banner1" class="sec-1-input" name="banner" checked> <input type="radio" id="banner2" class="sec-1-input" name="banner"> <input type="radio" id="banner3" class="sec-1-input" name="banner"> <input type="radio" id="banner4" class="sec-1-input" name="banner"> <div class="slider"> <div id="top-banner-1" class="banner"> <div class="banner-inner-wrapper"> <h2>Creative Template</h2> <h1>Welcome<br>to MoGo</h1> <div class="line"></div> <div class="learn-more-button"><a href="#section-2">Learn More</a></div> </div> </div> <div id="top-banner-2" class="banner"> <div class="banner-inner-wrapper"> <h2>What We Do</h2> <h1>Great<br>MoGo</h1> <div class="line"></div> <div class="learn-more-button"><a href="#section-4">Learn More</a></div> </div> </div> <div id="top-banner-3" class="banner"> <div class="banner-inner-wrapper"> <h2>Here We Are</h2> <h1>We Are<br>MoGo</h1> <div class="line"></div> <div class="learn-more-button"><a href="#section-6">Learn More</a></div> </div> </div> <div id="top-banner-4" class="banner"> <div class="banner-inner-wrapper"> <h2>Our Contacts</h2> <h1>Welcome<br>to MoGo</h1> <div class="line"></div> <div class="learn-more-button"><a href="#main-footer">Learn More</a></div> </div> </div> </div> <nav> <div class="controls"> <label for="banner1"><span class="progressbar"><span class="progressbar-fill"></span></span><span>01</span> Intro</label> <label for="banner2"><span class="progressbar"><span class="progressbar-fill"></span></span><span>02</span> Work</label> <label for="banner3"><span class="progressbar"><span class="progressbar-fill"></span></span><span>03</span> About</label> <label for="banner4"><span class="progressbar"><span class="progressbar-fill"></span></span><span>04</span> Contacts</label> </div> </nav> </div> </section>
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://use.fontawesome.com/8ae46bccf5.js'></script> <script src="js/index.js"></script>
</body>
</html>
Animated Carousel on CSS with Minimal JS - Script Codes CSS Codes
/* General Variables */
/* General Styles */
body { margin: 0 auto; padding: 0; font-size: 16px; background: #fff;
}
body section { display: block;
}
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body ul,
body li { margin: 0; padding: 0;
}
body h1 { font-family: Montserrat, sans-serif; font-weight: 700; text-transform: uppercase;
}
body h2 { font-family: Montserrat, sans-serif; font-size: 1.875em; font-weight: 700; text-transform: uppercase;
}
body h3 { font-family: 'Kaushan Script', cursive; font-size: 1.5em; font-weight: 400;
}
body h4 { font-family: Montserrat, sans-serif; font-size: 0.875em; font-weight: 400; text-transform: uppercase;
}
body p { line-height: 150%; font-family: Roboto, sans-serif; font-size: 0.9375em; color: #999;
}
body li { list-style-type: none;
}
body a { text-decoration: none;
}
.bg-wrapper { width: 100%; height: 100%; background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8));
}
.section-header { padding-top: 5.625em; text-align: center;
}
.section-header h3 { margin-bottom: 0.5em;
}
.section-header .line-red { margin: 2.5em auto 2.9375em auto;
}
.line-red { display: block; width: 4em; height: 0.1875em; margin: 0 auto; background: #f38181;
}
/* Main Header Styles */
.main-header { position: absolute; top: 0; width: 100%; z-index: 1000; font-family: Montserrat, sans-serif; color: #fff; background: transparent;
}
.main-header .header-wrapper { display: block; width: 70%; margin: 0 auto; padding-top: 1em;
}
.main-header .header-wrapper .main-logo { float: left; font-weight: 700; font-size: 1.875em;
}
.main-header .header-wrapper .main-menu { float: right; text-align: center;
}
.main-header .header-wrapper .main-menu li { display: inline-block; padding: 0.75em 1.875em;
}
.main-header .header-wrapper .main-menu li a { padding-bottom: 0.75em; text-transform: uppercase; color: #fff; font-size: 0.875em;
}
.main-header .header-wrapper .main-menu li a:hover { color: #fce38a; border-bottom: 0.1875em solid #fce38a; transition: .1s;
}
.main-header .header-wrapper .main-menu li a span { font-size: 1.2em;
}
.main-header .header-wrapper .main-menu li:last-child { padding: 0.75em 0;
}
.main-header .header-wrapper .main-menu li:nth-child(6) a:hover,
.main-header .header-wrapper .main-menu li:last-child a:hover { border: none;
}
/* Section-1 Styles */
#section-1 { height: 38em; color: #fff; background-color: #222;
}
#section-1 .content-slider { position: relative; width: 100%; height: 100%;
}
#section-1 .content-slider input { display: none;
}
#section-1 .content-slider .slider { position: relative; width: inherit; height: inherit; overflow: hidden;
}
#section-1 .content-slider .slider .banner { position: absolute; top: 0; left: 0; opacity: 0; z-index: 0; width: inherit; height: inherit; text-align: center; background-repeat: no-repeat; background-position: 50% 50%; transition: all .5s ease;
}
#section-1 .content-slider .slider .banner .banner-inner-wrapper { height: 100%; padding-top: 6em; background-image: linear-gradient(rgba(243, 129, 129, 0.9), rgba(252, 227, 138, 0.9)); box-sizing: border-box;
}
#section-1 .content-slider .slider .banner .banner-inner-wrapper h2 { padding-bottom: 0.3em; font-family: 'Kaushan Script', cursive; font-weight: 400; font-size: 2.5em; text-transform: none;
}
#section-1 .content-slider .slider .banner .banner-inner-wrapper h1 { font-size: 6em; line-height: 95%;
}
#section-1 .content-slider .slider .banner .banner-inner-wrapper .line { display: block; width: 4em; height: 0.1875em; margin: 2.5em auto; background: #fff;
}
#section-1 .content-slider .slider .banner .banner-inner-wrapper .learn-more-button { padding-bottom: 5em; z-index: 15 !important;
}
#section-1 .content-slider .slider .banner .banner-inner-wrapper .learn-more-button a { padding: 0.5em 2em; text-align: center; font-family: Montserrat, sans-serif; font-size: 0.875em; color: #fff; text-transform: uppercase; border: 0.1875em solid #fff;
}
#section-1 .content-slider .slider .banner .banner-inner-wrapper .learn-more-button a:hover { color: #e88382; border-color: #e88382; transition: .3s;
}
#section-1 .content-slider .slider #top-banner-1 { background: url('https://www.congress-security.com/other-projects/mogo-carousel/image/banner-1.png') no-repeat center center; background-size: cover;
}
#section-1 .content-slider .slider #top-banner-2 { background: url('https://www.congress-security.com/other-projects/mogo-carousel/image/banner-2.png') no-repeat center center; background-size: cover;
}
#section-1 .content-slider .slider #top-banner-3 { background: url('https://www.congress-security.com/other-projects/mogo-carousel/image/banner-3.png') no-repeat center center; background-size: cover;
}
#section-1 .content-slider .slider #top-banner-4 { background: url('https://www.congress-security.com/other-projects/mogo-carousel/image/banner-4.png') no-repeat center center; background-size: cover;
}
#section-1 .content-slider nav { position: absolute; bottom: 0.5em; width: 100%; z-index: 10; text-align: center;
}
#section-1 .content-slider nav .controls { display: block; width: 70%; margin: 0 auto; font-family: Montserrat, sans-serif; color: #fff;
}
#section-1 .content-slider nav .controls label { position: relative; display: inline-block; width: 20%; height: 3.1em; overflow: hidden; margin: 0 1em; padding-top: 1em; text-align: left; text-transform: uppercase; font-family: Montserrat, sans-serif; font-size: 1em; color: #f6eac5; font-weight: 400; cursor: pointer; transition: all .3s;
}
#section-1 .content-slider nav .controls label .progressbar { position: absolute; top: 0; left: 0; height: 3px; width: 100%; background: #f6eac5; z-index: 100;
}
#section-1 .content-slider nav .controls label .progressbar .progressbar-fill { position: inherit; width: inherit; height: inherit; margin-left: -100%; background: #e88382;
}
#section-1 .content-slider nav .controls label span { font-size: 1.4em; font-weight: 700;
}
#section-1 .content-slider nav .controls label:hover { color: #e88382;
}
#section-1 .content-slider #banner1:checked ~ .slider #top-banner-1,
#section-1 .content-slider #banner2:checked ~ .slider #top-banner-2,
#section-1 .content-slider #banner3:checked ~ .slider #top-banner-3,
#section-1 .content-slider #banner4:checked ~ .slider #top-banner-4 { opacity: 1; z-index: 1;
}
#section-1 .content-slider #banner1:checked ~ nav label:nth-of-type(1),
#section-1 .content-slider #banner2:checked ~ nav label:nth-of-type(2),
#section-1 .content-slider #banner3:checked ~ nav label:nth-of-type(3),
#section-1 .content-slider #banner4:checked ~ nav label:nth-of-type(4) { cursor: default; color: #fff; transition: all .5s;
}
#section-1 .content-slider #banner1:checked ~ nav label:nth-of-type(1) .progressbar,
#section-1 .content-slider #banner2:checked ~ nav label:nth-of-type(2) .progressbar,
#section-1 .content-slider #banner3:checked ~ nav label:nth-of-type(3) .progressbar,
#section-1 .content-slider #banner4:checked ~ nav label:nth-of-type(4) .progressbar { background: #fff;
}
#section-1 .content-slider #banner1:checked ~ nav label:nth-of-type(1) .progressbar-fill,
#section-1 .content-slider #banner2:checked ~ nav label:nth-of-type(2) .progressbar-fill,
#section-1 .content-slider #banner3:checked ~ nav label:nth-of-type(3) .progressbar-fill,
#section-1 .content-slider #banner4:checked ~ nav label:nth-of-type(4) .progressbar-fill { animation: progressBarFill 5s linear;
}
/* Animations */
@keyframes progressBarFill { from { margin-left: -100%; } to { margin-left: 0; }
}
/* Media Queries */
@media only screen and (min-width: 1920px) { body { font-size: 22px; } .main-header .header-wrapper { width: 57%; } #section-1 { height: 46em; } #section-1 .content-slider .slider .banner .banner-inner-wrapper { padding-top: 12em; }
}
@media only screen and (max-width: 1919px) { body { font-size: 20px; } .main-header .header-wrapper { width: 60%; } #section-1 { height: 43em; } #section-1 .content-slider .slider .banner .banner-inner-wrapper { padding-top: 11em; }
}
@media only screen and (max-width: 1680px) { body { font-size: 18px; } .main-header .header-wrapper { width: 65%; } #section-1 { height: 40em; } #section-1 .content-slider .slider .banner .banner-inner-wrapper { padding-top: 9em; }
}
@media only screen and (max-width: 1366px) { body { font-size: 16px; } .main-header .header-wrapper { width: 70%; }
}
@media only screen and (max-width: 1120px) { .main-header .header-wrapper .main-menu li { padding: 0.75em 1.4em; } #section-1 { height: 35em; } #section-1 .content-slider nav { bottom: -0.2em; } #section-1 .content-slider .slider .banner .banner-inner-wrapper { padding-top: 7em; } #section-1 .content-slider .slider .banner .banner-inner-wrapper .line { margin: 2em auto; }
}
@media only screen and (max-width: 1024px) { body { font-size: 14px; } .main-header .header-wrapper .main-menu li { padding: 0.75em 1.3em; } #section-1 .content-slider nav { bottom: 0; } #section-1 .content-slider nav .controls { width: 80%; }
}
@media only screen and (max-width: 860px) { .main-header .header-wrapper .main-menu li { padding: 0.75em 0.9em; } #section-1 { height: 29em; } #section-1 .content-slider nav { bottom: -1em; } #section-1 .content-slider nav .controls { width: 90%; } #section-1 .content-slider .slider .banner .banner-inner-wrapper h2 { font-size: 2em; } #section-1 .content-slider .slider .banner .banner-inner-wrapper h1 { font-size: 4.5em; } #section-1 .content-slider .slider .banner .banner-inner-wrapper { padding-top: 5em; }
}
@media only screen and (max-width: 768px) { .main-header .header-wrapper .main-menu li { padding: 0.75em 0.5em; } #section-1 { height: 27em; } #section-1 .content-slider nav .controls { width: 100%; } #section-1 .content-slider nav .controls label { width: 19%; font-size: 0.8em; } #section-1 .content-slider .slider .banner .banner-inner-wrapper .line { margin: 1.7em auto; }
}
@media only screen and (max-width: 650px) { .main-header .header-wrapper { width: 95%; }
}
@media only screen and (max-width: 480px) { .main-header .header-wrapper { width: 97%; } .main-header .header-wrapper .main-logo { display: none; } .main-header .header-wrapper .main-menu li { padding: 0.2em 0.3em; } .main-header .header-wrapper .main-menu li:last-child, .main-header .header-wrapper .main-menu li:nth-child(6) { padding: 0.2em 0.7em; } #section-1 { height: 26em; } #section-1 .content-slider nav { bottom: -0.5em; } #section-1 .content-slider nav .controls label { width: 40%; font-size: 0.7em; } #section-1 .content-slider .slider .banner .banner-inner-wrapper h2 { font-size: 1.5em; } #section-1 .content-slider .slider .banner .banner-inner-wrapper h1 { font-size: 3em; } #section-1 .content-slider .slider .banner .banner-inner-wrapper .line { margin: 1.7em auto; }
}
Animated Carousel on CSS with Minimal JS - Script Codes JS Codes
///// Section-1 CSS-Slider ///// // Auto Switching Images for CSS-Slider function bannerSwitcher() { next = $('.sec-1-input').filter(":checked").next('.sec-1-input'); if (next.length) next.prop('checked', true); else $('.sec-1-input').first().prop('checked', true); } var bannerTimer = setInterval(bannerSwitcher, 5000); $('nav .controls label').click(function() { clearInterval(bannerTimer); bannerTimer = setInterval(bannerSwitcher, 5000) });
///// Anchor Smooth Scroll /////
// $('.main-menu a, .learn-more-button a').click(function(e){
// e.preventDefault();
// var target = $(this).attr('href');
// $('html, body').animate({scrollTop: $(target).offset().top}, 1000);
// return false;
// });
| Developer | Maxim Konoval |
| Username | Said_FD |
| Uploaded | September 16, 2022 |
| Rating | 4 |
| Size | 6,787 Kb |
| Views | 32,384 |
Do you need developer help for Animated Carousel on CSS with Minimal JS?
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!
Maxim Konoval (Said_FD) Script Codes
| Name | Size |
| Vanilla CSS Accordion and Responsive Tables | 3,826 Kb |
| Structure Test | 6,467 Kb |
| CRM Table Test | 7,579 Kb |
| My Portfolio | 6,798 Kb |
| Fully Flexbox Landing Page | 9,592 Kb |
| Tactical Monkey | 2,889 Kb |
| A Pen by Maxim Konoval | 1,609 Kb |
| CS-Service Landing Page | 6,657 Kb |
| Brutal Responsive Landing Page Prototype | 5,482 Kb |
| Responsive Price List | 11,134 Kb |
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!
Similar Scripts & Codes
| Name | Username | Size |
| ASCII triangle image overlay | Mitchdot | 2,200 Kb |
| A Pen by Xand0r | Xand0r | 1,928 Kb |
| Scroll to top button | DominicFrancois | 3,743 Kb |
| Pure CSS Read More Arrow | Zephyr | 1,747 Kb |
| SVG Animation | Pollardld | 3,133 Kb |
| Cut and Paste Roll Link | BottomlineInteractive | 2,546 Kb |
| GLSL Hills | Ykob | 6,991 Kb |
| Vanilla modal window | Jasonhowmans | 3,554 Kb |
| C.Rowe Button | Brownerd | 2,473 Kb |
| Box Shadow Effects | Retrofuturistic | 2,143 Kb |
Do you want hide your ip address?
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!