Full width carousel with entire slide clickable

Developer
Jacob Lett
Size
2,417 Kb
Views
18,216
  1. Full width carousel with entire slide clickable Previews
  2. Full width carousel with entire slide clickable HTML Codes
  3. Full width carousel with entire slide clickable CSS Codes

How do I make an full width carousel with entire slide clickable?

What is a full width carousel with entire slide clickable? How do you make a full width carousel with entire slide clickable? This script and codes were developed by Jacob Lett on 14 December 2022, Wednesday.

Full width carousel with entire slide clickable Previews
IQ Test

Full width carousel with entire slide clickable - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Full width carousel with entire slide clickable</title> <script src="https://bootstrapcreative.com/wp-bc/wp-content/themes/wp-bootstrap/codepen/bootstrapcreative.js?v=12"></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-2" class="carousel slide carousel-fade" data-ride="carousel" data-interval="6000"> <ol class="carousel-indicators"> <li data-target="#carousel-2" data-slide-to="0" class="active"></li> <li data-target="#carousel-2" data-slide-to="1"></li> <li data-target="#carousel-2" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <a href="https://bootstrapcreative.com/"> <img src="https://dummyimage.com/1000x400/444/" alt="responsive image" class="d-block img-fluid"> <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/"> <img src="https://dummyimage.com/1000x400/444/" alt="responsive image" class="d-block img-fluid"> <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/"> <img src="https://dummyimage.com/1000x400/444/" alt="responsive image" class="d-block img-fluid"> <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-2" 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-2" 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"> <p>Full width carousel</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 entire slide clickable - Script Codes CSS Codes

/*
Removes white gap between slides
*/
.carousel { background:#444;
}
/*
Forces image to be 100% width and not max width of 100%
*/
.carousel-item .img-fluid { width:100%; height:auto;
}
/*
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 entire slide clickable - Script Codes
Full width carousel with entire slide clickable - Script Codes
Home Page Home
Developer Jacob Lett
Username JacobLett
Uploaded December 14, 2022
Rating 3
Size 2,417 Kb
Views 18,216
Do you need developer help for Full width carousel with entire slide clickable?

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
Transparent background image jumbotron
Bootstrap 3 Centered Login
Common Bootstrap 4 Grid Layouts
Full width carousel with a maximum height and art direction
Bootstrap 3 Blog Template
Bootstrap 4 Off Canvas Side Menu Navbar
Bootstrap Form Template
Custom Bootstrap Social Share Buttons
Bootstrap 4 Accordion Collapse toggle d-block
Bootstrap Sitemap Template - Chronological
Create amazing marketing copy 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!