Search code examples
htmlbootstrap-4carousel

How do I get my Bootstrap carousel to cycle through all cards 3 at a time?

I have a Bootstrap carousel on my web page, but the carousel will only display one card at a time. I need it to display 3 cards at a time. Also, for some reason the arrows are not displaying correctly either. I tried using alternative icons as well. I can find them and click on them with my mouse, but visually they don't display. My main concern for this question is the card display. Any additional insight for the arrows would just be a bonus.

Code for my carousel:

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-1">
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <i style="font-size: 60px" class="fas fa-arrow-alt-circle-left"></i>
                <span class="sr-only">Previous</span>
            </a>
        </div>
        <div class="col-sm-10">
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                {% for project in projects %}
                <div class="carousel-item {% if forloop.counter == 1 %}active{% endif %}" id="slide{{ forloop.counter }}">
                    <div class="col-md-3 d-flex">
                        <div class="shadow card mb-2">
                            <img class="card-img-top" src="{% static project.image %}">
                            <div class="card-body">
                                <h5 class="card-title">{{ project.title }}</h5>
                                <p class="card-text">{{ project.description | slice:":100"}}...</p>
                            </div>
                            <div class="card-body">
                                <a href="{% url 'project_detail' project.pk %}"
                                    class="btn btn-primary">
                                    Read More
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    <div class="col-sm-1">
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

What it looks like in browser:

carousel only displays one card at a time

Solution

  • You can use the owl carousel for your card. You can insert your card (HTML)and configure the number the items you need to display according to your requirement in the JS file. The owl carousel is responsive and compatible with various browsers as well.

    The link for the JS fiddle is as follows. https://jsfiddle.net/hilalrehan/2x5jrewp/25/

    HTML

    <!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<link href ="https://cdn.boomcdn.com/libs/owl-carousel/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" type="text/css">


 <div class="container ">
            <div class="row">
                <div class="col-12">
                    <div class="owl-carousel ">
                    <div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img class="card-img-bottom" src="..." alt="Card image cap">
</div>

                      <div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
                                       <div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>      
                                        <div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div> 
                      
                        
                    </div>
                </div>
            </div>
        </div>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0=" crossorigin="anonymous"></script>
 <div class="container ">
            <div class="row">
                <div class="col-12">
                    <div class="owl-carousel ">
                    <div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img class="card-img-bottom" src="..." alt="Card image cap">
</div>

                      <div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
                                       <div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>      
                                        <div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div> 
                      
                        
                    </div>
                </div>
            </div>
        </div>

    You can use margin and items to configure the display according to your requirement. In this example, one item is shown in the range of 0px to 768px resolution. You can change the number of items display according to your requirement.

    JS

     $(".owl-carousel").owlCarousel({
    responsiveClass: true,
    dots: true,
    dotsContainer: false,
       loop: true,
       autoWidth: true,
      autoplay:true,
      nav:true,
      smartSpeed:1000,
      items:3,
      responsive: {
    0: {
      items:1,
      margin: 150,
      center: true
    
    },
    
    768: {
        items:3,
              margin:200,
         center: false
            },   
    
    992: {
        items:3,
    margin: 35,
        center: true
    },
    
    1200: {
          items:3,
        margin:250,
         center: true
    },
    
  },
  });

    Add following CSS

    .owl-nav {
    text-align: center;
        }

    If you need any further help regarding the documentation of the owl carousel, please refer to the following documentation.

    https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html