here is the file code:
<section class="hero-slider-sec top-section">
<div id="carouselExample" class="carousel slide carousel-dark" data-bs-ride="carousel" data-bs-interval="5000">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.globaloverline.com/extensions/novator/storefront/view/novator/image/presets/18/7a/e.png"
class="d-none d-lg-block w-100 h-auto" alt="images" width="100%" height="100%">
<img src="https://www.globaloverline.com/extensions/novator/storefront/view/novator/image/presets/18/7a/f.png"
class="d-block d-lg-none w-100 h-auto" alt="images" width="100%" height="100%">
<div class="carousel-caption d-none d-lg-flex">
<div class="container">
<div class="row">
<div class="col-md-5 text-start">
<p class="h5">Feature rich with smart UI</p>
<h1 class="my-4 h2"><span class="text-primary">Easy & Fun</span> To Manage</h1>
<p class="mb-4">Feature reach shopping cart application right out of the box. Standard features allow
to set up complete eCommerce site with all the tools needed to sell products online.</p>
<a href="https://www.globaloverline.com/index.php?rt=content/contact" class="btn btn-outline-dark">Contact Us Now</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://www.globaloverline.com/extensions/novator/storefront/view/novator/image/presets/18/7b/0.png" class="d-none d-lg-block w-100 h-auto" alt="images" width="100%" height="100%">
<img src="https://www.globaloverline.com/extensions/novator/storefront/view/novator/image/presets/18/7b/1.png" class="d-block d-lg-none w-100 h-auto" alt="images" width="100%" height="100%">
<div class="carousel-caption d-none d-lg-flex">
<div class="container">
<div class="row">
<div class="col-md-5 text-start">
<h1 class="mb-4">All Screen Size</h1>
<p class="mb-4">Natively responsive template implemented with bootstrap library and HTML5. Will look
good on most mobile devices and tablets.</p>
<a href="https://www.globaloverline.com/index.php?rt=content/contact" class="btn btn-outline-dark">Request A Demo</a>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://www.globaloverline.com/extensions/novator/storefront/view/novator/image/presets/18/7b/4.png" class="d-none d-lg-block w-100 h-auto" alt="images" width="100%" height="100%">
<img src="https://www.globaloverline.com/extensions/novator/storefront/view/novator/image/presets/18/7b/3.png" class="d-block d-lg-none w-100 h-auto" alt="images" width="100%" height="100%">
<div class="carousel-caption d-none d-lg-flex">
<div class="container">
<div class="row">
<div class="col-md-5 text-start">
<h1 class="mb-4 h2 slide-3-title">SEO Friendly</h1>
<h1 class="mb-4 h2 slide-3-title">Fast Loading</h1>
<p class="mb-4 text-white">Natively responsive template implemented with bootstrap library and HTML5.
Will look good on most mobile devices and tablets.</p>
<a href="https://www.globaloverline.com/index.php?rt=content/contact" class="btn btn-outline-light">Request A Demo</a>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="header-arrow rounded-end"><i class="bi bi-arrow-left"></i></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="header-arrow rounded-start"><i class="bi bi-arrow-right"></i></span>
</button>
</div>
</section>
<script>
const carousel = document.getElementById('carouselExample');
const interval = 5000; // 5 seconds
const transitionClasses = [
'fade-transition',
'zoom-transition',
'rotate-transition',
'slide-right',
'slide-left',
'blur-focus-transition'
];
function randomScrollEffect() {
const items = document.querySelectorAll('.carousel-item');
items.forEach(item => item.classList.remove(...transitionClasses)); // Reset transition classes
const randomClass = transitionClasses[Math.floor(Math.random() * transitionClasses.length)]; // Pick random class
const activeItem = document.querySelector('.carousel-item.active'); // Find the active item
if (activeItem) {
activeItem.classList.add(randomClass); // Apply the random transition
}
}
// Set an interval to apply random effects
setInterval(randomScrollEffect, interval);
</script>
<style>
/* Add the animation keyframes */
.fade-transition {
animation: fadeEffect 1s ease;
}
@keyframes fadeEffect {
from { opacity: 0; }
to { opacity: 1; }
}
.zoom-transition {
animation: zoomEffect 1s ease;
}
@keyframes zoomEffect {
from { transform: scale(0.8); }
to { transform: scale(1); }
}
.rotate-transition {
animation: rotateEffect 1s ease;
}
@keyframes rotateEffect {
from { transform: rotateY(90deg); }
to { transform: rotateY(0); }
}
.slide-right {
animation: slideRightEffect 1s ease;
}
@keyframes slideRightEffect {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.slide-left {
animation: slideLeftEffect 1s ease;
}
@keyframes slideLeftEffect {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
.blur-focus-transition {
animation: blurFocusEffect 1s ease;
}
@keyframes blurFocusEffect {
from { filter: blur(5px); }
to { filter: blur(0); }
}
</style>
