Topic: How to create 4 columns carousel

Nates premium asked 4 years ago


Hi I copied and pasted your carousel code and comes with 3 columns, I changed the md-4 to md-3 but then it shows the columns one below each other. What am I doing wrong?

Piotr Glejzer staff answered 4 years ago


Hi,
I have something for you.
Add new 'card' and change that code in every line what you want to have more columns without 'offset-2'.
Add 'offset-2' (if you want to center cards) only to first column.
If you want have more center colums change to 'offset-3' for 5 cards and etc.

//First column in slide

<div class="carousel-item active">
<div class=col-md-2 d-md-inline-block offset-2">
<div class="card mb-2">
<img class="card-img-top" src="" alt="Card image cap">
<div class="card-body">
<h4 class="card-title"> Card title</h4>
<p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary"> Button</a>
</div>
</div>
</div>

//Rest columns.

<div class=col-md-2 clearfix d-none d-md-inline-block ">
<div class="card mb-2">
<img class="card-img-top" src="" alt="Card image cap">
<div class="card-body">
<h4 class="card-title"> Card title</h4>
<p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary"> Button</a>
</div>
</div>
</div>

Is that resolve your problem?
Best,
Piotr


Nates premium commented 4 years ago

Thanks, sorry I have been so busy! I am going to use a normal grid rather as I saw it can do the off-screen horizontal thing that I wanted.

Piotr Glejzer staff commented 4 years ago

Hi, Do you have some trouble or do you need help with that? Is my solution work properly on your computer? Best, Piotr

Nates premium commented 4 years ago

No, I have not been coding for a while now once I do I can always log another ticket. this one can be closed for now. thanks again very much.

Nates premium answered 4 years ago


Start your code here
<!--Carousel Wrapper--> <div id="multi-item-example" class="carousel slide carousel-multi-item" data-ride="carousel"> <!--Controls--> <div class="controls-top"> <a class="btn-floating" href="#multi-item-example" data-slide="prev"><i class="fa fa-chevron-left"></i></a> <a class="btn-floating" href="#multi-item-example" data-slide="next"><i class="fa fa-chevron-right"></i></a> </div> <!--/.Controls--> <!--Indicators--> <ol class="carousel-indicators"> <li data-target="#multi-item-example" data-slide-to="0" class="active"></li> <li data-target="#multi-item-example" data-slide-to="1"></li> <li data-target="#multi-item-example" data-slide-to="2"></li> </ol> <!--/.Indicators--> <!--Slides--> <div class="carousel-inner" role="listbox"> <!--First slide--> <div class="carousel-item active"> <div class="col-md-4"> <div class="card mb-2"> <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary">Button</a> </div> </div> </div> <div class="col-md-4 clearfix d-none d-md-block"> <div class="card mb-2"> <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary">Button</a> </div> </div> </div> <div class="col-md-4 clearfix d-none d-md-block"> <div class="card mb-2"> <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary">Button</a> </div> </div> </div> </div> <!--/.First slide--> <!--Second slide--> <div class="carousel-item"> <div class="col-md-4"> <div class="card mb-2"> <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(60).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary">Button</a> </div> </div> </div> <div class="col-md-4 clearfix d-none d-md-block"> <div class="card mb-2"> <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(47).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary">Button</a> </div> </div> </div> <div class="col-md-4 clearfix d-none d-md-block"> <div class="card mb-2"> <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(48).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary">Button</a> </div> </div> </div> </div> <!--/.Second slide--> <!--Third slide--> <div class="carousel-item"> <div class="col-md-4"> <div class="card mb-2"> <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(53).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary">Button</a> </div> </div> </div> <div class="col-md-4 clearfix d-none d-md-block"> <div class="card mb-2"> <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(45).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary">Button</a> </div> </div> </div> <div class="col-md-4 clearfix d-none d-md-block"> <div class="card mb-2"> <img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(51).jpg" alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a class="btn btn-primary">Button</a> </div> </div> </div> </div> <!--/.Third slide--> </div> <!--/.Slides--> </div> <!--/.Carousel Wrapper-->

                    
                      

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

  • User: Premium
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags