Currently, I am utilizing a slider sourced from the following location:
https://codepen.io/kravisingh/pen/pLGzgo
Here is the complete code for the page:
paste.ofcode.org/Dx5NyPRunupjL6GRysUx9g
However, upon adding these libraries, the layout of other sections on the webpage appears distorted. Is there a way to prevent this issue?
This is the EJS code snippet:
<div id="demo" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- The slideshow -->
<div class="container carousel-inner no-padding">
<!-- mapping your meetings parent -->
<% meetings.forEach(function(meeting,index){ %>
<div class="carousel-item <%= index === 0 ? 'active' : '' %>">
<!-- mapping your meetings child -->
<% meeting.forEach(function(m){ %>
<div class="col-xs-3 col-sm-3 col-md-3">
<div class="col-md-2 col-xs-12 upcoming-btn">
<span href="" class="btn btn-success btn-lg dashboard-icon" style="width: 200px; height: 150px;">
<p style="padding-top: 15px; font-size: 25px; font-weight: bold;"><%= m.subject %></p>
<p style="font-size: 25px; font-weight: bold;"><%= convertDate(m.date) %></p>
<p style="font-size: 25px; font-weight: bold;">Upcoming</p>
</span>
</div>
</div>
<% }) %>
</div>
<% }) %>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
The necessary libraries for it are:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>