В opencart такое осуществить сверх сложно, особенно если применяются еще и какие-либо модули, так как все они заточены на определенную структуру сайта и используют bootstrap с jquery. Даже если вы сделаете тему, то вам придется переписать все модули на vue. В catalog/view/javascript/common.js находятся основные функции по обновлению корзины, добавлению товаров в корзину и прочие механизмы взаимодействия и там можно посмотреть, куда отправляются запросы. Еще надо понимать какие ответы приходят с бека. К примеру когда обновляется корзина, то приходят не чистые данные, а разметка, при чем разные запросы могут брать эту разметку с разных мест, то есть, нужно еще и бекенд подкорректировать, чтобы было проще работать.
Он у тебя на всех работает, просто последний слайд идет поверх остальных и скрывается только при помощи opacity: 0;
Добавь ко всем неактивным слайдам pointer-events: none; или visibility: hidden;
Интересная задача. В общем весь фокус в том, что поверх видимых карточек, лежит точно такая же сетка с невидимыми карточками у которых есть только синий border. На сетку, которая лежит сверху, наложена маска:
mask: radial-gradient(320px 320px at var(--x) var(--y), black 1%, transparent 40%);
То есть у всего блока с синими border остается видимым только радиальный градиент в 320px, а x и y это координаты курсора. Ну и грубо говоря получается такая картина:
Обновить с какой версии и зачем?
Там каждая версия отличается, а релизы, вообще не совместимы. Надо обновлять не только сам opencart, но еще и модули переустанавливать, на готовом сайте этого лучше делать не стоит.
Все зависит от того какие изображения будут и какие позиции они должны занимать. Для гибкости и адаптивности, нужно немного подумать над формулами, но основная суть думаю ясна.