0

Im trying to use Bootstrap 5 card group with tiny slider. Tiny slider changing Bootstrap Card width. Tiny slider autoWidth and fixedWidth not fixing Card Width.

HTML Code

<div class="card-group" id="slider">
    <div class="card m-3" >
        <img src="image/card1.png" alt="">
        <div class="body">
            <h6 class="card-title text-center m-0">Lorem, ipsum dolor.</h6>
            <p class="card-text text-muted text-center"><small class="">Rs 99999</small></p>
        </div>
    </div>
    <div class="card m-3" >
        <img src="image/card1.png" alt="">
        <div class="body">
            <h6 class="card-title text-center m-0">Lorem, ipsum dolor.</h6>
            <p class="card-text text-muted text-center"><small class="">Rs 99999</small></p>
        </div>
    </div>
    <div class="card m-3" >
        <img src="image/card1.png" alt="">
        <div class="body">
            <h6 class="card-title text-center m-0">Lorem, ipsum dolor.</h6>
            <p class="card-text text-muted text-center"><small class="">Rs 99999</small></p>
        </div>
    </div>
    <div class="card m-3" >
        <img src="image/card1.png" alt="">
        <div class="body">
            <h6 class="card-title text-center m-0">Lorem, ipsum dolor.</h6>
            <p class="card-text text-muted text-center"><small class="">Rs 99999</small></p>
        </div>
    </div>
</div>

Tiny Slider

slider = tns({
  "container": "#slider",
  "nav": false,
  "items": 4,
  "gutter": 10,
  "swipeAngle": false,
  "speed": 400,
});

Card after applying Tiny Slider

enter image description here

oneclick
  • 91
  • 2
  • 9

0 Answers0