How to create sliding effect in carousel using Bootstrap5? - html

I want to implement a carousel and for that I referred to the documentation for it in Bootstrap v5.1. Though the code is showing the carousel and is working but the slides are changing statically and I want to add the sliding effect in the carousel while moving the slides with arrows. Please refer some resources to learn that. Or in case something is wrong with my code then here it is:
<!-- CSS bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<!-- JS bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<!-- CSS -->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<section id="testimonials">
<div id="testimonial-carousel" class="carousel slide" data-bs-ride="false">
<div class="carousel-inner">
<div class="carousel-item active">
<h2>…..</h2>
</div>
<div class="carousel-item">
<h2 >…</h2>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
</section>


Here:
demo: https://codesandbox.io/s/demo-slides-utnot?file=/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
crossorigin="anonymous"
/>
</head>
<body>
<h1>
<div
id="carouselExampleControls"
class="carousel slide"
data-bs-ride="carousel"
>
<div class="carousel-inner">
<div class="carousel-item active">
<img
src="https://i.ibb.co/cvpntL1/hats.png"
class="d-block w-100"
alt="..."
/>
</div>
<div class="carousel-item">
<img
src="https://i.ibb.co/px2tCc3/jackets.png"
class="d-block w-100"
alt="..."
/>
</div>
<div class="carousel-item">
<img
src="https://i.ibb.co/0jqHpnp/sneakers.png"
class="d-block w-100"
alt="..."
/>
</div>
</div>
<button
class="carousel-control-prev"
type="button"
data-bs-target="#carouselExampleControls"
data-bs-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next"
type="button"
data-bs-target="#carouselExampleControls"
data-bs-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</h1>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
crossorigin="anonymous"
></script>
</body>
</html>


I solved this by adding the custom transition in CSS.
.carousel-item {
transition: transform .6s ease-in-out;
}

Related

Carousel CSS styling not being applied to HTML

I am new to bootstrap and I'm using carousel for the first time however I'm having issues with styling. I tried to resize my image using CSS however there have been no changes. I will attach my code below. I am following a YouTube tutorial.
{% load static %}
<!DOCTYPE html>
<html lang="en" style="height: 100%;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>
</html>
I'm sure I added bootstrap properly as well as the CSS file so I am unsure what the issue could be. I've also looked around on stack and all the solutions did not work for me.

