Виталий Першин

После всех изменений:
swiper.update();
https://jsfiddle.net/l2banners/3oavyp4c/

Можно переопределить margin через css:

Фокус в том что после клика к блоку добавляется класс в котором описана анимация. Так же на этотом блоке висит событие, которое отслеживает окончание любой анимации, в данном случае, на событие окончания анимации мы вешаем удаление нашего анимируемого класса и это позволяет нам добавить его заново:

- инициализировать слайдер нужно один раз, а не при каждом вызове
- При каждом вызоме можно делать сборс, чтобы слайдер пересчитал позицию и показывался корректно $(".slider").slick('setPosition');
- Отключение стрелок нужно делать через брекпоинты самого слик:

$('.popup__slider').slick({ // Подключение Slick Slider
         slidesToShow: 1,
         slidesToScroll: 1,
         arrows: false,
         fade: true,
         asNavFor: '.popup__slider_nav',
  responsive: [
    {
      breakpoint: 560,
      settings: {
        arrows: true
      }
    }
  ]
         });
      })

Вот так более универсально:
Замените свой js и пропишите атрибуты data-sroll тем кнопкам, которые должны вызывать скролл к вашим секциям

https://intl-tel-input.com/

Если нужно анимировать появление, то можно использовать animation:

После переключения слайда первым 3-м активным задайте класс который будет делать подсказку справа, остальным слева

Примерно так:

Например так:

onmouseover="show_small_img('{{ product.thumb }}');"

function show_small_img(image){
$('.small-img').html('<img src="'+image+'" style="height:100px;width: 100px;">');
$('.small-img').css({"width": "120px", "text-align":"center"});
$('.small-img').show();
}

Подключаем библиотеку gulp-changed
const changed = require('gulp-changed');

И первым делом перед тем как сжимать проверяем время последнего изменения, затем сравниваем хеш:

.pipe(changed(dir.output + '/images', {
            hasChanged: changed.compareLastModifiedTime
        }))
        .pipe(changed(dir.output + '/images', {
            hasChanged: changed.compareContents
        }))

Можно спрайтами, у меня дыма готового нет, но есть свеча для примера:

Проходим циклом по каждому блоку со слайдером, находим в нем нужные элементы и инициализируем:

Можно использовать синхронные слайды:

AOS

А почему нет? Это по сути те же самые модальные окна, которых на сайтах полно. Вот если вы решите весь сайт реализовать с кучей информации, то это может быть проблема из-за большого кол-ва информации, которая будет долго грузится.

Подскажите в какую сторону вообще копать.
В сторону LocalStorage, sessionStorage или cookie

Примерно так: