Japan Slider

A slider showcasing Japan's various attractions

Table of contents

• Overview
  • Links
  • Video
  • Screenshot
• Built with
• My process
• Author

Overview

Links

• Live Site: https://rashidshamloo.github.io/japan-slider/

Video

japan-slider.mp4

Screenshot

• Desktop

• Mobile

Built with

• TypeScript
• React
• Vite.js
• Tailwind CSS
• Swiper
• React Next Tilt

My process

I started this project to learn more about sliders. I also wanted to integrate my own tilt component (react-next-tilt) into the slides. in doing so I ran into the problem of Swiper's Parallax module not supporting animations along the z-axis. I modified the module and added z-axis support and published it as a package so others can use it as well in case they run into a similar problem:

• swiper-mods package: https://www.npmjs.com/package/swiper-mods

For the content, I googled Japan's tourist attractions and selected the ones I found interesting, then used Bing Chat to generate the info in English and Google Translate to translate it into Japanese.

For the images, they are from Pexels, Unsplash, or Flickr. I cropped them in Photoshop, converted them to webp using ffmpeg, and edited the metadata using ExifTool.

Author

Rashid Shamloo

• Portfolio - rashidshamloo.ir
• Linkedin - rashid-shamloo
• Frontend Mentor - @rashidshamloo
• Twitter - @rashidshamloo
• Dev.to - @rashidshamloo