The section is a slider of multiple images, each of these images can have a product and a metaobject item connected to it, and if any of these boxes are clicked then you will be redirected to that product page. For the slider use the SwiperJs component, with the navigation points and arrows. The settings that are needed should be in the shopify schema and accessable through the Theme Customizer.
I couldn't do it properly as the requirement was to use the SwiperJS library to display the navigation left and right arrow courser below the image and display the pagination dots placed in between the navigation arrows ( < . . . > )
I tried in many different ways and achieved the result in many ways, but unfortunately not exactly that < . . . > way!
I have used two different ways to achieve the goal; jQuery develops folder one, and folder two is produced by reactjs.
I have explained the project step by step and completed the documentation in the README.md file separately for two two-file projects. You can find the detailed overview inside each project's folder README.md file.