CODEWITHSUNDEEP
angularjs
Delete me
Delete me

Reputation: 597

Angular Carousel around div with functionality

I'm looking for a Angular Carousel there is working with Bootstrap divs

I want it to shift between Divs, and I get the next div in center when clicking next or previous.

Bootstrap exsampel til wrap with carousel:

<div class="row">
<!-- Carousel start -->
<div class="col-md-1 col-sm-6">
    <div class="box box-lg br-black animated">
        <div class="box-content box-default">
        Functionality 1
        </div>
    </div>
</div>
<div class="col-md-8 col-sm-6">
    <div class="box box-lg br-black animated">
        <div class="box-content box-default">
        Functionality 2
        </div>
    </div>
</div>
<div class="col-md-1 col-sm-6">
    <div class="box box-lg br-black animated">
        <div class="box-content box-default">
        Functionality 3
        </div>
    </div>
</div>
<!-- Carousel end --></div>

What possibilities do I have?

Upvotes: 0

Views: 2030

Answers (1)

Iran Reyes
Iran Reyes

Reputation: 523

your question is a little confused to me. I understood your question but the code show something different. I will try to answer you the question with several alternatives. If you could be more specific with your problem I will help you quickly.

First, there are several carousel for AngularJS. There are single libraries that creates carousel, and others like ui-bootstrap(angular-ui) and AngularStrap that fit much better with Twitter Bootstrap. If you want to use AngularJS with TB, I recommend you ui-bootstrap. I have worked several times with the library and never let me down.

So, creating the carousel with ui-bootstrap we have several alternatives. First, to place the content of your divs in the center you have not use the grid system obligatory. You can use a single row and center the elements with text-align, margin:0 auto, flex model or others techniques. In this case check the next plunk:

http://plnkr.co/edit/XmzaJx5mXddLQ4S1k7BV

If you want to create each div with columns of the grid system, like your code shown, you have to shift the columns with .col-md-offset-x, leaving the same space at the sides. Check the plunk.

http://plnkr.co/edit/ihpwrWC0p64eO1jiddl2

I hope that my answer help you at least a little, If your question is another please, let me know.

Upvotes: 1

Related Questions