php - How to change the current Bootstrap card view display to Bootstrap Carousel?
one text
Solution:
I have to make it all HTML to see that if it works. I hope you can rewrite it back to PHP later.
<div class="row">
<div class="col-md-12">
<div class="packages_list_body">
<div class="packages_cards_inner_wrap" id="package-xxx">
<h2 id="bundle_p_title" style="color:#a52a2a; margin-left: 12px;">Title here</h2>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active group-of-cards">
<div class="packages_cards row">
<div class="col-md-3">
<div class="card">
<img src="https://www.gstatic.com/webp/gallery/1.jpg" alt="sample" class="card-img-top">
<div class="card-body">
<h3>Post title1</h3>
<p> Hello, This is ia test episode of Abbot and Costello hope you guys have enjoyed listening...</p>
</div>
<!--.card-body-->
</div>
<!--.card-->
</div>
<!--.col-xxx-x-->
<div class="col-md-3">
<div class="card">
<img src="https://www.gstatic.com/webp/gallery/1.jpg" alt="sample" class="card-img-top">
<div class="card-body">
<h3>Post title2</h3>
<p> Hello, This is ia test episode of Abbot and Costello hope you guys have enjoyed listening...</p>
</div>
<!--.card-body-->
</div>
<!--.card-->
</div>
<!--.col-xxx-x-->
<div class="col-md-3">
<div class="card">
<img src="https://www.gstatic.com/webp/gallery/1.jpg" alt="sample" class="card-img-top">
<div class="card-body">
<h3>Post title3</h3>
<p> Hello, This is ia test episode of Abbot and Costello hope you guys have enjoyed listening...</p>
</div>
<!--.card-body-->
</div>
<!--.card-->
</div>
<!--.col-xxx-x-->
</div>
<!--.packages_cards-->
</div>
<!--.group-of-cards-->
<div class="carousel-item group-of-cards">
<div class="packages_cards row">
<div class="col-md-3">
<div class="card">
<img src="https://www.gstatic.com/webp/gallery/1.jpg" alt="sample" class="card-img-top">
<div class="card-body">
<h3>Post title4</h3>
<p> Hello, This is ia test episode of Abbot and Costello hope you guys have enjoyed listening...</p>
</div>
<!--.card-body-->
</div>
<!--.card-->
</div>
<!--.col-xxx-x-->
<div class="col-md-3">
<div class="card">
<img src="https://www.gstatic.com/webp/gallery/1.jpg" alt="sample" class="card-img-top">
<div class="card-body">
<h3>Post title5</h3>
<p> Hello, This is ia test episode of Abbot and Costello hope you guys have enjoyed listening...</p>
</div>
<!--.card-body-->
</div>
<!--.card-->
</div>
<!--.col-xxx-x-->
<div class="col-md-3">
<div class="card">
<img src="https://www.gstatic.com/webp/gallery/1.jpg" alt="sample" class="card-img-top">
<div class="card-body">
<h3>Post title6</h3>
<p> Hello, This is ia test episode of Abbot and Costello hope you guys have enjoyed listening...</p>
</div>
<!--.card-body-->
</div>
<!--.card-->
</div>
<!--.col-xxx-x-->
</div>
<!--.packages_cards-->
</div>
<!--.group-of-cards-->
</div>
<!--.carousel-inner-->
</div>
<!--.carousel-->
</div>
<!--.packages_cards_inner_wrap-->
</div>
<!--.packages_list_body-->
</div>
</div>
<!--.row-->
See it in action ( https://jsfiddle.net/qt60whLf/ ).
Bootstrap 4 document ( https://getbootstrap.com/docs/4.0/components/carousel/ ).
Source