0

I got a weird issue here, basically I just want to make a slider, each slider-item has inner child named slider-background, it contains data-src custom attribute of image's url / path that then I use jQuery to change the background-image of each slider-background to be from the value of "data-src" attribute on each of them.

It works just fine earlier, after I change the css tho, it acts weirdly, I use background-attachment fixed so it looks like the slider-background are not scrolled when user scrolling over, a nice effect, but I put all of them on a slider. I put the background-property on css side and only changing the image dynamically via jquery and all I got is just a blank gray (default background) when I use "Fixed", however when I use any background-attachment other than "Fixed" the image background is displayed correctly. Why is that?

I was doing the same thing, using the same tiny-slider but with vanilla js and it's fine, same principal, but this one, a new project that needs to use jQuery, it just blank.

Please help, see the codes below. Thank you!

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>
Hernanda
  • 57
  • 7

1 Answers1

0

There were few issues with your code.

  • sample code was missing .hero class which you were targeting in your javascript and css. I added that html wrapper.

  • The images had relative path which won't work, for demo replaced that with absolute URLs.

  • refactored the javascript, as there are multiple slider-background we need to check each one and use the data attribute value in it for styling.

Run the code snippet below to see it in action.

// 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>
Ashish Patel
  • 442
  • 3
  • 8