import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";
function App() {
return (
<Carousel showArrows={true}>
<div>
<img src="../assets/1.jpeg" alt="image1" />
<p className="legend">Legend 1</p>
</div>
<div>
<img src="../assets/2.jpeg" alt="image2" />
<p className="legend">Legend 2</p>
</div>
<div>
<img src="../assets/3.jpeg" alt="image3" />
<p className="legend">Legend 3</p>
</div>
</Carousel>
);
}
export default App;
i added the css file in App component similar like react-responsive-carousel but it is not working
carousel.min.css
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";
It should be working but not sure why this is happening
I don't know about this library, But I can see you are not doing something complicated with your carousel. So basically why don't you create one for yourself?
I have a base code that could help you in this matter.
I create a carousel with React and Static UI(HTML, CSS, JS).
I think it can actually help you out.
replit, codesandbox, Stackblitz
these versions are written with html css js and nothing else.
replit, codesandbox, Stackblitz
In your scenario I will do this:
const modalSlidesContainer = document.querySelector(".modal-slides-container");
const modalWidth = 300;
let modalPage = 0;
const nextPage = () => {
modalPage++;
modalSlidesContainer.style.margin = `0px 0px 0px -${modalWidth * modalPage}px`;
};
const previousPage = () => {
modalPage--;
modalSlidesContainer.style.margin = `0px 0px 0px -${modalWidth * modalPage}px`;
};
/* you set root to define varibales */
:root {
--modal-width: 300px;
--modal-height: 400px;
--number-of-pages: 5;
}
html body{
margin: 0px;
}
.modal-background{
background-color: rgba(0,0,0,0.4);
position: absolute;
top: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
z-index: 0;
}
.modal-boundary{
width: var(--modal-width); /* the width boundary must be as same as every modal slide*/
height: var(--modal-height);
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
overflow-x: hidden;
z-index: 10;
/* the max width must be as same as the width of modal ModalBoundary*/
#media screen and (max-width: var(--modal-width)) {
width: 100vw;
height: 100vh;
}
}
/* This container contains every slide you gonna use in your modal */
.modal-slides-container{
min-width: calc(var(--modal-width) * var(--number-of-pages)); /* The width must be total width of all the slide you gonna use */
height: var(--modal-height);
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
background-color: white !important;
/*here is how to control carousel movement*/
margin: 0px; /*this how we control the place of the modal*/
transition: margin 1s; /*this how you control the animation of carousel when it's changing steps */
}
.modal-slide{
width: var(--modal-width);
height: var(--modal-height); /* in this scenario the total height of slide must be as same as modal height*/
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: white !important;
}
.button-container{
width: 100%;
margin-top: 10px;
display: flex;
flex-direction: row;
}
.navigation-button{
margin: auto;
}
<body>
<div class="modal-background">
<div class="modal-boundary">
<div class="modal-slides-container">
<div class="modal-slide">
<img alt="first image" src="https://picsum.photos/200/200" />
<p> Legend One </p>
<div class="button-container">
<button onclick="nextPage()" class="navigation-button">
next
</button>
</div>
</div>
<div class="modal-slide">
<img alt="second image" src="https://picsum.photos/200/200" />
<p> Legend Two </p>
<div class="button-container">
<button onclick="previousPage()" class="navigation-button">
previous
</button>
<button onclick="nextPage()" class="navigation-button">
next
</button>
</div>
</div>
<div class="modal-slide">
<img alt="third image" src="https://picsum.photos/200/200" />
<p> Legend Three </p>
<div class="button-container">
<button onclick="previousPage()" class="navigation-button">
previous
</button>
<button onclick="nextPage()" class="navigation-button">
next
</button>
</div>
</div>
<div class="modal-slide">
<img alt="fourth image" src="https://picsum.photos/200/200" />
<p> Legend Four </p>
<div class="button-container">
<button onclick="previousPage()" class="navigation-button">
previous
</button>
<button onclick="nextPage()" class="navigation-button">
next
</button>
</div>
</div>
<div class="modal-slide">
<img alt="fifth image" src="https://picsum.photos/200/200" />
<p> Legend five </p>
<div class="button-container">
<button onclick="previousPage()" class="navigation-button">
previous
</button>
</div>
</div>
</div>
</div>
</div>
</body>
I hope this helps you.^-^
Related
My nav bar is showing up overlapped with bullet points and 'HiOutlineMenuAlt4' icon is not appearing either. I am not sure what to do, I can't identify where the issue actually lies? Is it in the css?
Navbar.js
import React from 'react'
import {BiSearch} from 'react-icons/bi'
import {BsPerson} from 'react-icons/bs'
import {HiOutlineMenuAlt4} from 'react-icons/hi'
import './NavbarStyles.css'
function Navbar() {
return (
<div className='navbar'>
<div className='logo'>
<h2>BEACHES. </h2>
</div>
<ul className='nav-menu'>
<li>Home</li>
<li>Destinations</li>
<li>Travel</li>
<li>Book</li>
<li>Views</li>
</ul>
<div className='nav-icons'>
<BiSearch className='icon'/>
<BsPerson className='icon'/>
</div>
<div className='hamburger'>
< className='icon' />
</div>
</div>
)
}
export default Navbar
NavbarStyles.css
.navbar{
width: 100%;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 1rem;
z-index: 2;
}
.nav-menu {
display: flex;
}
.hamburger{
display: none;
padding: 1rem;
}
No problems are listed so hard to decipher what to do next
Hi #Steph G,
About your icons HiOutlineMenuAlt4.
You are not using the imported HiOutlineMenuAlt4 icon in the hamburger div
<div className='hamburger'>
<HiOutlineMenuAlt4 className='icon' />
</div>
And about your CSS, that code is enough.
.navbar {
display: flex;
justify-content: center;
align-items: center;
}
How do I make background color of "-" bullet expand when I active the content.
Image 1 is what I want to do while Image 2 is what I do...
Want to be like tis
[1]
(https://i.stack.imgur.com/5NDOX.png)
My Demo
[2]
(https://i.stack.imgur.com/0ztPK.png)
My Js Code
`
const [isActive, setIsActive] = useState(false);
<div className="support">
<div className='containerFour'>
<h1>FAQ</h1>
<h1>Tell us what you're searching for</h1>
<div className="accordion">
<div className="accordionItem">
<div className="accordionTitle" onClick={() => setIsActive(!isActive)}>
<h1 className='accordionH'>What payment methods are available to complete your purchase?</h1>
<div className='accordionBullet'>{isActive ? <img src={Close} /> : <img src={Open}/>}</div>
</div>
{isActive && <div className="accordionContent">Test</div>}
</div>
</div>
</div>
</div>
`
My Css
.support .accordion {
width: 811px;
margin-left: auto;
margin-right: auto;
}
.support .accordionItem {
margin-bottom: 1.5rem;
}
.support .accordionBullet{
background-color: #205696;;
padding-top: 1rem;
}
.support .accordionTitle {
display: flex;
flex-direction: row;
justify-content: space-between;
cursor: pointer;
background-color: #D9D9D9;;
}
.support .accordionH{
font-family: 'Urbanist';
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 29px;
color: #000000;
}
.support .accordionTitle:hover {
background-color: #D9D9D9;;
}
.support .accordionContent {
background-color: #D9D9D9;
}
Currently, the accordionBullet is inside the accordionTitle. Its maximum height = height of the h1 heading only.
Put accordionBullet beside accordionItem so that it can expand with its height.
<div className="accordion">
<div className="accordionItem">
... (Title + Content) ...
</div>
<div className="accordionBullet">
...
</div>
</div>
.accordion {
display: flex;
}
I'm trying to do an about page and i need 3 sets of elements inside a vertical slider, so i picked swiperjs. Without the carousel, they were working just fine as far as the grid goes, but now the columns are extremely tall and the elements aren't in their correct rows. Here's how it looks on the jsx
<container className = {styles.sobreGeral}>
<div className={styles.parent}>
<Swiper
direction={"vertical"}
pagination={{clickable: true,}}
modules={[Pagination]}
>
<SwiperSlide>
<div className={styles.div1}>
<img src="sobre.jpg" alt="alt" className={styles.imagem} />
</div>
<div className={styles.div2}>
<img src="logo-sobre.jpg" alt="logo" className={styles.imagem} />
</div>
<div className={styles.div3}>
<p>text</p>
</div>
</SwiperSlide>
<SwiperSlide>
<div className={styles.div1}>
<img src="sobre-rita.jpg" alt="pic" className={styles.imagem} />
</div>
<div className={styles.div2}>
<h2>Rita </h2>
</div>
<div className={styles.div3}>
<p>text</p>
</div>
</SwiperSlide>
<SwiperSlide>
<div className={styles.div1}>
<img src="sobre-jose.jpg" alt="pic" className={styles.imagem} />
</div>
<div className={styles.div2}>
<h2>Jose </h2>
</div>
<div className={styles.div3}>
<p>text</p>
</div>
</SwiperSlide>
</Swiper>
</div>
</container>
}
and here's how the css is setup
.sobreGeral{
display: flex;
margin-top: 150px;
}
.contato{
display: flex;
justify-content: center;
}
.parent {
display: grid;
grid-template-columns: repeat(9, 1fr);
width: 100%;
grid-template-rows: repeat(8, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.div1 {
grid-area: 2 / 3 / 6 / 6;
max-width: fit-content;
padding-left: 10%;
}
.div2 {
grid-area: 2 / 6 / 4 / 11;
max-width: fit-content;
}
.div3 {
grid-area: 4 / 6 / 6 / 8;
}
without the swiper, things were in their proper places, but as it is it's not working
I have two divs that are next to each other: artwork__feed and preview
When I map through my db, the images render horizontally and overflow into the preview div.
See here:
Question
How do I render all of my FeedCard components vertically so they don't overflow into my preview div?
Here is my render code:
return (
<div className="feed">
<div className="artwork__feed">
{artworks.map((artwork) => (
<FeedCard
imageUrl={artwork.imageUrl}
title={artwork.title}
artist={artwork.artist}
year={artwork.year}
/>
))}
</div>
<div className="preview">
<div className="phone"></div>
</div>
</div>
);
}
Here is my FeedCard code:
function FeedCard({
imageUrl,
title,
artist,
year,
medium,
height,
width,
category,
}) {
return (
<div className="feed__card">
<div className="feed__card__container">
<div className="feed__category">
<img src={imageUrl} className="artwork__image__feed" />
</div>
<div className="artwork__info">
<div className="artwork__title__artist">
<h1>{title}</h1>
<p>{artist}</p>
</div>
<div className="artwork__bid_button">
<button>Bid</button>
</div>
</div>
</div>
</div>
);
}
And here is my Feed.css code:
.artwork__feed {
display: flex;
align-items: center;
background-color: white;
}
probably grid is your best option:
.artwork__feed {
display: grid;
/*this will give two equal columns*/
grid-template-columns: 1fr 1fr;
align-items: center;
background-color: white;
}
Goal: Align items centrally in div
See picture here (notice every watch is shifted to the left):
I'm trying to render each item in productcard centrally.
Currenty, each productCard__container renders to left.
Here is my ProductCard.js code:
return (
<div className="productcard">
<button onClick={(e) => history.push(`/product/${id}`)}>
<div className="productCard__container">
<img src={image} />
<h1>{brand}</h1>
<h2>{name}</h2>
<p>${price}</p>
</div>
</button>
</div>
...and the CSS code:
.productcard {
margin: 10px;
border-radius: 12px;
background-color: black;
}
.productCard__container {
align-items: center;
}
You can use css flex box
.productcard {
display: flex;
justify-content: center;
}