I'm trying to create this carousel in Angular with multiple items but on click on each item the tab should show in the full page width.

I've used owl-carousel from https://www.npmjs.com/package/ngx-owl-carousel-o It works well, the slider is working fine, the issue now is as the content is inside (refer image below) the item it takes up only that much width. To make it expandable on full width I need to take the content outside the slider and I require help in that as I am newbie in angular.

Issue:

Trying to achieve:

Temporary solution:

  toggleDisplay(divVal: string) {
console.log(divVal)
if(divVal == 'Weekly'){
  this.weeklyDiv = !this.weeklyDiv;
  this.cdhDiv = false;
  this.csLiteDiv = false;
  this.tsaLiteDiv = false;
  this.tsamDiv = false;
}
if(divVal == 'CDH'){
  this.cdhDiv = !this.cdhDiv;
  this.weeklyDiv = false;
  this.csLiteDiv = false;
  this.tsaLiteDiv = false;
  this.tsamDiv = false;
}
if(divVal == 'CS'){
  this.csLiteDiv = !this.csLiteDiv;
  this.cdhDiv = false;
  this.weeklyDiv = false;
  this.tsaLiteDiv = false;
  this.tsamDiv = false;
}
if(divVal == 'TSA'){
  this.tsaLiteDiv = !this.tsaLiteDiv;
  this.cdhDiv = false;
  this.csLiteDiv = false;
  this.weeklyDiv = false;
  this.tsamDiv = false;
}
if(divVal == 'TSAM'){
  this.tsamDiv = !this.tsamDiv;
  this.cdhDiv = false;
  this.csLiteDiv = false;
  this.tsaLiteDiv = false;
  this.weeklyDiv = false;
}

}

I understand its not good practice and can be refined, kindly help with a proper solution or If you know any such slider already in place please share it.

Thanks,