Hi All,
Scratching my head on this one, trying to make a hot button on my carousel but not working on a mobile phone but on desktop it does.
any help will be appreciated
here is an link to index please view it on mobile to see what I'm trying to explain
Thanks All like always! 
9
Replies
Good day Nancy, that didn't work actually when I insert the cdn it messed up my whole css so didn't do anything. 
The default code works fine in mobile viewports.
Copy & paste this code into a new, blank document and test it.
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Bootstrap 3.7 Carousel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Latest compiled and minified Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.center-block {float:none}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-10 center-block text-center">
<h1>Bootstrap 3.7 Default Carousel</h1>
</div>
<!--begin Bootstrap Carousel-->
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5200">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://placeimg.com/1180/400/arch/4" alt="...">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Details....</p>
</div>
</div>
<div class="item">
<img src="https://placeimg.com/1180/400/arch/3" alt="...">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Details....</p>
</div>
</div>
<div class="item">
<img src="https://placeimg.com/1180/400/arch/2" alt="...">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Details....</p>
</div>
</div>
<div class="item">
<img src="https://placeimg.com/1180/400/arch/1" alt="...">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Details....</p>
</div>
</div>
<!--end active-->
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span> </a>
<!--end carousel-->
</div>
</div>
<div class="row">
<div class="col-md-10 center-block">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse quae placeat doloribus earum, aliquam, quibusdam dicta, pariatur nemo quo ut voluptates doloremque inventore. Magnam non iusto, deserunt ea! Necessitatibus, sequi.</p>
</div>
</div>
</div>
<!--latest jQuery 3-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!--Bootstrap-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Buttons are not working for me on desktop either.
It's not a good idea to have links on top of carousel pagers. It's going to be a conflict for many users.
Instead of having image in the background, I would keep images in the foreground HTML and link the image to its target page.
An example. Pinebrook Vacation Rentals
AdChoices