I'm stuck in a creative dilemma and need some help. the site is located at new.ncdjs.com. Under the header slider are 4 boxes. The 4 images are run by a script called smart product viewer. It advances the animation on scroll and if you click and move left to right it will advance forward as well.
1. Images need to play on scroll and on hover. click left to right can be disabled- but I do need the linking capability to go to a site on click- get rid of the hand icon that shows on hover.
2. Images need to lazy load in- each animation consists of 60 images- instead of loading all at once, i need to load them in one by one- I attempted to load columns in through the animate column feature in Visual Composer, not sure if this is the most efficient.
3. I looked at the CSS for 2 minutes and could not find out how to remove the margins and padding- images should sit just like the images in the section below. sh and neat- on browser resize, It should respond accordingly, moving to two rows 2 columns, and then 1 column 4 rows on mobile. Flush and responsive throughout.
Don't hack up the template. ALL CHANGES NEED TO BE MADE IN VISUAL COMPOSER or editing CSS files in the plugin. After a theme update, the site should still work. Please use VC as much as possible- it's a very powerful tool.