Single Image Slider with Responsive gallery

• ricemotors

• November 19, 2023 at 10:29 am

Website: https://ricemotorsusa.com/cars/

Below is how my page currently looks on desktop view:

https://ricemotorsusa.com/wp-content/uploads/2023/11/RICEMOTORS.png

On mobile view it does not look like this at all. See below for mobile view:

https://ricemotorsusa.com/wp-content/uploads/2023/11/RICEMOTORSmobile.png

https://ricemotorsusa.com/wp-content/uploads/2023/11/RICEMOTORSmobilecont.png

When you click on an image in the grid view, it pops up the clicked image in full screen. See below:

https://ricemotorsusa.com/wp-content/uploads/2023/11/RICEMOTORSfs.png

My goal is to keep the same layout as what currently shows on desktop view. For behavior my goal is as follows:

Clicking on any image in the grid view below the slider image should change the slider image.

Clicking on the slider photo should expand a full screen view of the photo (with grid gallery below).

Behavior should be the same on mobile view.

The image currently showing in the slider view should be highlighted somehow (with a border) and selecting any other image in the gallery grid below the slider will highlight that image in the grid view instead.

Reference 1
https://ricemotorsusa.com/wp-content/uploads/2023/11/Falconmotorgroup.png

Reference 2
https://ricemotorsusa.com/wp-content/uploads/2023/11/Carfax.png

Reference 3
https://ricemotorsusa.com/wp-content/uploads/2023/11/CarGurus.com_.png

Reference 4
https://ricemotorsusa.com/wp-content/uploads/2023/11/Cars.com_.png

Reference 5
https://ricemotorsusa.com/wp-content/uploads/2023/11/Carvana.png

Bonus points if I can categorize the gallery view by category or sections such as Exterior, Interior, Features side by side. Clicking on the slider arrows will cycle through all images as if the categories didn’t exist.

Full screen view (when clicking on slider):

https://ricemotorsusa.com/wp-content/uploads/2023/11/RICEMOTORSfs.png

Plugins being used currently: ACF Pro, WPBakery Page Builder, Filebird.

The website is set up with Cars added as ‘Car Pages’ which is an iteration of WordPress Posts. Each car page has its own details and custom fields using ACF Pro. Each car page also has its own images I can upload individually. In the Page Templates of the theme, I have a template I built which is set as the default for all car pages. All car details, including the car images, are pulled via Post Custom Fields (part of ACF Pro plugin). See below for references.

https://ricemotorsusa.com/wp-content/uploads/2023/11/DashboardRM.png

https://ricemotorsusa.com/wp-content/uploads/2023/11/DashboardImagesRM.png

https://ricemotorsusa.com/wp-content/uploads/2023/11/RICEMOTORSVette.png

https://ricemotorsusa.com/wp-content/uploads/2023/11/RMCarPageTemplate.png