How to stop Bootstrap 5 carousel autoslide only for large screens?-CodePudding

I have carousel from Bootstrap 5 which needs to stop autoslide only for large screens, but for mobile version i need to have autoslide. How can I do that if its possible only with html and css/scss?

I know about data-bs-interval="false" but this is stopping autoslide for mobile screen too.

<div id="carouselExampleControls"  data-bs-ride="carousel">
  <div >
    <div >
      <img src="..."  alt="...">
    </div>
    <div >
      <img src="..."  alt="...">
    </div>
    <div >
      <img src="..."  alt="...">
    </div>
  </div>
  <button  type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span  aria-hidden="true"></span>
    <span >Previous</span>
  </button>
  <button  type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span  aria-hidden="true"></span>
    <span >Next</span>
  </button>
</div>

CodePudding user response：

Add this script at the end of body

<script>
    if(window.innerWidth > 1000){
      document.getElementById('carouselExampleControls').dataset.bsInterval = false
    }
</script>

this will check the size of window before it loads and set data-bs-interval to false if size is greater then 1000

CodePudding user response：

You can call interval: false with javascript. and, also, define window width. Please try as below javascript.

var myCarousel = document.querySelector('#carouselExampleControls')
if ($(window).width() > 991) {
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: false
})
}