<style type="text/css">
#bac-carousel-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-inedx: -1;
}
.bac-carousel-item {
background: center center/cover no-repeat;
z-index: 0;
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: 1.3s opacity;
transition: 1.3s opacity;
opacity: 0;
}
.bac-carousel-item.active {
opacity: 1;
}
</style>
<div id="bac-carousel-wrapper">
<div class="bac-carousel-item active" style="background-image: url('/images/slide-bg1.jpg');"></div>
<div class="bac-carousel-item" style="background-image: url('/images/slide-bg2.jpg');"></div>
<div class="bac-carousel-item" style="background-image: url('/images/slide-bg3.jpg');"></div>
</div>
<script type="text/javascript">
try {
const bacCarouselItems = document.querySelectorAll(".bac-carousel-item");
let itemNum = 1;
setInterval(() =>{
if(itemNum == bacCarouselItems.length) {
itemNum = 0;
bacCarouselItems.forEach(item => item === bacCarouselItems[itemNum] ? bacCarouselItems[itemNum].classList.add("active") : item.classList.remove("active"));
itemNum = 1;
} else {
bacCarouselItems.forEach(item => item === bacCarouselItems[itemNum] ? bacCarouselItems[itemNum].classList.add("active") : item.classList.remove("active"));
itemNum++;
}
}, 10000);
} catch {}
</script>
Seems my scripts are removed from blocks on save.
Is that neccesary? I need custom script for some blocks, how should I add them correctly to block?
Also GrapesJS moved my inline styles to external style but neither new IDs nor classes are not used
<div id="bac-carousel-wrapper" class="IDKHLQN54ECOJFT1">
<div class="bac-carousel-item active IDKHLQN54PVQJPB2"></div>
<div class="bac-carousel-item IDKHLQN54TE7U8Q3"></div>
<div class="bac-carousel-item IDKHLQN54WJ6MQX4"></div>
<style>
#ieeou{background-image:url('/images/slide-bg1.jpg');}
#izso2{background-image:url('/images/slide-bg2.jpg');}
#ijyki{background-image:url('/images/slide-bg3.jpg')
</style>