Owl2 слайдер под vue (2 строки)

Нужно сделать 2 строки. Получилось сделать, посредством grid-а.

Вёрстка:

<template>
  <actionslider
 :nav='false'
 :dots='false'
 :autoplay='false'
 :items='1'
 :mouseDrag='true'
 :autoplayHoverPause='true'
 :stagePadding='0'
 :margin='10'>
 <a v-for='(item, index) in items' :key='index' href='' 
  class='action__slider__wrapper'>
  <img :src='item.logo' class='' />
  <div class='action__slider__wrapper__text'>
    <span class='action__slider__wrapper__title'>{{ item.name }}</span>
    <span class='action__slider__wrapper__number'>{{ item.code }}<span 
   class='action__slider__wrapper__arrow'></span></span>
   </div>
 </a>
 </actionslider>
</template>

CSS:

.owl-stage {
  display: grid;
  grid-template-columns: repeat(7, 392px);
  grid-template-rows: 160px 160px;
  align-items: center;
  gap: 24px 0;
}

введите сюда описание изображения

Как видно, справа показывается следующий слайдер. Как убрать данный эффект? Если в grid-template-columns: repeat(7, 392px); ставить 1fr - становится еще хуже


Ответы (0 шт):