Better Netflix Carousel using SwiperJS

what is going on everybody I'm back with another Netflix slide the tutorial but this time we're gonna take it one step further did my first ever tutorial on YouTube I created a Netflix looking like slider purely using CSS this time I wanted to take this a step further and use a JavaScript library called swipe ojs the slider that i created wasn't bad considering it was fully created with CSS but I figured that there is a better way of doing it and this is what I'm going to show you today you're not going to be writing any JavaScript except changing a few options all the CSS that will be writing will be very simple but I just wanted to mention that I will be using a CSS which is a CSS preprocessor it just makes things a little more organized and easy to work but feel free to follow along do your own CSS if you liked it so digital I'm going to show you how to pay a Netflix looking slider that is easy to modify easy to configure and the words we touch which can be very useful so before we begin if I can ask everybody to please subscribe to my channel click in the bow before we started my channel a few months ago but I've already generated tons of something that you probably find interesting if you're looking at this one so go to my channel have a look around if you like what you see please subscribe because I will be uploading or terrorism just like this and last thing before we start all the code that I will be doing today will be uploaded on my blog which I will post in the description below so if you wanted to copy some of the code and use it for your own project feel free to do enough talking that's that code [Music] okay this is third time lucky in this video I will be using Swiper J s which is basically a very modern touch slider that you can use on pretty much and then anything such as mobile apps this matter what is happy tonight if you can use on websites and the great thing about Swiper J's is that it's full of options and there is lots of choice that you can have while you're building your slider and yeah it's it's really powerful basically and now one of the one of the reasons that I really like it is because it's you can you stitch on it but anyways let's begin the first thing we need to do here is go and download the latest version of the JavaScript and for this one I will download the version 5.3 point 1 just download the zip file I've already done that but basically just click on here and let's go back now and look at the demos if we scroll down the demo that we can use that we'll be using today it's called multiple slides per view so as you can see this is already kind of looking like Netflix scroller so I think this would be the perfect example so if you go to so source code it will take us to get help let's basically copy this code and then we will just start from here I will explain everything bit by bit so I've already created a folder I've downloaded the file that I need the Swiper jes files and inside here the inside the zip file you will find a folder called package so make sure you extract this package folder in your project folder so in my case is here and then I've got my index file my images and the CSS for the CSS I'm gonna use a CSS for the images I've just downloaded the free images from Netflix so I'm gonna go ahead and open this in Visual Studio code and I will go ahead and paste the HTML that we just copied now the first thing you're going to see on top is let's change the title to to Netflix 1.1 and we have a viewport then the first important thing that you're gonna see here is the link to the stylesheet to package a CSS wiper is basically what we just extracted out from this zip file so we definitely need this but I want to move the demo Styles into the style sheet that I have created which is the style dot CSS CSS sorry so I'm gonna copy and paste here so it's a little bit more organized and I'm gonna go back and just remove this style and also of course we're gonna have to one eye I'm gonna be using the extension called life-size compiler so basically every time I compile my s CSS is gonna compile it to this start dot CSS file and this is the file that I actually want to link so let's do this the link CSS and the CSS that we want to link is under CSS Styles dot CSS and also make sure things to the extension that you watch a CSS so it watches through any changes that we do here so if I save this it will overwrite the changes in here okay so let's close the CSS go back to index so so far so good if I was another thing that I want to mention is that I will be using a live server so if I right-click on the index dot HTML and open with a live server - it opened on live server URL for me which looks like this so as you can see we've already got the demo work in here the stars are coming through and everything seems great let's go back the good thing about the laughs the sorry the live server is that every time I save is just gonna reload the page for me so that to refresh every time anyways you probably already know that and if we go down this is basically the container dice holding the slides as you can see slide one two three four five six seven eight and then this is the pagination this is the JavaScript a link to Swiper J s which is a minified version as well so without this the slider won't work we definitely need the packages folder and this and then the last bit is the JavaScript where we will be adding a few settings but it's nothing major will be just adding and changing a few things around so the first thing we probably want to do is to make things a little bit organized I'm gonna wrap everything here with a gif of class Netflix Netflix container or let's just call the Netflix and then inside this Netflix Dave a bit we'll have the and basically we'll have the slider inside this depth but what this is gonna do is this Dave you know when you create dips they usually set to block element so if I go back you will see that the slider has actually shrunk down and this is because the div has a property of a block element and I'll show you Rana so for ways to inspect the div with class Netflix you see that the Dave is display this block and this is why it shrunk down and this is what we actually want and now the next bit I want to do is actually includes images so what I'm going to do is remove all these all these Leafs and I'm just going to use one to add an image and then duplicate that so I've added the three images in a folder and they're just named one two time so let's add the first image to do this we just the image source and IMG is the folder and then image one of course you might want to add all tags for accessibility accessibility usability and so on so it will tell you that you'll probably say the movie name or or whatever so I'm just gonna put movie title for now because I'm not really sure which image dies which movie that is okay so now I need ten of them and to do this in Visual Studio code I will show you a very simple socket if you do all shift and down this will duplicate the diff and everything inside of course so I'm just going to duplicate this eight more times so one two three four five six seven eight I hope this is 10 now altogether so and then I'm gonna change the source of the image to 2 3 4 5 6 7 8 9 and 10 and if you save this and go back to the browser you will see that we are getting the images that are downloaded from Netflix now the next bit I want to do is I want to make sure that we have few movies I want to change the number of the movies displayed on the first slide and or the first screen let's cool it that way and to do this if we go back to the index dot HTML file and scroll down you will see slide per view so we can change this to whatever number you like let's say I want 6 and I want the space between it to me 10 okay so we'll see 6 of those elements but the space between the zoom work this is because the images are not yet responsive and to do that we have to go to Styles and if we want to be if you wanted to be specific unless we can just make the images responsive for the Netflix slider and to do this we can do Netflix and all the images in the Netflix slider I want them to be max width of hundred percent and the height needs to be set to also if I saved it and go back you will see that all the images now fit fit in the boxes and there is 10 pixels gap I will show you if I go back to the next HTML and change the space between to be something drastic maybe like 40 that's Pyxis by the way and go back you will see that the gap between them is much larger now one thing that I don't like about this slider is this navigation at the bottom am NOT a big fan but if you like to keep and if you like to push it down a little bit so it looks slightly better if you inspect it you will see that the the actual diff it's called Swiper pagination and in fact I can show you here this is the diff that you would probably want to just move just change the bottom property a little bit maybe like this but also we need to overflow we need to do the overflow or a delivery Pauline so mess around with that if you like but I don't really like it so I'm just going to take it off instead just like Netflix I want to add the left and right arrows and to do this what you can do is go back to the Swiper jes website click on API navigate to on the left side there is components and under components there is navigation if you click on that you will see that navigation is type of object Allah and basically you can just add this to anywhere in here pretty much anyone here we can in fact remove the pagination because we don't wander or don't wander you can keep if you like an to pace the obligation instead but of course as I said you can have life let me tidy this up a little bit so now that I've done this you can save it we want yet see the the our lives and this is because we actually need to create the dibs and where the pagination was here we actually need to create the dips there let's go let's change this to add Horus okay so the first arrow is going to have the deep class of Swiper button next and make sure you close the dip and the second dip we have the class of Swiper button previous proof prep and make sure because they save this go back and you will see that we have a blue arrow here and a very opaque blue arrow here and this is because obviously you can't go left but you can go right and once you go right then this one lights up as well so it tells you that you can go left now the next bit that I want to sort out is first of all let me change this to ten so it looks a little better and the second thing that I want to sort out is the the arrows navigation basically at the moment every time we click the arrows the slides actually moved by one and we can change this you can set a specific number maybe you want when you click that the arrow the slider to move by two or three or four and to change this we can literally go in here and add another option and again this is from the API is called slides let's add 4 for example save this and now if I click right it should scroll by 4 as you can see the scroll is my China and of course I can set it to 2 so you can see again so it's now scrolling by 2 and so on so that's perfect so far the next bit I want to focus on we are actually now done with the HTML we don't have to touch anything else the next thing we need to focus on is the CSS actually first of all let me just add the let's add fake logo of Netflix just to make it more real to make it look cool so I'm just gonna add h1 with the title Netflix and inside here I can add h2 just to make it look similar to Netflix and I will just simply like popular on Netflix ok popular Netflix let me save this go back everything works let me start now we are actually done with this let me go to the CSS and do some styling so the first thing I can do the actual h1 it's outside that we're not going to bother with that I'm just going to stand here I want to change the background color of the actual website first to black and I want to reverse the text color to be white and if I go back down to the h1 now I can do let's say text-align:center and maybe color just said to you right I believe this would do the job and I think let's have a look at this okay this is looking it I'm not going to change the formula now the next bit the popular Netflix it's fine of course you might want to add some padding or whatever but I'm not going to bother with this at the moment the next bit that I want to focus on is the arrows the arrow is a fairly dark and you might want to change this so an easy way that I found is to inspect the arrows and I'm sure that there is otherwise but you can either use the classroom here to change it - all right let's try this first in fact I don't think I've tried that yet so an easy way is actually to change this route color I'm sure that there is another way but if I was to if I was to put route and this variable excuse me I think okay so if I was to put route and this variable and we can probably change it from here I don't know whether this is the right way of doing it but it's let's have a look and I think actually the route needs to be outside here I'm told this needs to be actually like this my stuff now - you tighten things up okay so let's save and now that I've added the route and this variable and I've set its what you will see that the arrows are non-white and of course you can change into whatever you like also you might want to have a look at the API there might be an easier way of doing the colors I'm not too sure about this but let's continue now the next bit that we might want to do is the hover effect the hover effect will be obviously set on each individual source wiper slide so let's copy the class and add it in here and basically what I can do is on on each Swiper slide I can add a transition first of all of 20 or 50 milliseconds all and then inside here I can try I can add a hover effect just like this maybe we can do transform scale to your point see let's see if this works for instable and as you can see the scale works well but we actually need to make some space for the image to expand to do this we can add to the Swiper wrapper we can maybe add a little bit of padding so in here we can use what wrapper padding and we can do 20 pixels top and bottom and zero pixels left and right so now if I hover over you will see that the images are actually fully showing and zooming in scaling in but the second problem that you might see is that the images are actually overlapping and to fix this you probably just want to do set index so you want on the hover and if you go back you will see that the you know working well also the hover might not be the best option for touch but you have to try that out and see how it works but this seems to be okay and another thing that you might notice is that if I hover over in the first image similar gets cut out I don't think is a big deal but there is a easy way there is an easy way of fixing this and to fix this for the first image we can actually just target the hover on the first image so what I can do is and first first child and then I can do hover and in here maybe we can the margin of 0 2008 and 40 pixels so let's see if this works first and then I will explain this kind of works maybe it needs to be slightly less but as you can see the image let's put it to 20 just for this example okay this works a little better with 30 pixels but as you can see the image now doesn't go to the left it just goes to the right and pushes the rest of the images and those images this zoom in the effect is not exactly the same as Netflix but I think to do the Netflix one will have to write a lot of JavaScript which I don't think many people want to do and I think this looks pretty decent anyway now because we have a set number of of thumbnails in here we'll probably have to target this one as well and do the same and we probably have to target the last one is well and do the same so I'm just going to show you the last one just like this instead of first child we can do last child instead of 30 pictures of course this will be negative 30 pixels and if you go back you will see that after life is now zooming in nicely and course if you want to target in this case one two three four five six if you want to target the sixth element then you have to do nth and the child number I believe he was n th child I think so and the age child may be number six and then on hover then we can do let's say margin - 30 pixels let's have a look whether this works and you can see this works well and so we have on this these are assuming in nicely and so on and last but not least you probably want multiple rows of these movies and you're probably wondering if you press this button whether the next row will break but you it actually wants so what we can do just to show you we can either copy the whole Netflix thing or we can just copy the container now let's copy the whole Netflix row in this case and just paste one in here maybe for the second one we can say let's say new movies new movies and obviously just to make them look slightly different you get the point I just wanted them to look slightly different okay so if I was to click on this one it won't affect anything below and if I was to click on this one it won't affect anything above and so on so we can basically add more and more and of course you might want to add some padding around because the text is way too close to the edge but that's pretty much everything I hope you liked this tutorial as always please subscribe to my channel I would really appreciate it it just takes a second to do I am trying to grow this YouTube channel alright I'm really enjoying what I'm doing and if you like to see videos just like this or if you have any ideas please let me know in the comments below don't forget to like this video and I'll see you next time thank you very much watching and as always [Music]

Channel: Raddy

Views: 34,183

Keywords:

Id: rR1uIN-Mes4

Length: 25min 55sec (1555 seconds)

Published: Fri Jan 10 2020