Create a RESPONSIVE JavaScript Image Slider
Responsive web design is a must. Learn how to make a responsive image carousel.
This tutorial builds off of a previous tutorial I did on creating a basic image slider. Check that out here before moving on:
We are going to do two things to our image slider:
1.
When we resize our window, the images will always stay proportional to the window
ie. @ full screen if our image takes up 70% of the document, @ any window size our image will take up 70% of that new window size
2.
Once we resize our window below a certain point (we’ll choose less than 768px), our image will take up 100% of the window size
Let’s begin.
We’ll start by updating some CSS attributes…
For the view-port, we’ll set the ‘height’ to auto; we’ll establish the width in the JavaScript code.
For the card, we’ll set the ‘height’ to auto; we’ll set the ‘width’ to 700px (this is where we set the size of the images in our slider).
I’ve added attributes for an IMG element; this class handles the actual image we display in our slider (the card just surrounds the image)
Let’s tackle making our image slider stay proportional to the window.
We’ll need to calculate what percentage of the window one image in our slider takes.
After we get that, we’ll set the view-port’s and individual card’s width using it.
Note:
I’ve just recalculated the amount of shift that happens when our slider initially loads.
We’ll also need to copy that logic into our Next and Previous buttons…
Finally, to make our image slider respond to the user resizing the window, we’ll add a ‘resize’ event listener and just make sure the slider remembers which image the user is on…
Let’s tackle making our image slider “go full screen” when we shrink the window below a width of 768px.
Firstly, we’ll give our program a choice:
If the width of the window is below 768px, then we’ll set the width of our view-port and cards to 100%.
If not we’ll keep it proportional to a maximum window width.
Lastly, we’ll just copy the logic we just updated above, to our ‘resize’ event listener…
If you would like a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.
