Как реализовать плавную смену фоновых изображений?
Лучше сделать не смену фона у одного блока, а несколько блоков, каждый с уникальным фоном. А скрытие и отображение блоков сделать через плавную смену opacity.
Типа так: <section id="slider">
  <div class="slider__item" style="background-image: url("../slider/img/intro-slide-1.jpg"); opacity: 0">
  <div class="slider__item" style="background-image: url("../slider/img/intro-slide-2.jpg"); opacity: 1">
  <div class="slider__item" style="background-image: url("../slider/img/intro-slide-3.jpg"); opacity: 0">
  ...прочее содержимое
</section>
Каким образом вы хотите сделать смену слайдов?