Bootstrap Carousel ~ putting hashtags in browser

Question

I made a Carousel, and here's the code:

        <!-- Indicators -->
        <ul class="carousel-indicators">
            <li data-target="#demo" data-slide-to="0" class="active"></li>
            <li data-target="#demo" data-slide-to="1"></li>
            <li data-target="#demo" data-slide-to="2"></li>
            <li data-target="#demo" data-slide-to="3"></li>
        </ul>

        <!-- The slideshow -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="~/Content/Logo RCC 1.png" alt="Los Angeles">
            </div>
            <div class="carousel-item">
                <img src="~/Content/Slideshow pic (1).jpg" alt="Chicago">
            </div>
            <div class="carousel-item">
                <img src="~/Content/Slideshow pic (2).jpg" alt="New York">
            </div>
            <div class="carousel-item">
                <img src="~/Content/Slideshow pic (3).jpg" alt="New York">
            </div>
        </div>

        <!-- Left and right controls -->
        <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>

Script:

$('#demo').carousel({ interval: 1 });

I have 2 problems:

1. It shows up with the first image, slides to the next and stays there.
2. Also, when I click the arrow it just adds to the URL #demo.

Answer 1

To begin with you can most likely get rid of the JS interval code and instead add this to each slide. 6000 is 6 seconds....

data-bs-interval="6000"

Worth noting that the line above is for Bootstrap 5. If you're using an earlier version it will probably be....

data-interval="6000"

You also seem to be missing this important Bootstrap code from the very top line which could be the reason your slides are not sliding.

<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">

Again that's the v5 formatting and don't forget, when the line above is added, it's a div opening so add a </div> at the end of your code to close it off :)