Swipe gallery on clear CSS — 😎 with react, typescript, vitejs

hey everyone with you Elena linova and in this video we will try to create swipe Gallery uh on CSS just clear CSS and nothing else but we will use V Jazz react Jazz and typescript so without JavaScript you know uh okay uh we will have at the end something like that so there are images and we can swipe them quite easy uh they also lazy load so unfortunately um you me just here all um inspect our visibility hidden for example if we delete we can see loader here uh and uh each photo have special loader which is just give and yeah we will just create this gallery and it works very good on desktop and on mobile as well and um also of course not forget to subscribe on this channel press Bell icon and [Music] go so okay let's start first of all Let's uh create a folder I mean just go into the folder where you will create our project and then next we need with Jaz or white chz and before we need somehow to install it so getting started and npm great white latest start here we choose the name of project and it will be swipe Gallery C oh no no no YouTube yep and after it react and of course typescript after it if we need a CD to go into this folder npm install and we just wait wait a lot of time how much we need to [Music] wait you can repeat with me and after npm Rand yooo everything have been started and we just again stop because we need to add CSS it need to do npm add /d SAS because we will use S CSS so again start npm randev and Local Host 5173 and yooo we have this project live so we just install it we ja and we need open folder with it so go into the documents or somewhere where you save this folder and swipe Gallery YouTube okay we just build this project and let's look what we have here we have the main folder source so and there are a lot of different files here and let's clear a little bit because we will create everything by our own by our own almost everything so um go and up to six and uh just clear everything after it uh remove react strict mode so just will not have double render and remove some files which we don't need and index CSS we also need to remove actually we will use Global SC CSS file so let's rename and we need to create this folder Styles and um Global CSS s CSS what next next we should to remove index CSS so really all files which we don't need and just left Global CSS and up tox and yeah we should to check that we NE no way import our previous files and up to 6 let's just write up and check into the browser that everything is okay so uh after it go to public because we we create a gallery we need folder images and here we need to put some some images which we you will use I used my photos from Norway so I just tried to Minify them to work with them and how you can see there are several photos they are uh have the same dimensions I mean almost the same in the Clos area uh and also we need at loader. give you just can find any loader into the internet and just put also in public folder uh my Dimensions is 20 220 full order so it will be extremely Pixel Perfect and why isgb left because it's for Icon if you want an another F icon you just need to change it but okay we prepare our project and go back into the app and here let's create an array of images uh actually this will be an array of objects which have URL to each image and uh description I copy all of these so we have S certain images because of it I copy this thing um certain times with comma and after it let's rename it for that we need just uh choose 01 press command plus d d and after you just rename on needed naming and go to the app here we need to create a small layout which is first is container we will have H1 title which just swipe Gallery it's never mind what you put here I decided just to call somehow our project so it will be swipe Gallery after it we just need to import our new components web Gallery but let's just check that everything works when nothing break and okay go into the browser and check okay everything looks quite good and here we should to import components web Gallery because we will create independent component and there as a props we should to pass our images which we have so this component will be like a library for our Galleries and you can I don't know put a lot of these galleries on your page and just use it but of course we need to import this swipe gallery from somewhere and just from components swipe Gallery yeah and that's it but we need to create this folder components uh in folder Source we create components inside of it we create swipe Gallery folder and inside of it index T6 and index CSS SSS yeah we use SAS for our style so um that's it uh but of course we need create this compony because it's still we still have SE highlighting and if we for example go into the browser and open inspector we see that oh my God the request model we can't find okay let's go into where we go into index. T6 and create here a component it's just functions VI Gallery uh always props images and also because we are using typescript we need to of course create these props and somehow to uh describe what we have there and we have uh inside of it we will have just element which is firstly div his class name gallery and inside of it wi gallery and let's create interface swipe Gallery props which is for now consist just only from images if you will add more properties there for example counter navigation and Etc and Etc you need to put it here and of course not forget import index s CSS because we need styles for our Gallery okay if you check in the browser we see that everything is okay just check add some additional one to check be very sure that this is our Gallery so our components works and uh first of all let's work a little bit on global scss uh for that we need to import Roboto font I just really like this font It's s and uh just let's add it uh I decided to add some fonts actually I think that we not use it there we just use might be bold one for H one but I decided for some don't know why to add uh several On's like most popular okay and okay just import it and put into scss file after it uh let's work a little bit about on body so we have body font the main font it's 14 pixel line head one two robot and this is s family after it mean here it's 100 VH it's actually not super important because in the gallery we also will put some he there but anyway uh let's put it as well here margin par zero so clear some um theault CSS on body so everything will be quite close to the Border uh just only H1 has their margin if we open our Dome document object model so we see that yeah okay after it we work with root put here one H person and container what we will do with container we just put some ping maybe 30 pixels box sizing border box so if we will put he we will put he so partings will be included into this he uh display G and G template columns uh rows sorry rows Auto and one uh 100% so it means that our title will have um AO and uh container will have uh everything left so H1 it's margin bottom 20 pixels and text line Center okay cool but at the same time if you look on our Dome it not looks very awesome because I expected that swipe Gallery will have uh left space from the screen and what we can do here mightbe to put in root 100 pH yes I like that it works okay cool and um but there is one thing which we still can fix we used margin bottom on H one and actually here we just can use Gap without margin bottom just left margin zero and GAP 20 pixels and that's it it will be like a I think better GD implementation okay cool uh our container is ready for our gallery we have success in it and we can start work with Swip Gallery what we will do here actually we already created a natural container D which is Gallery inside of it we create Gallery container uh so we will have Gallery as a main container inside of it we will have line which is Gallery container where we will put all our images which we have and we just uh go through all our images and uh create also neutral elements like diff because we will Center by defit uh also we put the key which is depend on index we can use here index because we not how manipulate with these images and we not remove not add them and index in that case is okay not unique so uh inside of it we create image we Source image URL and ALT which is description image description and loading let's put lazy so when we open our Gallery not all images I don't know download yes okay so we have this Gallery we're extremely happy our layout is fully ready and we can start to work on CSS oh okay let's before look what we have we have a lot of images which we can scroll they're very large larger than our screen and okay go into CSS and here we just say gallery and uh what we will have here in the gallery we just say with 100% oh no we will not say marks H 100% but anyway we will a little bit uh different does it okay container also 100% uh and okay with 100 person so not break it maybe and here H it's actually you can remove I think with 100% on container but uh anyway let's try H um here we will will use Gallery HTE uh because of that I spoke about that maybe we not needed to use a GD just need space for this Gallery which is Will calculate extremely good so we use 100 pH minus 110 pixels which is size of our title plus 20 pixels okay what next how we see lay out on 100 P pixel so that's okay Gallery container should be a really long line okay go into the images and just say say them that Max WID is 100% so they will not be so large and Max also 100% because we will put it into the items and object Feit here is fill so our images will have good proportion not depending on how large he to width okay what next we should to put overflow X AO here so we have a withd 100 after it position relative not to for what I use it mightbe if for example you will add H different components inside you can use this position relative here it's not super needed uh scroll ball width we height and this proper proper scroll snap type it's actually the main property which help us to make the real gallery and display Flex to put all images into the on into the line so and after it we need to little bit work with item which is from container oh and of course not forget to close to hide scroll bar fully we do it on web kit but not forget to check Firefox Safari that everything looks also good it should be display no so we will have actually scrolling but we should to hide it and what next next we uh use item which is container item and we say that mean width is 100% so for each item we have 100% he we have the same hate Gallery hate and uh text align Center so Center our image because image actually display in line This is in line element and how you see we can scroll already our Gallery but uh it's not looks like swipe gallery and if we hide open the scroll again we see the scroll actually we just created layout with horizontal scroll okay uh open it again and yeah fine but now we need somehow to stop images for example if we do small scrolling we need somehow to say stop please and um we use scroll snap line from start and scroll snap stop for always and uh these three properties scroll snap type scroll SLP a line uh help us to make actually normal Gallery which we will use uh a little bit later I speak about what means scroll snap stop and after it theground put background on each item exactly load in give Center Center not repeat and background size uh so to save it 50 50% and okay here we put visibility hidden just look on our loader and oh my God so large oh okay okay let's do just 50 pixels on 50 pixels oh now it looks really awesome and if you scroll already you see the screen stops by their own because scroll snap align start if we remove it we can just scroll like like usual but we need scroll and that uh item stopped in right position always on one image but look at it if you scroll very if you scroll very okay our scroll is quite sensitive now but all the time it's stop on the image about scroll snap stop always if we show it it help us not have sensitive scroll you see if you scroll very hard we can move one I don't know 10 images if we put this property we can move just only on one image it make our scroll not so sensitive so and actually that's it remove some spaces and um yeah we have our Gallery which is quite awesome and uh swipe and perfectly works on mobile desktop um of course if you have special Mouse uh and you can scroll horizontally so um that's it I hope this lesson was interesting for you uh of course not forget to subscribe on this channel press Bell icon like button and see you in next video with youer Elena L bye-bye [Music]

Channel: Elena Litvinova — The Art of Web Development 🛸

Views: 375

Keywords: webelart, gallery, swipe-gallery, react, typescript, js

Id: 7Z5KLxDJ9dI

Length: 23min 8sec (1388 seconds)

Published: Fri Oct 27 2023