I have a problem that seems small, but it is no longer making me sleep at night, I am probably thinking about it too much and I have lost sight of the correct path!
I'm using Bootstrap 4 as Framework. I have to insert an automatic, interaction-free, full-page Carousel that displays images in random order each time the page is refreshed. It has to get the images from a specific folder, because I have a large number of images.
Anyone can help me with the Javascript that i need for do that??
below the piece of basic code from which I start. Obviously written like this works without problems, and reflects the style I need, but the images are always the same, and in the order indicated.
Thanks in advance
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Text&family=Big+Shoulders+Text&family=Goldman&family=Heebo&family=Quicksand&family=Shadows+Into+Light&display=swap" rel="stylesheet">
<style media="screen">
.carousel-inner > .carousel-item {
min-height: 800px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
</style>
<title></title>
</head>
<body>
<section class="nopadding">
<div id="carouselProjRec" class="carousel slide carousel-fade" data-ride="carousel" interval="1800">
<div class="carousel-inner">
<div class="carousel-item transparent" style="background-image: url(img/car4.jpg)">
</div>
<div class="carousel-item active transparent" style="background-image: url(img/car3.jpg)">
</div>
<div class="carousel-item transparent" style="background-image: url(img/car8.jpg)">
</div>
<div class="carousel-item transparent" style="background-image: url(img/car7.jpg)">
</div>
<div class="carousel-item transparent" style="background-image: url(img/car6.jpg)">
</div>
<div class="carousel-item transparent" style="background-image: url(img/car11.jpg)">
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
Aucun commentaire:
Enregistrer un commentaire