Hello and welcome to my site's second changelog. this time, I'll discuss my experience building an image carousel. i published this on 13 April.
I had a carousel on my wix site and thought it would be interesting to implement it, so I did. To begin, I saved all the photos and checked to see whether they were all the same size. Then, I searched Google and YouTube to learn how to make a carousel.
I did locate a video that was 25 minutes long and that helped but It took me about 5 hours to get the carousel to work and look the way I wanted it to here's how it went. So in the video, the carousel only showed one image at a time and hid the others when the focus was not present, and when I remembered my wix website, I realised I wanted to create the exact thing, so I started experimenting with things, and I constantly ran into issues with a style function called overflow, so I had to see and measure the size of each image to make it work, another thing i wanted was when the focus was on one image the images previous and after where 50% present like on my Wix website.
I was able to do so, but it was overflowing throughout the screen, overflowing is basically where the images or content go out of a given boundary, so over here the images after the three on the screen would end up being present and you could see it by scrolling so you could see the image when I didn't want to see it so then I was experimenting for some time when I realised another feature that I wanted to add was so the images previous and consecutive to the focus would have a slight opacity, i achieved this using functions called Queries and eventlistners.
Then I went back to the overflow. I couldn't figure out how to make it for the life of me so I was distraught I took a break and did some other college work saw some TV and then got back to it late at night, I considered that I don't want to go out of the screen so I put the overflow on the whole page instead of keeping it in that section and who would've though, it bloddy worked, I was finally happy that I got what i wanted the whole process was done.I also did another feature that included buttons to aid the flow of images manually, i achieved them, as well as by setting the scale and position. another issueoccured that when you alter the screen size, the location moves and it doesn't stick to the picture.
So I left it for now, and I understood that my next step is to resize this entire site so that it works on all devices.
I'll see you in the next change log, and don't forget to visit beyondmebtw.com.
also check out the article on medium https://medium.com/@beyondmebtw/beyondmebtw-com-changelog-2-de8aa078d0a4
Comments