0

I'm learning Angular. I wanted to create a simple carousel so that I can show my sponsors on homepage. I came across many study materials that talks about bootstrap carousel. But I don't want that. I want to use ngx-owlcarousel-o. I followed exactly as mentioned in their documentation. And sorry, i thought pasting code here can be very confusing for all. To save everyone's time and effort I've created a stackblitz. My problem is that I'm not getting slide in the center. They're aligned to left no matter what css i apply. Please correct me.

This is my card-holder.component.html

<owl-carousel-o [options]="customOptions">
  <ng-template carouselSlide>Slide 1</ng-template>  
  <ng-template carouselSlide>Slide 2</ng-template>  
  <ng-template carouselSlide>Slide 3</ng-template>  
  <ng-template carouselSlide>Slide 4</ng-template>  
  <ng-template carouselSlide>Slide 5</ng-template>  
  <ng-template carouselSlide>Slide 6</ng-template>  
</owl-carousel-o>

And this is the css file: card-holder.component.css

owl-carousel-o {
  align-content: center;
  margin-left: 50px;
}

I tried taking help from:

  1. CSS Layout - Horizontal & Vertical Align
  2. angular ngx-bootstrap carousel not centered

I also tried wrapping everything inside a div and the tried:

  1. How to horizontally center a div?

But it is so stubborn. Not ready to move even by 1 pixel. Please help me.

Tanzeel
  • 4,174
  • 13
  • 57
  • 110

1 Answers1

1

I've edited your stackblitz https://stackblitz.com/edit/angular-qaen88 .

Your should add "center" property to your owl configuration and text-align:center to .owl-item

Oleg Shchegolev
  • 176
  • 1
  • 11