我怎样才能只为这个轮播获得 css 和 js？

Question

I have been trying to get only css for this carousel with custom bootstrap but it is aboslutely not working for me, it completely changes the site

This is the html for the carousel:

<div class="container text-center my-3">
    <div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel">
        <div class="carousel-inner w-100" role="listbox">
            <div class="carousel-item row no-gutters active">
                <div class="col-3 float-left"><img class="img-fluid" src="http://placehold.it/350x280/222/fff?text=1"></div>
                <div class="col-3 float-left"><img class="img-fluid" src="http://placehold.it/350x280/444?text=2"></div>
                <div class="col-3 float-left"><img class="img-fluid" src="http://placehold.it/350x280/888?text=3"></div>
                <div class="col-3 float-left"><img class="img-fluid" src="http://placehold.it/350x280/111/fff?text=4"></div>
            </div>
            <div class="carousel-item row no-gutters">
                <div class="col-3 float-left"><img class="img-fluid" src="http://placehold.it/350x280?text=5"></div>
                <div class="col-3 float-left"><img class="img-fluid" src="http://placehold.it/350x280/555?text=6"></div>
                <div class="col-3 float-left"><img class="img-fluid" src="http://placehold.it/350x280/333/fff?text=7"></div>
                <div class="col-3 float-left"><img class="img-fluid" src="http://placehold.it/350x280/bbb?text=8"></div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#recipeCarousel" 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="#recipeCarousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

</div>

If anyone could help me get just the css and js from bootstrap I would greatly appreciate it !!

Answer 1

In order to limit the scope of your CSS you have to create a unique selector. In your code you use id="recipeCarousel" and since id should be unique on the page, while class selectors allow multiple elements of the same class, all your CSS for this carousel should start with id.

This code will select only elements with carousel-inner class within recipeCarousel element.

#recipeCarousel carousel-inner {
    background: blue;
}

You can have both ID and Classes on your elements. So if you want to select the wrapper as well, you can change it to

<div id="myCarousel" class="container text-center my-3">
    ...
</div>

and start selecting from there.