2017-08-27 2 views
2

Je développe actuellement une application mobile en utilisant swiper.js (this one, car il semble y avoir plusieurs bibliothèques de ce nom). J'essaie de comprendre comment le configurer de sorte que pour l'une de ses diapositives, il ne fait que défiler l'écran d'une demi-largeur. Il y a un demo qui fait similaires à ce que je veux, ce qui me suggère que cela devrait être possible, mais je n'arrive pas à comprendre comment le faire fonctionner.en utilisant swiper (ou une bibliothèque similaire) pour faire défiler une demi-largeur d'écran

Pour vous donner des détails plus précis, ce que je veux est d'avoir une mise en page qui ressemble à ceci:

+----+ +-----------+ +-----------+ 
| | | +---+---+ | |   | 
| | | | | | | |   | 
| A | | | B | C | | |  D  | 
| | | | | | | |   | 
| | | +---+---+ | |   | 
+----+ +-----------+ +-----------+ 

et je veux être en mesure d'utiliser les mouvements de glissement de telle sorte que la fenêtre peut être positionné dans une des façons suivantes:

+-------------+ 
|+----+ +-----+-----+ +-----------+ 
|| | | +---+---+ | |   | 
|| | | | | | | |   | 
|| A | | | B | C | | |  D  | 
|| | | | | | | |   | 
|| | | +---+---+ | |   | 
|+----+ +-----+-----+ +-----------+ 
+-------------+ 

     +-------------+ 
+----+|+-----+-----+|+-----------+ 
| ||| +---+---+ |||   | 
| ||| | | | |||   | 
| A ||| | B | C | |||  D  | 
| ||| | | | |||   | 
| ||| +---+---+ |||   | 
+----+|+-----+-----+|+-----------+ 
     +-------------+ 

        +-------------+ 
+----+ +-----+-----+|+-----------+| 
| | | +---+---+ |||   || 
| | | | | | |||   || 
| A | | | B | C | |||  D  || 
| | | | | | |||   || 
| | | +---+---+ |||   || 
+----+ +-----+-----+|+-----------+| 
        +-------------+ 

j'ai réussi à obtenir les deux premières configurations de vue travail droite en changeant les paramètres de style pour supprimer la width: 100% de la classe swiper-slide et en utilisant la configuration de Setti slidesPerView: "auto" ng, mais en glissant directement à partir de la deuxième vue quitte l'écran affichant C et la moitié de D, et vous ne pourriez pas glisser plus loin de sorte que vous ne pourriez pas obtenir tout D en vue.

Comment puis-je faire fonctionner cela? Je ne suis pas opposé à changer de bibliothèque si c'est absolument nécessaire.

+0

Ajoutez un exemple de base (jsfiddle/snippet) avec lequel d'autres personnes peuvent jouer ... personne ne le construira pour vous, mais avec une structure de base, il sera beaucoup plus facile de trouver le problème et de suggérer une solution. – Dekel

+0

@Dekel - Je travaille sur un, mais ça prend un peu de temps pour extraire les morceaux pertinents d'une application plutôt grande ... – Jules

+0

Je suis sûr que ça peut prendre du temps. La prochaine fois que je vous suggère d'ouvrir la question une fois que vous avez tout ce dont vous avez besoin :) Exactement le même que vous avez pris le temps de créer les échantillons ASCII, un extrait est à peu près une exigence dans ce cas :) – Dekel

Répondre

0

Il se trouve que la réponse était à peu près exactement ce que je initialement attendais à travailler:

var swiper = new Swiper ('.swiper-container', { 
 
    slidesPerView: "auto" 
 
    }); 
 
.swiper-container { 
 
    width: 300px; 
 
    height: 400px; 
 
} 
 
.swiper-slide { 
 
    height: 400px; 
 
    border: 1px solid red; 
 
} 
 

 
.swiper-slide > div { 
 
    height: 100%; 
 
    border: 1px solid blue; 
 
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script> 
 

 
<!-- Slider main container --> 
 
<div class="swiper-container"> 
 
    <!-- Additional required wrapper --> 
 
    <div class="swiper-wrapper"> 
 
     <!-- Slides --> 
 
     <div class="swiper-slide" style="width:150px">A</div> 
 
     <div class="swiper-slide" style="display:flex; flex-flow: row nowrap"> 
 
      <div style="flex-grow: 1">B</div><div style="flex-grow: 1">C</div> 
 
     </div> 
 
     <div class="swiper-slide">D</div> 
 
    </div> 
 
</div>

La seule raison pour laquelle je ne ai pas obtenir ce travail immédiatement parce que j'utilisais un wrapper pour que la bibliothèque l'intègre avec React, et cela créait une div supplémentaire qui signifiait que mes paramètres ne remplaçaient pas correctement la largeur par défaut.