JavaScript не может прочитать свойство ширины не определен - JQuery Carosuel

Question

Я пытаюсь создать ползунок карусельного изображения JQuery из серии видео из следующей ссылки:

https://www.youtube.com/watch?v=_P6q_8Sl-2A&ebc=ANyPxKqDGAmBgoSaWtZMWGzonKyyHzMXQO0WTAkL52qm-OaTNSSX6ceOdkAAvN4sZM2eCGbmz2LULZAMFx6-hFGhLTF3sEK5jg#t=14.184853

Ниже то, что я пытаюсь достижения:

на данный момент я не совсем закончил серию, но я получаю эту ошибку не может читать недвижимость 'width' undefined в расширенном скрипте Carosuel.js, показанном ниже, но у меня есть ощущение, что это будет одинаково для высоты.

advanceCarosuel.js

(function($) { 

var defaults = {     // Default object settings  

    waitTime: 400     // Option waitTime 

} 

// Advanced Slider function 
function lsAdvancedSlider(element, settings) 
{ 

    this.options = {};    // Options object 
    this.element = element;  // Access this element 
    this.carouselOuter = this.element; 

    // Overwritting the default settings widthout modifying the original 
    $.extend(this.options, defaults, settings); 

    // Defining option variables to be accessing anywhere 
    this.autoSlide = this.options.autoSlide; 
    this.carouselInner = $(this.options.carouselInner); 
    this.sliderWrapper = $(this.options.sliderWrapper); 
    this.leftTransparent = $(this.options.leftTransparentElement); 
    this.rightTransparent = $(this.options.rightTransparentElement); 

    this.transparentWidth = this.rightTransparent.width(); 
    this.customHeight = this.options.customHeight; 
    this.carouselItem = this.options.carouselItem; 

    // Calculate the width of a single image 
    this.singleImageWidth = this.carouselOuter.width() - 
     //**Error occurs here** 
     (this.leftTransparentElement.width() + 
      this.rightTransparentElement.width()); 

    this.leftLink = $(this.options.leftLink); 
    this.rightLink = $(this.options.rightLink); 

    this.scrollButtonsContainer = $(this.options.scrollButtonsContainer); 
    this.scrollButtonItems = this.options.scrollButtonItems; 

    // initailise the function 
    this.init(); 

} 

// All instances of our plugin with be instaniated in this function to save space 
lsAdvancedSlider.prototype.init = function() 
{ 

    // Refer to parent init 
    var parent = this, 

    // Length of images 
    numberOfImages = $(parent.carouselItem).length; 

    // Set all the images 
    $(parent.carouselItem).width(parent.singleImageWidth); 

    // Setting the width sliderWrapper 
    parent.sliderWrapper.width(numberOfImages * parent.singleImageWidth); 

    // Setting the carosuelInner height and singleImage width 
    parent.carosuelInner.height(parent.customHeight).width(parent.singleImageWidth); 

    // Setting the height of the left transparent element 
    parent.leftTransparentElement.height(parent.customHeight); 

    // Setting the height of the right transparent element 
    parent.rightTransparentElement.height(parent.customHeight); 

    // Setting the height of the images 
    $(parent.carouselItem).height(parent.customHeight); 

} 

// Define advanced Carousel function to call the plugin 
$.fn.advancedCarousel = function(setting) 
{ 

    // cache in $this function 
    var $this = this; 

    // Call advanced function options passed by other user 
    new lsAdvancedSlider($this, setting); 

    return $this; 

} 


}) (jQuery); 

app.js скрипт вызвать плагин и переходящие в некоторых вариантах, как показано ниже:

app.js

(function($) { 

$(document).ready(function() { 

    // Call our plugin function 
    $(".carousel-outer").advancedCarousel({ 

    // Passing in options 
    waitTime: 2000, 
    carouselInner: ".carousel-inner", 
    sliderWrapper: ".slider-wrapper", 
    leftTransparentElement: ".left-transparent", 
    rightTransparentElement: ".right-transparent", 
    carouselItem: ".carousel-item", 
    customHeight: 500, 
    leftLink: ".leftLink", 
    rightLink: ".rightLink", 
    scrollButtonsContainer: ".scroll-buttons", 
    scrollButtonItems: ".scroll-items", 
    autoSlide: true 

    }); 

}); 

}) (jQuery); 

Любые идеи или предложения, чтобы решить эту проблему, будут оценены.

Answer 1

Ух! Может быть, потому что этот элемент не определен?

Когда вы получаете такие ошибки пытаются иметь правильную реакцию:

1. мой элемент определен? зарегистрируйтесь!
2. где должно быть определено? (здесь: in $ (...))
3. Определены ли параметры? запишите их! (здесь «this.options»)
4. действительно ли параметры правильные? (Здесь: есть тег в вашем HTML с правильным именем класса?)
5. .. снова и снова, пока, наконец, не найти что-то