I'm currently utilizing bootstrap 3 for my website. However, I encountered an issue with the slider when viewing the page on a mobile device as the image was displaying outside the viewport, shifted to the right.
Additionally, in Firefox, the slider does not seem to be functioning properly. Can anyone provide a solution to this problem?
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/flatly/bootstrap.min.css" rel="stylesheet">
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'rel="stylesheet">
<link href="{{ url('assets/css/style.css') }}" rel="stylesheet">
<title>Social</title>
</head>
HTML:
<div id="carousel-example-generic2" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic2" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic2" data-slide-to="1"></li>
<li data-target="#carousel-example-generic2" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="assets/images/s1.jpg" alt="" >
<!-- Slide Description -->
<div class="carousel-caption">
<h3>Lorem ipsum dolor sit amet.</h3>
<p>Suspendisse fermentum arcu et ligula rhoncus dapibus.</p>
</div>
</div>
<div class="item">
<img src="assets/images/s2.jpg" alt="">
<!-- Slide Description -->
<div class="carousel-caption">
<h3>Lorem ipsum dolor sit amet.</h3>
<p>Suspendisse fermentum arcu et ligula rhoncus dapibus.</p>
</div>
</div>
<div class="item">
<img src="assets/images/s3.jpg" alt="">
<!-- Slide Description -->
<div class="carousel-caption">
<h3>Lorem ipsum dolor sit amet.</h3>
<p>Suspendisse fermentum arcu et ligula rhoncus dapibus.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic2" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic2" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
No alterations have been made to the CSS.