Call to Action Carousel

489 ViewsFreeFrontend.dev

This code snippet represents a call to action component that features a working carousel, designed to rotate through different messages to draw the user’s attention and encourage them to take a desired action. It is built using Bootstrap, which is a framework that allows the carousel to be responsive, adjust its layout according to the screen size it is being viewed on, and easily navigate through the different slides. Carousels are a great way to highlight different aspects of a product or service, or to feature multiple calls to action on a single page.

<section class="py-5 my-md-5 bg-primary">
	<div class="container">
		<div class="carousel slide text-center text-white py-5 pointer-event" id="carouselExampleCaptions">
			<div class="carousel-inner">
				<div class="carousel-item">
					<div class="row justify-content-center">
						<div class="col-lg-6">
							<span>Sign Up</span>
							<h2 class="fw-bold display-5">Get Started Today</h2>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam feugiat erat quis pulvinar semper. Cras commodo vitae libero ut consequat.</p>
							<div class="d-grid col-4 mx-auto">
								<a class="btn btn-outline-light" href="">Buy now</a>
							</div>
						</div>
					</div>
				</div>
				<div class="carousel-item active">
					<div class="row justify-content-center">
						<div class="col-lg-6">
							<span>Why wait?</span>
							<h2 class="fw-bold display-5">It's Super Easy</h2>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam feugiat erat quis pulvinar semper. Cras commodo vitae libero ut consequat.</p>
							<div class="d-grid col-4 mx-auto">
								<a class="btn btn-outline-light" href="">Sign up</a>
							</div>
						</div>
					</div>
				</div>
			</div><button class="carousel-control-prev" data-bs-slide="prev" data-bs-target="#carouselExampleCaptions" type="button"><span aria-hidden="true" class="carousel-control-prev-icon"></span> <span class="visually-hidden">Previous</span></button> <button class="carousel-control-next" data-bs-slide="next" data-bs-target="#carouselExampleCaptions" type="button"><span aria-hidden="true" class="carousel-control-next-icon"></span> <span class="visually-hidden">Next</span></button>
		</div>
	</div>
</section>

Related Code Examples

Call to Action Block

This code snippet represents a call to action block that includes a counter to display a statistic and a call […]

Call to Action Code with Icons

This code snippet represents a call to action component that features two distinct call to actions, presented in a two-column […]

Call to Action Code Example

This code snippet represents a call to action component that features two distinct call to actions. The first call to […]

Like, Tweet or Pin Call to Action

This is a horizontal bar that is designed to encourage users to share a webpage on social media platforms such […]

Basic Call to Action Code

This code snippet is a basic call to action component that features a long headline, designed to capture the user’s […]

Call to Action Section

This code snippet represents a simple call to action section that features two boxes, each containing a distinct call to […]