Using Xcart, PHP5.6, and Bootstrap 3.1.1
The objective is to create a carousel that displays 3 items at once and cycles through a total of 5 items.
Despite confirming that the necessary libraries are included and in the correct locations, the carousel fails to initialize.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
<style type="text/css">
.container{
margin: 0 auto;
}
</style>
<div class="container">
<div id="this-carousel-id" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="https://i.sstatic.net/ihiQ2.png" />
</div>
<div class="item">
<img src="https://i.sstatic.net/ihiQ2.png" />
</div>
<div class="item">
<img src="https://i.sstatic.net/ihiQ2.png" />
</div>
<div class="item">
<img src="https://i.sstatic.net/ihiQ2.png" />
</div>
<div class="item">
<img src="https://i.sstatic.net/ihiQ2.png" />
</div>
</div>
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
</div>
</div>
$(document).ready(function(){
$('.carousel').carousel({
interval: 4000
});
});
Attempts have been made to implement carousel-like behavior using code from the documentation, but the result shows stacked images:
https://i.sstatic.net/ihiQ2.png https://i.sstatic.net/ihiQ2.png https://i.sstatic.net/ihiQ2.png I am frustrated as this issue has been raised multiple times with solutions provided, yet I remain stuck.