Image size issue in Owl Carousel

2 Views

I am working on a WordPress theme. Initially its bootstrap template has been created. Currently I have an issue in its slider for the testimonials section.

I am using Owl Carousel to create the slider. I have included the following shortcode inside the div in my index.php file:

Read More
<?php
    echo do_shortcode('[owl-carousel category="testimonial" singleItem="true" autoPlay="true"]');
?>

The slider includes a statement given by the client with the client’s image at the bottom in a circle. For the image, I have its CSS looking like: 

.img-circle {
  margin-top: 20px;
  height: auto;
  width: 100px;
 }

Though the width of the image has been specified but the image picks up the entire width of the div of which it is a part. I want to display only one client in one slide, so I have used singleItem="true" in the short-code. Have been unable to get the required image dimensions. How to contain the image to the required dimensions?

Post Views: 2

Related posts

1 comment

  1. You have to give the width and height attributes to the img markup. Also, it will need to be display: block in order to ignores owl-carousel’s 100% width.

    You could also include a wrapper around it, will work better.

    CSS

    .wrapper-circle {
    width: 100px;
    height: 100px;
}

    HTML

    <div class="wrapper-circle">
    <img src="" alt="">
</div>

    If you can`t edit HTML, try applying CSS to your img tag instead:

    display: block;
width: 50px;
height: auto;

    Check this for more details: http://owlgraphic.com/owlcarousel/demos/one.html

Comments are closed.