Good afternoon guys!
I have a swiper in my page like this:
<div className="c-slider swiper">
<div className="swiper-wrapper">
<div className="swiper-slide">
"blablabla1"
</div>
<div className="swiper-slide">
"blablabla2"
</div>
<div className="swiper-slide">
"blablabla3"
</div>
</div>
<Slider/>
</div>
Where the component Slider is like this:
import React, { useEffect } from "react";
import Swiper, { Pagination } from "swiper";
import "swiper/css";
import "swiper/css/pagination";
import "./Slider.scss";
const Slider = () => {
useEffect(() => {
const swiper = new Swiper(".swiper", {
modules: [Pagination],
pagination: {
el: ".swiper-pagination",
},
});
}, []);
return (
<div className="swiper-pagination" />
);
};
export default Slider;
I have 2 sliders in my page (and at least 4 more in the whole project), the first one swap between images and its perfect, but the second one changes the whole body and i need it to be a clicker one, giving the onClick function to three buttons, first button shows blablabla1, second button blablabla2 etc
i have two problems:
first one; if i change the styles from Swiper/css i change the styles in all the swipers from the project... i know i can change the pagination (dont know how) and maybe can solve that, one specific style to that swiper, but i dont know what codelines and styles must change and where are located
second one; i dont know how to give the swipe function to the buttons properly...
sorry for my english... have a nice day!
Related
I'm currently building a website where I need to build a carousel. The carousel needs to have a 'progress bar' as the indicator for the current slide (like here: https://www.samsung.com/uk).
I'm familiar with react-responsive-carousel, but it doesn't have the functionality built in for the progress bar.
I've used state to effectively build a stopwatch to facilitate the progress bar inside my component.
Instead of using the built in autoplay functionality from react-responsive-carousel, I'd like to have a function that is triggered once the interval is finished to move on to the next slide.
The problem I'm having is, I'm not sure how to trigger this action. I've checked the docs, and it looks like I need to trigger onClickNext (see here, line 528), but I can't figure out how to do that.
I'm currently using a functional component, rather than a class based component, if that makes a difference. I just need to understand how I can trigger that action from my component.
Thanks
Maybe triggering the function inside of that class component using a ref is the way.
It seems to be the solution you're looking for.
import { Carousel } from "react-responsive-carousel";
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { useEffect, useRef } from "react";
const App = () => {
const myRef = useRef();
useEffect(() => {
setTimeout(() => {
if (myRef) myRef.current.onClickNext();
}, 2000);
}, []);
return (
<Carousel ref={myRef}>
<div>
<p>Slide 1</p>
</div>
<div>
<p>Slide 2</p>
</div>
</Carousel>
);
};
export default App;
I've built a small website to learn more about page transition with Gatsby and Framer Motion and Styled Components.
[SPOILER]: My problem to be solved is at the end of the code blocks
The way it's currently working is simple:
An homepage with a list of projects
export default function Home() {
return (
<Layout>
<Welcome />
<WorkList />
<Footer />
</Layout>
)
}
A project page template that generate each project thanks to createPages (here is a simplified version)
import React, { useState, useRef, useContext, useEffect } from "react"
import { Link } from "gatsby"
// Components
...
// Data
import Projects from "../data/works.json"
// Styles
...
// Variants
...
const Project = ({ pageContext }) => {
const project = Projects.find(({ id }) => id === pageContext.id)
// lots of functions here
return (
<Layout>
<ProjectWrapper>
<Container>
<ProjectContent>
<BackgroundLines />
<ProjectContentInner>
<ProjectHeader>
<!-- here the header logic -->
</ProjectHeader>
<ProjectBlocks>
<!-- here the content logic -->
</ProjectBlocks>
</ProjectContentInner>
<ProjectFooter>
<!-- here the footer logic -->
</ProjectFooter>
</ProjectContent>
</Container>
</ProjectWrapper>
</Layout>
)
}
export default Project
The Layout component is holding the navigation
// Components
import Header from "./header"
// Styles
import { GlobalStyle } from "../styles/globalStyles"
const Layout = ({ children }) => {
return (
<div className="app">
<GlobalStyle />
<Header />
<main>{children}</main>
</div>
)
}
export default Layout
and last but not least, the gatsby.browser.js wrapped with the AnimatePresence and the Context Provider
import React from "react"
import { AnimatePresence } from "framer-motion"
import { LocationProvider } from "./src/context/locationContext"
export const wrapPageElement = ({ element }) => (
<LocationProvider>
<AnimatePresence exitBeforeEnter>{element}</AnimatePresence>
</LocationProvider>
)
export const shouldUpdateScroll = () => {
return false
}
So what I want to do seemed easy but it turned out that is not (at least for me).
I've currently made a beautiful transition between 2 projects, similar to the one you could see in here.
If you scroll to the bottom of the page, you can see that the next project's header is shown as a preview and once you click on it, it will smoothly transition to the next project page.
Awesome.
BUT, but this transition is a problem when the user clicks on the link in the navigation that takes him to the home or to another page.
I don't want to have the same exit transition, where some elements disappear while others overlaps, and I don't want the same timing. I want to do something completely different, based on where I'm headed to.
What I thought of as a solution, is to conditionally render exit transition in framer motion, to have different exit animation based on some variables.
I want to be able to track the Link Destination before the component unmount in order to be able to conditionally render an exit transion in Framer Motion
Since, as you may have seen, the navigation isn't inside the project.js I tried with createContext and useContext, getting the location.pathname to have an origin state and a e.target.pathname on Link to have a destination state. This doesn't actually works because everything seems to get a rerender.
I just provided the pieces of codes that seemed crucial to understand the overall structure, but I can go deeper with the way I've built variants or the current exit animations.
I'm not sure if it will help but you can get the props as any React component in the wrapPageElement:
export const wrapPageElement = ({ element, props }) => {
console.log("props", props)
if(props.location.pathname==='/'){
//return some other animation stuff
}
return <LocationProvider {...props}>
<AnimatePresence exitBeforeEnter>{element}</AnimatePresence>
</LocationProvider>
}
I can't figure out something very simple :-(
I'm building an image slider in react, with this idea:
Import a data.js file, containing the image filepaths.
the user clicks on a button and moves through the array.
Of course, I cant import images one by one...
import React from 'react';
import pics from './data'; //-->array with paths to images.
function App() {
let path =`./wallpapers/${pics[0]}`
console.log(path)
return (
<div className="App">
<img className='image' src={path} alt='dont know how will fix this, we dont have a way to generate alt content'/>
<div className='panel'>
<button>Left</button>
<button>Right</button>
</div>
</div>
);
}
export default App;
Now I'm confused since as this is javascript images won't be loaded like that. Is there any way to achieve this, or any technology I should take a look at?
You would need some sort of "current" image setting. Clicking the buttons would trigger the value to up or down. Default it to 0. This code isn't going to work as is, but the concept is like this:
import React, { useState } from 'react'
import wallpapers from './wallpapers'
function App() {
[ currentImage, setCurrentImage ] = useState(0)
const path =`./wallpapers/${wallpapers[currentImage]}`
return (
<div className="App">
<img className='image' src={path} alt='dont know how will fix this, we dont have a way to generate alt content'/>
<div className='panel'>
<button onClick={() => setCurrentImage(currentImage - 1)}>Left</button>
<button onClick={() => setCurrentImage(currentImage + 1)}>Right</button>
</div>
</div>
);
}
In a separate file, you can import all the images
// wallpapers/index.js
import Wall1 from './wallpapers/1.png';
import Wall2 from './wallpapers/2.png';
import Wall3 from './wallpapers/3.png';
import Wall4 from './wallpapers/4.png';
import Wall5 from './wallpapers/5.png';
import Wall6 from './wallpapers/6.png';
export default [
Wall1,
Wall2,
Wall3,
Wall4,
Wall5,
Wall6
]
I'm confused as to why nothing happens when I'm clicking links in my app.
In my index.js file, I am loading my main screen called 'Game'. Inside 'Game', I have two links, that when clicked, should render another screen.
In my index.js:
import React from "react";
import ReactDOM from "react-dom";
import Game from "./Game/Game";
ReactDOM.render(
<React.Fragment>
<Game/>
</React.Fragment>,
document.getElementById('gameContainer')
)
In my index.html:
<div>
<div id="gameContainer"></div>
</div>
<div id="root"></div>
My Game.js:
import React from "react";
import CharacterStats from "../CharacterStats";
import DungeonStats from "../DungeonStats";
const characterStatsComponent = () => {
return (
<CharacterStats />
);
}
const dungeonStatsComponent = () => {
return (
<DungeonStats />
);
}
const Game = () => (
<div>
<a id="showCharacter" href="#" onClick={characterStatsComponent}>Show your character</a>
</div>
<br />
<div>
<a id="showDungeon" href="#" onClick={dungeonStatsComponent}>Show current dungeon</a>
</div>
);
export default Game;
The two other components, CharacterStats and DungeonStats are just a few bits of html and reactjs to show some data.
Neither CharacterStats or DungeonStats are loading when I'm clicking the links.
I am also getting no errors in the console.
Nothing happens when the links are clicked.
I also put this inside each onClick event:
console.log('link was clicked');
And it does show the message in the console. So that shows that it knows the link is being clicked.
Is there anything that would prevent them from being loaded?
Thanks!
It wont work because you are returning jsx into the onClick function context, and not into the Game component's return value.
You could define a state using useState, something like showDungeon and showCharacter that defaults to false, change it to true onClick, and in the Game component's return value add:
{ showDungeon && <DungeonStats /> }
React uses something called Synthetic Events to achieve cross browser event handling. If I understood your question correctly than changing the onclick to onClick should do the job for you.
I'm having trouble having my cake and eating it too.
If I use a react-bootstrap carousel then it doesn't handle swipe on mobile but I get next/previous buttons and the carousel indicators to show the user what element of the carousel they are on.
If I use react-swipe then I get swiping but none of the other carousel features.
My component so far:
import React from 'react';
import { Meteor } from 'meteor/meteor';
import ReactSwipe from 'react-swipe';
const Index = () => (
<div className="foo">
<ReactSwipe className="carousel" key={3}>
<div>first panel</div>
<div>second panel</div>
<div>third panel</div>
</ReactSwipe>
</div>
);
export default Index;
How do I go about getting the carousel state and turning that into a set of indicators, one of which is active?