CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Jerielle
Jerielle

Reputation: 7520

Align vertical and horizontally an image in Owl Carousel arrow slider

I have an owl carousel setup in my page and I made a custom arrow beside my slider so it looks like this:

enter image description here

What I want is to align vertically middle the arrows beside and the left arrow should be align left and the right arrow is align right. I want to do it responsively but I dont know how. Can you help me?

Here's my code:

<div class="container-fluid">
    <div class="col-sm-1" style="border: 1px solid #ccc">
        <div class="owl-carousel-arrows">
            <div class="prev">
                <img src="<?php echo HTTP_HOME_IMAGE; ?>arrow-green-left.png" class="img-responsive" />
            </div>
        </div>
    </div>
    <div class="col-sm-10">
        <div class="owl-carousel">
            <div class="item"><img src="<?php echo HTTP_HOME_IMAGE; ?>plant1.jpg"></div>
            <div class="item"><img src="<?php echo HTTP_HOME_IMAGE; ?>plant2.jpg"></div>
            <div class="item"><img src="<?php echo HTTP_HOME_IMAGE; ?>plant3.jpg"></div>
            <div class="item"><img src="<?php echo HTTP_HOME_IMAGE; ?>plant4.jpg"></div>
            <div class="item"><img src="<?php echo HTTP_HOME_IMAGE; ?>plant5.jpg"></div>
            <div class="item"><img src="<?php echo HTTP_HOME_IMAGE; ?>plant6.jpg"></div>
            <div class="item"><img src="<?php echo HTTP_HOME_IMAGE; ?>plant7.jpg"></div>
        </div>
    </div>
    <div class="col-sm-1" style="border: 1px solid #ccc">
        <div class="owl-carousel-arrows">
            <div class="next">
                <img src="<?php echo HTTP_HOME_IMAGE; ?>arrow-green-right.png" class="img-responsive" />
            </div>
        </div>
    </div>
</div>

Can you give me some idea how can I do this?

Upvotes: 0

Views: 1092

Answers (1)

Thiago Lima
Thiago Lima

Reputation: 46

.owl-carousel-arrows{
    height: 100%;
}

.owl-carousel-arrows > div {
    margin-top: 45%;
}

Upvotes: 1

Related Questions