Full width carousel with a maximum height and art direction

Developer
Jacob Lett
Size
2,768 Kb
Views
10,120
  1. Full width carousel with a maximum height and art direction Previews
  2. Full width carousel with a maximum height and art direction HTML Codes
  3. Full width carousel with a maximum height and art direction CSS Codes

How do I make an full width carousel with a maximum height and art direction?

What is a full width carousel with a maximum height and art direction? How do you make a full width carousel with a maximum height and art direction? This script and codes were developed by Jacob Lett on 28 November 2022, Monday.

Full width carousel with a maximum height and art direction Previews
IQ Test

Full width carousel with a maximum height and art direction - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Full width carousel with a maximum height and art direction</title> <script src="https://bootstrapcreative.com/wp-bc/wp-content/themes/wp-bootstrap/codepen/bootstrapcreative.js?v=13"></script> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- #################################################### C A R O U S E L #################################################### --> <div id="carousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="6000"> <ol class="carousel-indicators"> <li data-target="#carousel" data-slide-to="0" class="active"></li> <li data-target="#carousel" data-slide-to="1"></li> <li data-target="#carousel" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <a href="https://bootstrapcreative.com/"> <!-- If you need more browser support use https://scottjehl.github.io/picturefill/ If a picture looks blurry on a retina device you can add a high resolution like this <source srcset="img/blog-post-1000x600-2.jpg, [email protected] 2x" media="(min-width: 768px)"> What image sizes should you use? This can help - https://codepen.io/JacobLett/pen/NjramL --> <picture> <source srcset="https://dummyimage.com/2000x500/007aeb/4196e5" media="(min-width: 1400px)"> <source srcset="https://dummyimage.com/1400x500/#007aeb/4196e5" media="(min-width: 769px)"> <source srcset="https://dummyimage.com/800x500/007aeb/4196e5" media="(min-width: 577px)"> <img srcset="https://dummyimage.com/600x500/007aeb/4196e5" alt="responsive image" class="d-block img-fluid"> </picture> <div class="carousel-caption"> <div> <h2>Digital Craftsmanship</h2> <p>We meticously build each site to get results</p> <span class="btn btn-sm btn-outline-secondary">Learn More</span> </div> </div> </a> </div> <!-- /.carousel-item --> <div class="carousel-item"> <a href="https://bootstrapcreative.com/"> <picture> <source srcset="https://dummyimage.com/2000x500/007aeb/4196e5" media="(min-width: 1400px)"> <source srcset="https://dummyimage.com/1400x500/007aeb/4196e5" media="(min-width: 769px)"> <source srcset="https://dummyimage.com/800x500/007aeb/4196e5" media="(min-width: 577px)"> <img srcset="https://dummyimage.com/600x500/007aeb/4196e5" alt="responsive image" class="d-block img-fluid"> </picture> <div class="carousel-caption justify-content-center align-items-center"> <div> <h2>Every project begins with a sketch</h2> <p>We work as an extension of your business to explore solutions</p> <span class="btn btn-sm btn-outline-secondary">Our Process</span> </div> </div> </a> </div> <!-- /.carousel-item --> <div class="carousel-item"> <a href="https://bootstrapcreative.com/"> <picture> <source srcset="https://dummyimage.com/2000x500/007aeb/4196e5" media="(min-width: 1400px)"> <source srcset="https://dummyimage.com/1400x500/007aeb/4196e5" media="(min-width: 769px)"> <source srcset="https://dummyimage.com/800x500/007aeb/4196e5" media="(min-width: 577px)"> <img srcset="https://dummyimage.com/600x500/007aeb/4196e5" alt="responsive image" class="d-block img-fluid"> </picture> <div class="carousel-caption justify-content-center align-items-center"> <div> <h2>Performance Optimization</h2> <p>We monitor and optimize your site's long-term performance</p> <span class="btn btn-sm btn-secondary">Learn How</span> </div> </div> </a> </div> <!-- /.carousel-item --> </div> <!-- /.carousel-inner --> <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!-- /.carousel -->
<div class="container-fluid text-center"> <p>Full width carousel with a maximum height and art direction. Resize window to see image change based on the size of the window.</p>
</div>
<!-- /.container --> <script src='https://code.jquery.com/jquery-3.1.1.slim.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
</body>
</html>

Full width carousel with a maximum height and art direction - Script Codes CSS Codes

/*
Removes white gap between slides - chagnge to base color of slide images
*/
.carousel { background:#007aeb;
}
/*
Forces image to be 100% width and not max width of 100%
*/
.carousel-item .img-fluid { width:100%;
}
/*
anchors are inline so you need ot make them block to go full width
*/
.carousel-item a { display: block; width:100%;
}
Full width carousel with a maximum height and art direction - Script Codes
Full width carousel with a maximum height and art direction - Script Codes
Home Page Home
Developer Jacob Lett
Username JacobLett
Uploaded November 28, 2022
Rating 3
Size 2,768 Kb
Views 10,120
Do you need developer help for Full width carousel with a maximum height and art direction?

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!

Jacob Lett (JacobLett) Script Codes
Name
Common Bootstrap 3 Grid Layouts
Bootstrap 4 Accordion Collapse toggle d-block
Custom Bootstrap Social Share Buttons
Bootstrap Thank You Page Template
Bootstrap 3 Blog Template
Common Bootstrap 4 Grid Layouts
Section background colors - Bootstrap 4
Full width carousel with entire slide clickable
Bootstrap Sitemap Template - Chronological
Bootstrap 3 Off Canvas Side Menu Navbar
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!