Hello,
Is getting a Bootstrap 5-based Carousel to work with Service Portal possible? I have read that ServiceNow is still in Bootstrap 3.xxxx but wondering if you can load .js Includes and CSS as part of the Widget to get it to work? I have never done this and am still a novice Angular/Widget builder.
I am trying to use the code from this video, and here is a basic version of it. When I try to use it in my instance, the CSS screws up my Employee Center header, so I need to have CSS tied only to the widget vs. the page. I tried attaching the .js Includes and CSS links to the widget, but nothing changed. However, I am unsure if I did it correctly, so I attached an image of Widget Dependency below.
https://www.youtube.com/watch?v=ku_97a6Bgkg
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>EVC Carousel Slider</title>
</head>
<body>
<style>
.carousel-item {
height: 12rem;
background: #777;
Color: white;
position: relative;
background-position: center;
background-size: cover;
}
.container {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding-bottom: 25px;
}
</style>
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container">
<h1>Example Headline</h1>
<p>Random text here.</p>
<a href="#" class="btn btn-sm btn-primary">Link</a>
</div>
</div>
<div class="carousel-item">
<div class="container">
<h1>Example Headline</h1>
<p>Random text here.</p>
<a href="#" class="btn btn-sm btn-primary">Link</a>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>
Thank you,
-Wesley
Hello
INSTEAD OF CUSTOM WIDGET YOU CAN TRY THE OOB WIDGET WHICH IS ALREADY AVAILABLE IN EVERY INSTANCE
You might have to use instance of carousel in your page while creating the instance and for images you can add your images in the related list .
Refer below link for the detailed process
Hope this helps
Mark the answer correct if this helps you
Do you know if I can add the Bootstrap 5 .js includes to the widget?
- I would like to remove this shadow line at the end (see image below).
- I Would like to move the Circles that represent pictures lower or change them to small horizontal lines, like in the video of the Bootstrap 5 Carousel.
- I would like to add text over the images and a hyperlink button, like in the video of the Bootstrap 5 Carousel.
