Carousel data-slide="prev" / "next" not working

[DaleMFrancis]

Actually, it's probably the whole carousel that's not working... but the "prev" and "next" are the first obvious signs. Anyway, here's the code:

           <!-- carousel here! -->   
           <div id="myCarousel" class="carousel slide" data-ride="carousel">

                <!-- Wrapper for slides -->
                <div class="carousel-inner">
                     <div class="item active">
                          <img class="d-block w-100" src="assets/Monaco-and-Spirit.jpeg"> 
                     </div>
                     &nbsp;
                     &nbsp;
                     <div class="item">
                          <img class="d-block w-100" src="assets/Monaco-and-Spirit2.jpeg"> 
                     </div>
                     &nbsp;
                     &nbsp;
                     <div class="item">
                          <img class="d-block w-100" src="assets/Monaco-and-Spirit3.jpeg"> 
                     </div>
                     &nbsp;
                     &nbsp;
                     <div class="item">
                          <img class="d-block w-100" src="assets/Monaco-and-Spirit3.jpeg"> 
                     </div>
                     &nbsp;
                     &nbsp;
                     <div class="item">
                          <img class="d-block w-100" src="assets/Monaco-and-Spirit3.jpeg"> 
                     </div>
                </div>

                <!-- Left and right controls -->
                <!-- use font-awesome -->
                <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                     <span style="font-size: 38px; color: Dodgerblue;"
                          class="fas fa-angle-left aria-hidden=true">
                     </span>
                     <span class="sr-only">Previous</span>
                </a>

                <a class="right carousel-control" href="#myCarousel" data-slide="next">
                     <span style="font-size: 38px; color: Dodgerblue;"
                          class="fas fa-angle-right aria-hidden=true">
                     </span>
                     <span class="sr-only">Next</span>
                </a>
           </div>                    

Can someone advise? Thank you.

[DaleMFrancis]

In addition to the above HTML, following is the associated CSS. Also, in the above HTML, class="item" is now replaced with class="pics".

.pics {
width: 200px;
height: 150px;
}

.pics.active {
border-style: solid;
border-width: 5px;
}

img {
float: right;
}

.fa-angle-left {
float: left;
}

.fa-angle-right {
float: right;
}

.carousel-wrapper {
overflow: hidden;
}

.carousel-inner {
display: flex;
flex-direction: row;
}

[Deckluhm]

The easiest way to get help is to provide a live version of your project, or at least a CodePen, JSFiddle or anything similar where we can see all your code (HTML + CSS + JS).

You are only sharing HTML + CSS but not JS which is probably where your problem is coming from.

[DaleMFrancis]

Rather than attempt CodePen or JSFiddle, I would simply like to zip up my entire project and send this in a zip file as an email attachment. My thinking is that Angular offers many files that reference a complex folder structure, plus many .ts files. I am also concerned about my limited experience with JSFiddle and CodePen. It should be simpler to supply you with the whole project that you can unzip to a “cats” project starting on a "cats" folder. Can you accommodate me on this approach? Dale Francis Angular Developer [email protected] 571.326.7227

…

On Nov 22, 2020, at 8:03 AM, Arnaud Thomas D. ***@***.***> wrote: The easiest way to get help is to provide a live version of your project, or at least a CodePen <https://codepen.io/pen>, JSFiddle <https://jsfiddle.net/>or anything similar where we can see all your code (HTML + CSS + JS). You are only sharing HTML + CSS but not JS which is probably where your problem is coming from. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#32219 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ARZGFCJGTXNSWAOGWSZBQJDSREDZVANCNFSM4T5Y6B7Q>.

[Deckluhm]

It's almost always a better idea to provide a CodePen/JSFiddle for 2 main reasons:

• It's way easier for people to help you if they just need to click a link (vs downloading your archive, unzipping it, installing Node version + packages, run it...etc.)
• It forces you to isolate the part of your app where the bug is, and most of the time it's enough to understand if it's an issue with Bootstrap or something else (another lib, your own code...etc.)

So I know it requires a bit more work to extract your code to a CodePen/JSFiddle but it's worth it (either you find the issue doing it or you give something for people to help you).

[DaleMFrancis]

You’re right Arnaud, JSFiddle is better for the reasons you give. I simply wasn’t familiar with that tool at that time. So I posted to JSFiddle and several people looked at it. But I didn’t get a single useful reply. Oh well, the issue was too tough for me so I went in another direction without Carousel. Thanks for the input.

…

Sent from my iPhone

On Mar 3, 2021, at 5:18 PM, Arnaud Thomas D. ***@***.***> wrote:  It's almost always a better idea to provide a CodePen/JSFiddle for 2 main reasons: It's way easier for people to help you if they just need to click a link (vs downloading your archive, unzipping it, installing Node version + packages, run it...etc.) It forces you to isolate the part of your app where the bug is, and most of the time it's enough to understand if it's an issue with Bootstrap or something else (another lib, your own code...etc.) So I know it requires a bit more work to extract your code to a CodePen/JSFiddle but it's worth it (either you find the issue doing it or you give something for people to help you). — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[mdo]

Depending on what version of Bootstrap you're using, this may have been from missing JS, mismatched versions of our JS (v5's requires slightly different HTML), or something else entirely. Just wanted to point that out for why we ask for links and live, reduced demos :).