Background image shows for a second then disappears in the bootstrap carousel?

Background image shows for a second then disappears in the bootstrap carousel?
0

com-video-to-gif

gif above is to show what I mean

I have created this 3D cylinder-drinking-can shape that rotates clockwise. It has been done well and has been successful such as showing the canned product and rotating. But when I included it in the bootstrap carousel it shows for a second then it disappears?? I can see that it is rotating because of every time the can appears it shows a different view of the label. what am I doing wrong here??

I have 97 div class sides but won’t copy and paste each one here as it will take the whole page!
But hopefully, you all can understand what it is I am trying to do here with SCSS and HTML. If not, let me know, and I will explain it more in detail. But the big question for me is why the first two slides of the carousel (side-1 and side-2) show for a second and the disappear? however, the last carousel-item that has an img src ( img class=“d-block w-50” src=“amor2.png” alt=“Third slide”) works well. you can see the full image… at least this shows me that there is no issue with the carousel. that it works perfectly well, but have issues with the first two 3D cans??

HTML

* 97 (so there are 97 sides)
    <div id="can" class="carousel-item">
        <!-- <img class="d-block w-50" src="amor2.png" alt="Second slide">  -->
        <!-- <div id="can"> -->
        <div class="bottle bottle-1">
            <!-- <img src="//framework.blcmsdev.com/images/product.png"/> -->
            <div class="label">
                <div class="side-2"></div>
            </div>
            <!-- </div> -->
        </div>
    </div>
    <div class="carousel-item">
        <img class="d-block w-50" src="amor2.png" alt="Third slide">
        <div id="can"></div>
    </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>

CSS (SCSS)

@for $i from 1 to 97 {
.side-1:nth-of-type(#{$i}) {
$position: 972px - ($i * 10.125px) + 10.125px;
background-position: $position 0;
transform: rotateY($i * 3.75deg - 3.75deg) translateZ(154px);
position: absolute;
height: 659px;
width: 13.25px;
animation: grow 5s ease-in-out infinite;
animation-delay: $i*0.9s;
}
}

@for $i from 1 to 97 {
.side-2:nth-of-type(#{$i}) {
$position: 972px - ($i * 10.125px) + 10.125px;
background-position: $position 0;
transform: rotateY($i * 3.75deg - 3.75deg) translateZ(154px);
position: absolute;
height: 659px;
width: 13.25px;
animation: grow 5s ease-in-out infinite;
animation-delay: $i*0.9s;
}
}

.bottle {
width: 10.125px;
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(650px, 190px, 40px);
-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(650px, 190px, 40px);
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(350px, 190px, 40px);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.bottle-1 {
margin-left: 400px;
}

.bottle>img {
position: absolute;
top: -180px;
left: -182px;
width: 374px;
}

.label {
-webkit-animation: spin 50s infinite linear;
-moz-animation: spin 50s infinite linear;
animation: spin 50s infinite linear;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
}

.side-1 {
// position: absolute;
// width: 8.25px;
// /* background image is 792px 320px, try with green-hills or thailand-sunrise.jpg */
// height: 359px;
background: url(“https://i.postimg.cc/Fs2RgnN6/passion.png”);
}

.side-2 {
// position: absolute;
// width: 8.25px;
// /* background image is 792px 320px, try with green-hills or thailand-sunrise.jpg */
// height: 359px;
background: url(“https://i.postimg.cc/zGzJjm40/raspberry.png”);
}

@-webkit-keyframes spin {
from {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}

@-moz-keyframes spin {
from {
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-moz-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}

@keyframes spin {
from {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(-360deg);
-moz-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}

@mixin makeSide() {}

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.