web-dev-qa-db-fra.com

Ionic 2 - Slider - affiche une partie de la deuxième diapositive

Je veux montrer une partie du deuxième élément de la diapositive, mais je ne sais pas comment le faire. C'est ce que j'ai jusqu'à présent (diapositives ioniques de base):

<ion-slides pager >
            <ion-slide>
              <h2>Slide 1</h2>
            </ion-slide>

            <ion-slide>
              <h2>Slide 2</h2>
            </ion-slide>

            <ion-slide>
              <h2>Slide 3</h2>
            </ion-slide>
</ion-slides>

et voici comment je veux que ce soit:  enter image description here

J'ai essayé de modifier la largeur de la diapositive ionique à moins de 100%, mais les deuxième et troisième diapositives sont simplement déplacées plus à gauche, en dehors de l'écran.

Quelqu'un peut-il m'aider ?

angularionic-frameworkionic2ion-slide-box
8
Christer

Je pense que vous avez compris. Cette solution pour les autres qui sont toujours à la recherche de cette vue. Ajoutez simplement ceci dans la balise ion-slides.

slidesPerView="1.5" spaceBetween="10"
18
Ajoy Karmakar

Dans l'UX, il est préférable que l'utilisateur sache s'il a plus d'éléments à voir, en particulier lorsque nous n'avons pas l'intention d'utiliser un pageur.

ion-slides utiliser en interne http://www.idangero.us/swiper/ / cela peut nous aider à accomplir cela.

Nous pouvons utiliser slidesPerView="2" spaceBetween="250"

Vous devez affiner la valeur spaceBetween en fonction de la taille de la diapositive de votre article.

Enfin, vous avez besoin d'un ion-slide vide à la fin, car spaceBetween gâchera un peu le positionnement.

.card {
    width: 300px;
}

<ion-slides slidesPerView="2" spaceBetween="250">
    <ion-slide *ngFor="let foo of bars">
        <my-item class="card"></my-item>
    </ion-slide>
    <ion-slide>
        <!-- need a empty slide to avoid last item to be inaccessible -->
    </ion-slide>
</ion-slides>
6
Diego Cubissimo

Après avoir lutté contre ce problème, j'ai trouvé une solution assez simple qui semble fonctionner.

<ion-slides spaceBetween="-18">

Évidemment, ajustez le nombre en fonction de vos besoins spécifiques.

4
user4650164

J'ai la solution,

    <ion-slides pager="false" slidesPerView="1.2" spaceBetween="10" centeredSlides=true loop=true>

  <ion-slide>
    <h1 class="card">1</h1>
  </ion-slide>

  <ion-slide>
    <h1 class="card">2</h1>
  </ion-slide>

  <ion-slide>
    <h1 class="card">3</h1>
  </ion-slide>

</ion-slides>
2
Upendra

J'ai obtenu de bons résultats en réglant la diapositiveView sur «auto» et en attribuant à chaque diapositive une marge droite de -18px et une marge gauche de 18px ensemble).

Voici le code du template:

 <ion-slides [slidesPerView]="'auto'">
     <ion-slide *ngFor="...">
         ...
     </ion-slide>
 </ion-slides>

Et voici le css:

  ion-slide {
    width: 240px !important;
    height: 290px !important;

    margin-right: -18px;
    margin-left: 18px
  }

  ion-slide:first-child {
    margin-left: 0;
  }

  ion-slide:last-child {
    margin-right: 0;
  }
2
David Bulté

J'ai réussi à obtenir cette vue, dans ionic3. C'est un morceau de gâteau. Tout ce dont vous avez besoin est de définir slidesPerView= "auto" puis dans votre sass 

ion-slide {
        width:80% !important;
        margin-top: 0px;}

see the view

0
Mahmoud Fathy

À partir de Ionic 3, vous pouvez utiliser slidesPerView="2.5" spaceBetween="10" dans la balise ion-slides, la variable slidesPerView peut avoir toutes les valeurs décimales avec un chiffre à une décimale. Ajuste en accord.

0
Himalaya Ahuja