Hello everyone first of all I wasn't able to find this kind of carousel anywhere for free, so I need advice about how to build it what it needs to be built.
Here is the image of the carousel
You can use Flicity
they also have react-flicity-component package for reactjs and it is easy to use
Related
how is it going?
it has been some time since i was around here and i learned a new things being one of them react, i'm developing a personal project and i'm stuck with developing a light/dark mode with bootstrap in react, how can i do this? is there any example video or code or anything you know about it? i found in youtube only plain css and since i'm using bootstrap i'm afraid that won't work for my project, it could just change my background but i want to change also some structures of my site, any advice or tip would be really thankful.
Yeah I can help !
You need to use states as the theme btn is toggled, and update properties according to that, I have previously worked upon that so I am sharing link of that project: https://satellite-system.github.io/TextUtils---React-js-Web/
, github link : https://github.com/Satellite-system/TextUtils---React-js-Web
Hope it will help.
It was actually a project from youtube, but I have forgot its channel.
Hi Thanks in advance for your help.
The project I am developing is an adaptation of
https://codesandbox.io/s/r3f-wouter-routes-7kohn
I have split the project above into a larger project structure making use of web pack and other dependencies. My project with the bug can be viewed here:-
https://codesandbox.io/s/cranky-wood-hmub1
If that codesandbox does not work for you, you can clone from here:-
git clone https://github.com/SILVA-DIGITAL/SILVADIGITAL.git
yarn
yarn start
Steps to re-produce the bug:
Click on knot or bomb ( Top right hand navigation Menu ).
The knot or bomb model loads then disappears. Console mentions a shader error.
Known research:
I believe the bug is found within /components/shapes/index.tsx.
For some reason when switching the route to load a different model, the material class for the model to switch to fails its as if its not cached or does not have time to execute? I have tried wrapping the models in a suspense but that does not make a difference.
Here is the console error:
All objects should be stored in useState() if they are within the render function.
I'm creating a gallery of images in ReactJs. There are a lot of examples online, but i didn't find anything that is perfectly responsive on desktop browsers and also completely mobile friendly.
In particular, when an image is opened on the mobile browser, i need to be able to zoom the photo with a double tap, and close the photo when i drag it to the bottom
I already tried all the principal solution that i found online.
For example, i tried all of these https://reactjsexample.com/tag/lightbox/
and much much more.
I also tried different approaches like CSS rules, Viewport rules, create a simple zoomable html div, etc... But nothing worked.
Basically, what i what to achieve is exactly something like this: https://www.lucapetruzzi.com/gallery/1
Created thanks to this library: https://photoswipe.com/ that unfortunately i can't use in React.
(I also tried the react-photoswipe and react-photoswipe-2 libraries but it seems not maintained and not working with new versions of React)
Thank you for any help
So for previous comments, I wrote a snippet for you, check here
Here are the mainly steps:
use npm install photoswipe so DON'T need to include builded js but NEED to include css in index.html (or you can import in App.css)
write the markup in js component
init it by click button or in useEffect
I'm make a graphical website, so I use three.js for implement it.
For a reference, I searched a lots of site and found some interest site.
https://www.magicleap.com/ is made with React.js.
Connect the site and scroll up/down, it's effect like move forward and backward.
So I wonder that, which library used in this site to implement animation with scroll?
Anyone who know about that, please comment it.
Thanks.
It seems they are using next.js.
Sources:
https://react-etc.net/entry/who-is-using-next-js
https://builtwith.com/?https%3a%2f%2fwww.magicleap.com%2f
I'am using Reactjs for the first time and I want to make my website responsive .
So, Is there a library helps me to get a responsive design ?
thank you.
So this isn't something that React will do for you as building a responsive site is something more along the css that you decide to use.
What I would recommend you adding to your react project is another project like bootstrap which will give you the power to create a responsive website. It also has a lot of other basics that you can use in your project to build upon. Specifically for the responsive overview you will want to check out this link => https://getbootstrap.com/docs/4.0/layout/overview/