Использование jQuery для изменения фонового изображения элемента не работает с Фиксированным вложением фона

Question

У меня тут странная проблема, в основном я просто хочу сделать слайдер, у каждого элемента слайдера есть внутренний дочерний элемент с именем slider-background, он содержит data-sr c пользовательский атрибут url / path изображения, который я затем использую jQuery чтобы изменить фоновое изображение каждого ползунка на значение атрибута "data-sr c" каждого из них.

Раньше все работало нормально, после того как я изменил css тем не менее, это действует странно, я использую background-attachment fixed, так что похоже, что ползунок-фон не прокручивается при прокрутке пользователя, хороший эффект, но я помещаю их все на слайдер. Я помещаю background-свойство на сторону css и динамически изменяю изображение только через jquery, и все, что я получаю, это просто пустой серый (фон по умолчанию), когда я использую "Fixed", однако, когда я использую любое приложение-фон, другое чем «Исправлено», фон изображения отображается корректно. Почему это так?

Я делал то же самое, используя тот же крошечный слайдер, но с vanilla js, и это нормально, тот же принцип, но этот, новый проект, который должен использовать jQuery , это просто пусто.

Пожалуйста, помогите, см. коды ниже. Спасибо!

var app = function() {

  // change bg
  app.setDataBackground('.hero .slider-background')

  // methods
  setDataBackground: function(container) {
		if (jQuery(container).attr('data-src') != null) {
			jQuery(container).css('background-image', 'url('+jQuery(container).attr('data-src')+')')
		}
	}
}

.hero .slider .slider-background {
    width: 100%;
    height: 100vh;
    display: block;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

<div id="tns1-mw" class="tns-ovh">
<div class="tns-inner" id="tns1-iw"><div class="slider slider-hero  tns-slider tns-carousel tns-subpixel tns-calc tns-horizontal" id="tns1" style="transition-duration: 0s; transform: translate3d(-20%, 0px, 0px);"><div class="slider-item tns-item" aria-hidden="true" tabindex="-1">
			<div class="slider-background" data-src="../../images/placeholder-bg3.jpg" alt="" style="background-image: url(&quot;../../images/placeholder-bg3.jpg&quot;);"></div>
		</div>
		<div class="slider-item tns-item tns-slide-active" id="tns1-item0">
			<div class="slider-background" data-src="../../images/placeholder-bg1.jpg" alt="" style="background-image: url(&quot;../../images/placeholder-bg1.jpg&quot;);"></div>
		</div>
		<div class="slider-item tns-item" id="tns1-item1" aria-hidden="true" tabindex="-1">
			<div class="slider-background" data-src="../../images/placeholder-bg2.jpg" alt="" style="background-image: url(&quot;../../images/placeholder-bg2.jpg&quot;);"></div>
		</div>
		<div class="slider-item tns-item" id="tns1-item2" aria-hidden="true" tabindex="-1">
			<div class="slider-background" data-src="../../images/placeholder-bg3.jpg" alt="" style="background-image: url(&quot;../../images/placeholder-bg3.jpg&quot;);"></div>
		</div>
	<div class="slider-item tns-item" aria-hidden="true" tabindex="-1">
			<div class="slider-background" data-src="../../images/placeholder-bg1.jpg" alt="" style="background-image: url(&quot;../../images/placeholder-bg1.jpg&quot;);"></div>
		</div></div></div></div>

Answer 1

Было несколько проблем с вашим кодом.

• В примере кода не было .hero класса, на который вы указали в javascript и css. Я добавил, что html обертка.

• У изображений был относительный путь, который не будет работать, для демо-версии его заменили абсолютными URL.

• рефакторинг javascript, так как есть несколько slider-background, нам нужно проверить каждый из них и использовать значение атрибута данных в нем для стиля.

Запустите фрагмент кода ниже, чтобы увидеть это в действии.

// setup closure and create app object
var app = (function($) {
  var module = {};

  // expose functions as methods
  module.setDataBackground = setDataBackground;

  function setDataBackground(container) {
    const $container = $(container);
    $container.each(function() {
      const imageAttr = $(this).data('src');
      if (imageAttr) {
        $(this).css('background-image', `url(${imageAttr})`);
      }
    });
  }

  // return final object
  return module;
})(jQuery);

// change bg
app.setDataBackground('.hero .slider-background');

.hero .slider .slider-background {
  width: 100%;
  height: 100vh;
  display: block;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hero">
  <div id="tns1-mw" class="tns-ovh">
    <div class="tns-inner" id="tns1-iw">
      <div class="slider slider-hero  tns-slider tns-carousel tns-subpixel tns-calc tns-horizontal" id="tns1" style="transition-duration: 0s; transform: translate3d(-20%, 0px, 0px);">
        <div class="slider-item tns-item" aria-hidden="true" tabindex="-1">
          <div class="slider-background" data-src="https://placeimg.com/480/360/animals"></div>
        </div>
        <div class="slider-item tns-item tns-slide-active" id="tns1-item0">
          <div class="slider-background" data-src="https://placeimg.com/480/360/arch"></div>
        </div>
        <div class="slider-item tns-item" id="tns1-item1" aria-hidden="true" tabindex="-1">
          <div class="slider-background" data-src="https://placeimg.com/480/360/nature"></div>
        </div>
        <div class="slider-item tns-item" id="tns1-item2" aria-hidden="true" tabindex="-1">
          <div class="slider-background" data-src="https://placeimg.com/480/360/people"></div>
        </div>
        <div class="slider-item tns-item" aria-hidden="true" tabindex="-1">
          <div class="slider-background" data-src="https://placeimg.com/480/360/tech"></div>
        </div>
      </div>
    </div>
  </div>
</div>