Voici l'essentiel du Carousel de mon code.
<Carousel arrows={true}>
<div className='new-offers-item'>
<div className='new-offers-item-bg'>
<div className='new-offers-item-rent-tag'>TEXT HERE</div>
<div className='new-offers-item-favourite' />
<div className='new-offers-posted-at'>ANOTHER TEXT HERE, 10:44</div>
</div>
<div className='new-offers-item-location-rate'>
<div className='new-offers-item-location'>street address, 5<br />CC Espiral,<br /> 1 floor</div>
<div className='new-offers-item-rate'>
<div>
<span className='new-offers-item-rate-value'>240 000 </span>
<span className='new-offers-item-rate-unit'>abcd.</span>
</div>
</div>
</div>
<div className='new-offers-item-city-street'>
<span>City</span>
<span> </span>
<span>Address1</span>
</div>
<div className='new-offers-item-description'>
<div className='new-offers-item-description-row'>
<div className='new-offers-item-description-row-space'>
<div className='new-offers-item-description-row-space-division'>
<div>
<img src={sqM} />
</div>
<p>
<span>Total</span>
<span>600</span>
</p>
<p>
<span> </span>
<span className='span-divider'>/</span>
</p>
<p>
<span>Sale</span>
<span>300</span>
</p>
</div>
<div className='new-offers-item-description-row-metre-rate'>
<p>
<span>Per meter</span>
</p>
<p>
<span>6 700 </span>
<span>unit<sup>2</sup></span>
</p>
</div>
</div>
<div className='new-offers-item-description-row'>
<div className='new-offers-item-description-row-space'>
<div className='new-offers-item-description-row-space-division'>
<div className='new-offers-item-description-second'>
<img src={bldgIcon} />
<span className='item-type'>Торговый центр</span>
</div>
</div>
<div className='new-offers-item-description-row-metre-rate'>
<div className='new-offers-item-description-second'>
<img src={doorsIcon} />
<span className='item-type'>10 floor</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className='new-offers-item'>
<div className='new-offers-item-bg'>
<div className='new-offers-item-rent-tag'>TEXT HERE</div>
<div className='new-offers-item-favourite' />
<div className='new-offers-posted-at'>ANOTHER TEXT HERE, 10:44</div>
</div>
<div className='new-offers-item-location-rate'>
<div className='new-offers-item-location'>street address, 5<br />CC Espiral,<br /> 1 floor</div>
<div className='new-offers-item-rate'>
<div>
<span className='new-offers-item-rate-value'>240 000 </span>
<span className='new-offers-item-rate-unit'>abcd.</span>
</div>
</div>
</div>
<div className='new-offers-item-city-street'>
<span>City</span>
<span> </span>
<span>Address1</span>
</div>
<div className='new-offers-item-description'>
<div className='new-offers-item-description-row'>
<div className='new-offers-item-description-row-space'>
<div className='new-offers-item-description-row-space-division'>
<div>
<img src={sqM} />
</div>
<p>
<span>Total</span>
<span>600</span>
</p>
<p>
<span> </span>
<span className='span-divider'>/</span>
</p>
<p>
<span>Sale</span>
<span>300</span>
</p>
</div>
<div className='new-offers-item-description-row-metre-rate'>
<p>
<span>Per meter</span>
</p>
<p>
<span>6 700 </span>
<span>unit<sup>2</sup></span>
</p>
</div>
</div>
<div className='new-offers-item-description-row'>
<div className='new-offers-item-description-row-space'>
<div className='new-offers-item-description-row-space-division'>
<div className='new-offers-item-description-second'>
<img src={bldgIcon} />
<span className='item-type'>Торговый центр</span>
</div>
</div>
<div className='new-offers-item-description-row-metre-rate'>
<div className='new-offers-item-description-second'>
<img src={doorsIcon} />
<span className='item-type'>7 floor</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</Carousel>
Seul le premier div.new-offers-item est affiché.
Comment puis-je afficher le second et les autres?
3 Réponses :
C'est comme prévu. Cela montre le premier élément comme actuel et pour passer à l'élément suivant, vous pouvez cliquer sur la navigation. Vous pouvez définir l'arrière-plan de l'élément new-offer-item pour voir la navigation. Vous pouvez vous référer à l'exemple ici:
Merci. Comment configurer le Carousel pour afficher 3 .new-offers-item avant de passer au 3 suivant? Emballer le 3 .new-offers-item à celui contenant div est le seul moyen?
Je pense que oui et vous devez ajouter du CSS pour que vos 3 éléments restent alignés
J'ai ajouté display: flex seulement maintenant les flèches Slick Carousel ont disparu. Pas transparent, je ne les trouve pas dans la mise en page html.
Je suppose que c'est comme prévu puisque vous n'avez qu'un "gros" article. Que veux-tu accomplir? peut-être cherchez-vous à afficher plusieurs éléments à la fois?
Lier à CodeSandbox est bien, mais vous devriez vraiment inclure les parties les plus pertinentes de la solution dans votre réponse.
Je viens de fournir un exemple pour expliquer le fonctionnement du carrousel. Et il semble qu'El veuille faire quelque chose de plus. Btw j'ai mis à jour pour refléter ce que je voulais dire avec la question la plus récente
Je voulais un carrousel d'un look de . Voudrait également masquer les flèches lorsque le premier / dernier élément est le premier / dernier de l'affichage actuel. Est-ce réalisable avec AntD?
@duc mai Pourriez-vous commenter ce que vous avez fait sur Codesandbox s'il vous plaît? Avez-vous enveloppé 2 div dans le Carousel dans un div d'emballage ou y avait-il plus que cela? Je ne pouvais pas voir les flèches sur l'exemple Codesandbox.
ce que j'ai fait était - envelopper deux divs en un - affichage: flex important pour le wrapper - flexbasis: 50% pour les enfants, il semble que vous ayez trouvé ce dont vous avez besoin vous-même :)
C'est l'âme qui a produit le résultat souhaité. Ajouté 2 de plus
.new-offers-item.
const carouselSettings = {
arrows: true,
slidesToShow: 3,
slidesToScroll: 1
};
Ensuite, ajoutez le const carouselSettings au composant Carousel :
.
Basé sur la documentation react-slick et aire de jeux sur https://github.com/akiran/react-slick . p >
AntD Carousel ne place pas les flèches sur la mise en page html lorsque le nombre d'éléments à l'intérieur du carrousel est égal à slidesToShow . Les flèches qui sont des boutons sont transparentes par défaut, vous devez mettre une image de flèche à l'intérieur des boutons . Les classes css pour les boutons sont .ant-carousel .slick-prev et .ant-carousel .slick-next .
Nous discutons de la bibliothèque de carrousel Antd, pas de slick slider bro.
Depuis antd utilisant slick slider pour leur carrousel, vous devriez vous référer à leur API Pour être plus précis, vous devrez utiliser prop: "slidesToShow" afin d'afficher le nombre de diapositives dont vous avez besoin.
Par exemple:
const settings = {
dots: true,
slidesToShow: 3,
slidesToScroll: 1
};