我正试图找出我目前正在处理的代码为什么会产生错误。
无法读取属性css underlined。
当前正在使用
jQuery 3.3.1
. 不确定是否
.css
已弃用。似乎找不到解决办法
(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>
