Cannot read property CSS undefined

Question

I'm trying to figure out why the code I'm currently working on produces an error

Cannot read property css underfined.

Currently using jQuery 3.3.1. Not sure if the .css is deprecated. Can't seem to find a workaround it

(function($) {
  'use strict';

  var Slider = {
    init: function() {
      this.$sliderBanner = $('.slider-banner');
      this.$sliderItemsWrapper = $('.slider-items', this.$sliderBanner);
      this.$slides = $('.slides', this.$sliderItemsWrapper);
      this.$sliderButtons = $('.arrow', this.$sliderBanner);
      this.slideCount = $('.slides', this.$sliderItemsWrapper).length;

      this.sliderBannerWidth = $(this.$sliderBanner).width();
      this.$setSliderWrapperWidth = $(this.$sliderItemsWrapper).width(this.sliderBannerWidth * this.slideCount);

      this.$slides.width(this.sliderBannerWidth);
      this.bindButtons();

      // $('.-next').on('click', function() {
      //     console.log('test');
      // })
    },

    bindButtons: function() {
      var position = 0;

      $('.arrow.-next').on('click', function() {
        // console.log('slide next');
        var that = this;

        position++;
        if (position == -1) {
          position = that.slideCount - 1;
        }
        console.log('test');
        that.$sliderItemsWrapper.css('left', -(that.sliderBannerWidth * position));
      });
    }
  };

  $(document).ready(function() {
    Slider.init();
  });
})(jQuery);

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<div class="slider-banner">
  <a href="#" class="arrow -prev">prev</a>
  <a href="#" class="arrow -next">next</a>
  <div class="slider-items">
    <div class="slides">
      <div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">
      </div>
    </div>
    <div class="slides">
      <div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">
      </div>
    </div>
    <div class="slides">
      <div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">
      </div>
    </div>
  </div>
  <div class="banner-detail">
    <h2 class="preamble-heading" data-preamble="Test Preamble">Sample Page</h2>
  </div>
</div>

.css is not deprecated, it's likely that $sliderItemsWrapper is not returning a valid HTML element — ESR
– ESR, Commented Jul 16, 2018 at 5:47

Nandita Sharma · Accepted Answer · 2018-07-16 05:47:13Z

Move var that = this; outside of the click function.

(function($) {
  'use strict';

  var Slider = {

    init: function() {

      this.$sliderBanner = $('.slider-banner');
      this.$sliderItemsWrapper = $('.slider-items', this.$sliderBanner);
      this.$slides = $('.slides', this.$sliderItemsWrapper);
      this.$sliderButtons = $('.arrow', this.$sliderBanner);
      this.slideCount = $('.slides', this.$sliderItemsWrapper).length;

      this.sliderBannerWidth = $(this.$sliderBanner).width();
      this.$setSliderWrapperWidth = $(this.$sliderItemsWrapper).width(this.sliderBannerWidth * this.slideCount);

      this.$slides.width(this.sliderBannerWidth);
      this.bindButtons();

      // $('.-next').on('click', function() {
      //     console.log('test');
      // })

    },

    bindButtons: function() {
      var position = 0;
      var that = this;
      $('.arrow.-next').on('click', function() {
        // console.log('slide next');


        position++;
        if (position == -1) {
          position = that.slideCount - 1;
        }
        console.log('test');
        that.$sliderItemsWrapper.css('left', -(that.sliderBannerWidth * position));

      });

    }

  };

  $(document).ready(function() {

    Slider.init();
  });

})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider-banner">
  <a href="#" class="arrow -prev">prev</a>
  <a href="#" class="arrow -next">next</a>
  <div class="slider-items">

    <div class="slides">
      <div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">

      </div>
    </div>

    <div class="slides">
      <div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">

      </div>
    </div>

    <div class="slides">
      <div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">

      </div>
    </div>
  </div>

  <div class="banner-detail">
    <h2 class="preamble-heading" data-preamble="Test Preamble">Sample Page</h2>
  </div>
</div>

Collectives™ on Stack Overflow

Cannot read property CSS undefined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related