Переполнение ионных слайдов - PullRequest
Новая
       6

Переполнение ионных слайдов

0 голосов
/ 14 февраля 2020

Я использую ионный слайд и трансформирую свое изображение при увеличении и уменьшении второго слайда, и оно переполняет мой основной слайд.

Вот мой основной слайд, а второй слайд переполнен:

enter image description here

HTML: 

<ion-content>
<ion-slides>
  <ion-slide class="slide-main">
    <ion-grid>
      <ion-row class="row-main">
        <img class="img-main" src="https://cdopromos.com/wp-content/uploads/2019/07/maxs-restaurant-chicken-all-you-can.jpg">
      </ion-row>
    </ion-grid>
  </ion-slide>
  <ion-slide class="slide-secondaruy">
    <ion-grid>
      <ion-row class="row-secondary">
        <img class="img-secondary" src="https://lh3.googleusercontent.com/proxy/iP2XG4WiD4Q2U18hRlCG9375ujydwARovLR8R6HrMLVp3iyH5pteC7RHOivfo3_njckHJyN21we1qmrbc7F3Bc2ao7UyCsMeMh6AGdt4v8loHSu51bHtOEC69e7HedDHrX3A9HRnKDg">
      </ion-row>
    </ion-grid>
  </ion-slide>
</ion-slides>
</ion-content>

CSS: 

.row-main{
  height: 100vh;
  width: 100vw;
}

*{
  padding: 0;
}
.img-secondary{
  height: 100vh;
  transform: scale(1);
    animation: zoominout 30s infinite ;

}

.img-main{

}
.row-secondary{
  z-index: -1;
}
.swiper-slide{
  z-index: -1;

}

@keyframes zoominout {
  0% {
      transform: scale(1,1);
  }
  50% {
      transform: scale(1.2,1.2);
  }
  100% {
      transform: scale(1,1);
  }
}

.slide-main{
  z-index: 99;
}

Я использовал z-index и overflow- x: скрыто, но ничего не произошло

1 Ответ

0 голосов
/ 14 февраля 2020

Я не уверен, что использование <ion-grid> необходимо, но если вы структурируете свой шаблонный код, как это, давайте используем макет по умолчанию в <ion-slide>, структурируем ваш контент.

html

<ion-content>
  <ion-slides>
    <ion-slide class="slide-main">
      <img class="img-main" src="https://cdopromos.com/wp-content/uploads/2019/07/maxs-restaurant-chicken-all-you-can.jpg">
    </ion-slide>
    <ion-slide class="slide-secondary">
      <img class="img-secondary" src="https://images.pexels.com/photos/2397361/pexels-photo-2397361.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500">
    </ion-slide>
  </ion-slides>
</ion-content>

В вашем scss компоненте go впереди и скажите <ion-slide>, чтобы скрыть что-либо за пределами его содержащей границы. 

/**
Add this to your scss
 */
ion-slide {
  overflow-x: hidden!important; // or overflow: hidden or overflow-y: hidden
}
/**
Add this to your scss
 */

.row-main{
  height: 100vh;
  width: 100vw;
}

*{
  padding: 0;
}
.img-secondary{
  height: 100vh;
  transform: scale(1);
  animation: zoominout 30s infinite ;

}

.img-main{

}
.row-secondary{
  z-index: -1;
}
.swiper-slide{
  z-index: -1;

}

@keyframes zoominout {
  0% {
    transform: scale(1,1);
  }
  50% {
    transform: scale(1.2,1.2);
  }
  100% {
    transform: scale(1,1);
  }
}

.slide-main{
  z-index: 99;
}

Конечный результат выглядит как это .

...