I want to design a bootstrap wizard using a carousel like I want to disable auto scrolling. I have added "false" to bs-interval but still it scrolls automatically/
My code is here
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA /3y gxIOqMEjwtxJY7qPCqsdltbNJuaOe923 mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="accordionExample">
<div >
<h2 id="headingOne">
<button type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<input value="Accordion Item #1" />
</button>
</h2>
<div id="collapseOne" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div >
<div id="carouselExampleDark" data-bs-ride="carousel" data-bs-interval="false">
<div >
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div >
<div >
<p >I have a Bootstrap Accordion I need to prevent opening of the accordion when textbox is clicked While, if anyone clicks outside the texbox (blue color region) let it expand and shrink as usual.
</p>
<div >
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div >
<p >I have a Bootstrap Accordion I need to prevent opening of the accordion when textbox is clicked While, if anyone clicks outside the texbox (blue color region) let it expand and shrink as usual.
</p>
<div >
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div >
<p >I have a Bootstrap Accordion I need to prevent opening of the accordion when textbox is clicked While, if anyone clicks outside the texbox (blue color region) let it expand and shrink as usual.
</p>
<div >
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
<span aria-hidden="true"></span>
<span >Previous</span>
</button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
<span aria-hidden="true"></span>
<span >Next</span>
</button>
</div>
</div>
</div>
</div>
</div>CodePudding user response：
The data-bs-ride="carousel" attribute is used to mark a carousel as animating starting at page load. If you don’t use data-bs-ride="carousel" to initialize your carousel, you have to initialize it yourself. It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.
If you don't want automatic scrolling try data-bs-ride="false" to your collapse component.
CodePudding user response：
I have just done some testing on my local machine, and I was able to reproduce the same bug, however after some Google searches I stumbled onto this GitHub issue that has the exact same problem as you. data-bs-ride="carousel" conflicts with the data-bs-interval making it scroll continuously. If you remove data-bs-ride="carousel" from the <div id="carouselExampleDark">, it will stop the auto scrolling issue. I hope this solves your issue, if not please let me know, I might be able to help you out further.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA /3y gxIOqMEjwtxJY7qPCqsdltbNJuaOe923 mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="accordionExample">
<div >
<h2 id="headingOne">
<button type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<input value="Accordion Item #1" />
</button>
</h2>
<div id="collapseOne" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div >
<div id="carouselExampleDark" data-bs-interval="false">
<div >
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div >
<div >
<p >I have a Bootstrap Accordion I need to prevent opening of the accordion when textbox is clicked While, if anyone clicks outside the texbox (blue color region) let it expand and shrink as usual.
</p>
<div >
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div >
<p >I have a Bootstrap Accordion I need to prevent opening of the accordion when textbox is clicked While, if anyone clicks outside the texbox (blue color region) let it expand and shrink as usual.
</p>
<div >
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div >
<p >I have a Bootstrap Accordion I need to prevent opening of the accordion when textbox is clicked While, if anyone clicks outside the texbox (blue color region) let it expand and shrink as usual.
</p>
<div >
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
<span aria-hidden="true"></span>
<span >Previous</span>
</button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
<span aria-hidden="true"></span>
<span >Next</span>
</button>
</div>
</div>
</div>
</div>
</div>