I think you have used wrong element class name instead of .c-item use .carousel-item
.carousel-item{
height: 280px;
}
.c-img{
height: 100%;
object-fit: cover;
filter: brightness(0.6);
.carousel-item{
height: 280px;
}
.c-img{
height: 100%;
object-fit: cover;
filter: brightness(0.6);
}
<html lang="en" style="height: 100%;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SpendingTracker | {% block title %}{% endblock %}</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link href="{% static 'css/style.css' %}" rel="stylesheet" type="text/css" >
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>
<body>
<div id="home-carousel" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#home-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#home-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#home-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.discover-the-world.com/app/uploads/2018/08/norway-northern-tromso-surrounds-with-aurora-istk.jpg" class="d-block w-100 c-img" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="https://imageio.forbes.com/specials-images/imageserve/63a32fa0d0e96ccdb4b9f8f3/Tromso-Aurora-Panorama-12-34-38-PM/960x0.jpg?format=jpg&width=960" class="d-block w-100 c-img" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="https://media.timeout.com/images/105731796/750/422/image.jpg" class="d-block w-100 c-img" alt="Slide 3">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#home-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#home-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</body>
</html>

First things first, it is .carousel-item and not .c-item.
Next, please make sure that your CSS file is being used by the html file.
Replace
<link href="{% static 'css/style.css' %}" rel="stylesheet" type="text/css" >
With this tag
<link href="css/style.css" rel="stylesheet">
And push this link tag to the end of your head tag (your styles should always override other styles).
Keep in mind that this solution will work if you have a folder called css containing the file style.css (not styles.css) at the same level of the html file.
Regards

Can not see indicators nor are the slides moving in Bootstrap carousel

I am making a website using bootstrap, and it seems the carousel is not working, I copied the code directly from their page and it still won't work.
I don't see the indicators, nor do I see it moving (I have 3 slides of content).
This is all I see:
<!DOCTYPE html>
<html>
<head>
<title>realatte task</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link href="style.css" rel="stylesheet">
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid carousel-section-1">
<div id="carouselIndicators" class="carousel slide mt-4" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselIndicators" data-slide-to="2"></li>
<li data-target="#carouselIndicators" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block" src="testimonial.png" alt="First slide">
<p>"Im wondering why never contacted these guys sooner! Seriously, they all have commendable talent in their respective field and knocked my concept out of the ballpark. Thanks for an amazing experience!"</p>
<p class="mt-3">-Segero, NoranicMeds</p>
</div>
<div class="carousel-item">
<img class="d-block" src="testimonial.png" alt="Second slide">
<p>"Im wondering why never contacted these guys sooner! Seriously, they all have commendable talent in their respective field and knocked my concept out of the ballpark. Thanks for an amazing experience!"</p>
<p class="mt-3">-Segero, NoranicMeds</p>
</div>
<div class="carousel-item">
<img class="d-block" src="testimonial.png" alt="Third slide">
<p>"Im wondering why never contacted these guys sooner! Seriously, they all have commendable talent in their respective field and knocked my concept out of the ballpark. Thanks for an amazing experience!"</p>
<p class="mt-3">-Segero, NoranicMeds</p>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</body>
</html>

Add these bootstrap links on the header
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
And the data-target is 'data-target="#carouselIndicators". Same target you have to use on the Prev & Next Buttons
<a class="carousel-control-prev" href="#carouselIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<!DOCTYPE html>
<html>
<head>
<title>realatte task</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS only -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> -->
<!-- JavaScript Bundle with Popper -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link href="style.css" rel="stylesheet">
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid carousel-section-1">
<div id="carouselIndicators" class="carousel slide mt-4" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselIndicators" data-slide-to="2"></li>
<li data-target="#carouselIndicators" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block" src="https://www.ispydesign.com.au/wp-content/uploads/2014/04/bokeh-cover-bg.jpg" alt="First slide">
<p>"Im wondering why never contacted these guys sooner! Seriously, they all have commendable talent in their respective field and knocked my concept out of the ballpark. Thanks for an amazing experience!"</p>
<p class="mt-3">-Segero, NoranicMeds</p>
</div>
<div class="carousel-item">
<img class="d-block" src="https://www.ispydesign.com.au/wp-content/uploads/2014/04/bokeh-cover-bg.jpg" alt="Second slide">
<p>"Im wondering why never contacted these guys sooner! Seriously, they all have commendable talent in their respective field and knocked my concept out of the ballpark. Thanks for an amazing experience!"</p>
<p class="mt-3">-Segero, NoranicMeds</p>
</div>
<div class="carousel-item">
<img class="d-block" src="https://www.ispydesign.com.au/wp-content/uploads/2014/04/bokeh-cover-bg.jpg" alt="Third slide">
<p>"Im wondering why never contacted these guys sooner! Seriously, they all have commendable talent in their respective field and knocked my concept out of the ballpark. Thanks for an amazing experience!"</p>
<p class="mt-3">-Segero, NoranicMeds</p>
</div>
<a class="carousel-control-prev" href="#carouselIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</body>
</html>

Try using this
.carousel .carousel-indicators {
margin-bottom: -1rem;
}
<!doctype html>
<html>
<head>
<title>realatte task</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner text-center">
<div class="carousel-item active" data-bs-interval="10000">
<img class="d-block" src="testimonial.png" alt="First slide">
<p>"Im wondering why never contacted these guys sooner! Seriously, they all have commendable talent in their respective field and knocked my concept out of the ballpark. Thanks for an amazing experience!"</p>
<p class="mt-3">-Segero, NoranicMeds</p>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img class="d-block" src="testimonial.png" alt="Second slide">
<p>"Im wondering why never contacted these guys sooner! Seriously, they all have commendable talent in their respective field and knocked my concept out of the ballpark. Thanks for an amazing experience!"</p>
<p class="mt-3">-Segero, NoranicMeds</p>
</div>
<div class="carousel-item">
<img class="d-block" src="testimonial.png" alt="Second slide">
<p>"Im wondering why never contacted these guys sooner! Seriously, they all have commendable talent in their respective field and knocked my concept out of the ballpark. Thanks for an amazing experience!"</p>
<p class="mt-3">-Segero, NoranicMeds</p>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<link href="style.css" rel="stylesheet">
<script src="script.js"></script>
</body>
</html>

Bootstrap carousel not working or sliding

I tried to include carousel into my website but no success so far. I googled it and any answer is not helping. Mainly people had problem with not including jQuery.js or bootstrap.js. Both included.
Do I have to call carousel in separate js file? Bootstrap docs says that I do not have to.
Where is the mistake? Thanks for help!
HTML/CSS:
#import "adress-row.css";
#import "offer-head.css";
#import "navbar.css";
.carouselTop {
position: absolute;
width: 100%;
top: 0;
}
.navbar {
background-color: white;
opacity: 65%;
font-weight: 600;
color: black;
}
.toptop {
position: relative;
}
<!DOCTYPE html>
<html lang="pl">
<head>
<!-- META -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta name="keywords" content="klimatyzacja, pompa ciepła, pompy ciepła, smart home, cctv, alarm, security">
<meta name="author" content="Dawid Tandos">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/styles.css">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,400;1,200&display=swap" rel="stylesheet">
<!-- Font awsome -->
<!-- <script src="https://kit.fontawesome.com/50e5d27fce.js" crossorigin="anonymous"></script> -->
<title>Technologia dla domu</title>
</head>
<body>
<header>
<!-- Offer header -->
<div class="off-head">
<div class="row">
<div class="col-4" id="left">
<p>
Oferta klimatyzacji od ręki!
</p>
</div>
<div class="col-4">
</div>
<div class="col-4" id="right">
<p>
Umów się na bezpłatną konsultację!
</p>
</div>
</div>
</div>
<!-- Adress row -->
<div class="container-fluid">
<div class="row row-cols-auto top-row">
<div class="col-sm adress-row">
<div class="row row-cols-1">
<div class="col-sm adress-row hours1">
<img class="icons-top" src="assets/ico/clock.png">
</div>
<div class="col-sm adress-row hours">
<p>
Pn - Pt: <br>
Sobota:
</p>
</div>
<div class="col-sm adress-row hours2">
<p>
<span id="bold">7:00 - 17:00</span><br>
<span id="bold">7:00 - 14:00</span>
</p>
</div>
</div>
</div>
<div class="col-sm adress-row">
<div class="row">
<div class="col-sm adress-row hours1">
<img class="icons-top" id="env" src="assets/ico/envelope.png">
</div>
<div class="col-sm adress-row">
E-mail: <br>
tdd#gmail.com
</div>
</div>
</div>
<div class="col-sm adress-row">
<div class="row">
<div class="col-sm adress-row hours1">
<img class="icons-top" id="env" src="assets/ico/headphones.png">
</div>
<div class="col-sm adress-row">
Telefon:<br>
123 456 789
</div>
</div>
</div>
</div>
</div>
<div class="toptop">
<!-- NAVBAR -->
<nav class="navbar sticky-top navbar-expand-lg navbar-light navbar-no-bg" id="top-navbar">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img class="logo" src="assets/images/logo.png">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">
<img class="icons-navbar" src="assets/ico/house.png">
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">O nas</a>
</li>
<li class="nav-item dropdown px-3">
<a class="nav-link dropdown-toggle" href="#" id="navOfertyMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Oferta
</a>
<ul class="dropdown-menu" aria-labelledby="navOfertyMenu">
<li><a class="dropdown-item" href="#">Klimatyzacja</a></li>
<li><a class="dropdown-item" href="#">Pompy ciepła</a></li>
<li><a class="dropdown-item" href="#">Systemy alarmowe</a></li>
<li><a class="dropdown-item" href="#">Smart home</a></li>
</ul>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="#">Katalogi i cenniki</a>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="#">Poradnik</a>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="#">Kontakt</a>
</li>
<button type="button" class="btn btn-danger px-3 customButton" href="#">Szybka wycena</button>
</ul>
</div>
</div>
</nav>
<!-- Carousel -->
<div id="carouselTop" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselTop" data-slide-to="0" class="active"></li>
<li data-target="#carouselTop" data-slide-to="1"></li>
<li data-target="#carouselTop" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="assets/images/backgrounds/1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/images/backgrounds/2.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/images/backgrounds/3.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselTop" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselTop" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</header>
<!-- JavaScrpit file -->
<script src="assets/js/scripts.js"></script>
<!-- jQuery and Bootstrap.js-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>

Try putting your JavaScript file after/below the jQuery and Bootstrap files and ensure you have it in the order
<!--jquery, popper.js, bootstrap.js-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
​crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
crossorigin="anonymous"></script>
<!--jquery, popper.js, bootstrap.js-->```

You are using the bootstrap 4 make sure that your code for your carousel is in bootstrap 4 because there is new bootstrap which is bootstrap 5. If your carousel is not working try to add this:
This is for bootstrap 5
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})
This is for bootstrap 4
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
try to put this on above the tags
</body>
in order for it to work

You have to use those script. Hope your problem will be solved
<!-- jQuery and Bootstrap.js-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
​crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
crossorigin="anonymous"></script>

You forget to add js libs and code of carsoul in js file
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Technologia dla domu</title>
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,400;1,200&display=swap" rel="stylesheet">
<!-- Font awsome -->
<!-- <script src="https://kit.fontawesome.com/50e5d27fce.js" crossorigin="anonymous"></script> -->
</head>
<body>
<header>
<!-- Offer header -->
<!-- Carousel -->
<div id="carouselTop" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselTop" data-slide-to="0" class="active"></li>
<li data-target="#carouselTop" data-slide-to="1"></li>
<li data-target="#carouselTop" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.pexels.com/photos/6335/man-coffee-cup-pen.jpg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.pexels.com/photos/257897/pexels-photo-257897.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.pexels.com/photos/6335/man-coffee-cup-pen.jpg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="Second slide">
</div>
</div>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
crossorigin="anonymous"></script>
</body>
</html>
.carouselTop {
position: absolute;
width: 100%;
top: 0;
}
.navbar {
background-color: white;
opacity: 65%;
font-weight: 600;
color: black;
}
.toptop {
position: relative;
}
$('.carousel').carousel();

Bootstrap carousel stretched image

I am having an issue with the size of my carousel image slider using bootstrap.
I tried changing the height of the images using inline css but the images still are stretched.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="col-sm-6">
<div class="carousel-inner">
<div class="carousel-item active">
<img style="min-height: 250px;" class="d-block w-100" src="images/hikvision.png" alt="First slide">
</div>
<div class="carousel-item">
<img style="min-height: 250px;" class="d-block w-100" src="images/hikvision_2.png" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100 h-25" src="images/hikvision_3.png" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

Despite the lack of the images (because they are stored locally on your machine) I can see that you're using min-height.
The min-height property defines the minimum height of an element.
If the content is smaller than the minimum height, the minimum height will be applied.
If the content is larger than the minimum height, the min-height property has no effect.
w3schools
Use [max-]height and you might get what you want.

Bootstrap slideshow (carousel) indicators not working

I have just coded bootstrap carousel but I'm not able to get the indicators (left, right) for scrolling.
Please find the snippet below
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initital-scale=1">
<title> Bootstrap Example</title>
<!-- Bootstrap References -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="index.js"></script>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="mySlider" class="carousel slide" data-ride="carousel">
<!-- .nav's buttons on the bottom -->
<ol class="carousel-indicators">
<li data-target="#mySlider" data-slide-to="0" class="active"></li>
<li data-target="#mySlider" data-slide-to="1"></li>
</ol>
<!-- Image slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<figure>
<img width=500px height=500px src="http://www.hdwallpapersfreedownload.com/uploads/large/fruits/orange-fruit-with-leaf-hd.jpg" alt="Slide1">
<!--<div class="carousel-caption">This is a fruit leaf</div>-->
</figure>
<figcaption class="carousel-caption">This is a fruit leaf</figcaption>
</div>
<div class="item">
<figure>
<img width=500px height=500px src="http://www.greatgrubclub.com/domains/greatgrubclub.com/local/media/images/medium/4_1_1_kiwi.jpg" alt="Slide2">
<!--<div class="carousel-caption">This is a fruit leaf</div>-->
</figure>
<figcaption class="carousel-caption">KIWIf</figcaption>
</div>
</div> <!-- END: Image slides -->
<!-- Slide buttons (left,right) buttons -->
<a class="left coursel-control" href="#mySlider" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right coursel-control" href="#mySlider" role="button">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> <!-- END: Slider -->
</div>
</div>
</div>
</body>
</html>
I get the scrolling and everything but the right "Indicator" to scroll does not appear
What am I doing wrong?
Thanks

Added the default glyphicons and you're missing the data-slide attribute on the right/next arrow.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initital-scale=1">
<title> Bootstrap Example</title>
<!-- Bootstrap References -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="index.js"></script>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="mySlider" class="carousel slide" data-ride="carousel">
<!-- .nav's buttons on the bottom -->
<ol class="carousel-indicators">
<li data-target="#mySlider" data-slide-to="0" class="active"></li>
<li data-target="#mySlider" data-slide-to="1"></li>
</ol>
<!-- Image slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<figure>
<img width=500px height=500px src="http://www.hdwallpapersfreedownload.com/uploads/large/fruits/orange-fruit-with-leaf-hd.jpg" alt="Slide1">
<!--<div class="carousel-caption">This is a fruit leaf</div>-->
</figure>
<figcaption class="carousel-caption">This is a fruit leaf</figcaption>
</div>
<div class="item">
<figure>
<img width=500px height=500px src="http://www.greatgrubclub.com/domains/greatgrubclub.com/local/media/images/medium/4_1_1_kiwi.jpg" alt="Slide2">
<!--<div class="carousel-caption">This is a fruit leaf</div>-->
</figure>
<figcaption class="carousel-caption">KIWIf</figcaption>
</div>
</div><!-- END: Image slides -->
<!-- Slide buttons (left,right) buttons -->
<a class="left carousel-control" href="#mySlider" 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="#mySlider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- END: Slider -->
</div>
</div>
</div>
</body>