basic user-customisable product carousel, pass options to Paypal add to cart button

I need some assistance with what I believe is a very simple task for someone with coding experience.

I have a “synced slider” on a webpage using OwlCarousel ([login to view URL]) which has 10 images on. This slider is used to display a chain of images which can be customised by the user from a fixed number of options. I sell a product that has several colour options for each image of the slider. Below the OwlCarousel there is a grid that contains images of the colour options that the user can choose from.

What I need:

To start with, all images in the slider should be blank (white background jpg). When the user clicks on (or touches) one of the owl carousel blank images, and then selects one of the colour options in the colour option grid, I would like a new image to replace the white background image in both synced sliders.

A limited amount of information also needs to be displayed about each colour option, this should appear in the right-hand column of the page when each colour option is clicked (touched).

When all images in the slider have been customised, I need the data to be passed to paypal add to cart icon (this should be hidden until all options are selected). The data needs to be passed to Paypal in a way that I know which options that the user has selected (using “[login to view URL]” of each colour option selected would be fine) and which order they are in (left to right).

I have a page with the working sliders and boxes for content, this just needs to be tweaked and to have the above functionality added. The image attached below should make my description clearer.

In addition:

I also need the forward and backwards slider buttons to be moved to the sides of the large, single image synced slider and styled properly – this should be easily achievable but I cannot get it to work properly (see: [login to view URL])

Deliverables:

All code should be uniquely tagged wherever possible to avoid interfering with the rest of my site (add the prefix “hande”). Please separate your code into new documents where possible and comment any altered code in the main files for troubleshooting purposes, as they are used across the whole site. I presume that JQuery would be the obvious choice for this project as it is already being used for the OwlCarousel etc.

This is a simple project, I imagine it would take around 1 hour. I will not pay more than 50GBP

CSS HTML JavaScript jQuery / Prototype 网站设计

项目ID： #6593900

关于项目