JavaScript ne peut pas lire la largeur de la propriété de non définie - jQuery Carosuel

Question

Je cherche à créer un curseur d'image carrousel jQuery à partir d'une série de vidéos sur le lien ci-dessous:

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

est en dessous de ce que je suis en train de atteins:

le moment, je ne l'ai pas tout à fait terminé la série mais je reçois cette erreur ne peut pas lire la propriété 'width' de non défini dans le script advancedCarosuel.js montré ci-dessous mais j'ai le sentiment que ce sera la même chose pour la hauteur.

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); 

Le script app.js appelle le plug-in et en passant dans certaines options comme indiqué ci-dessous:

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); 

Toutes les idées ou suggestions pour résoudre ce problème seront appréciées.

Answer 1

Uh! Peut-être parce que cet élément n'est pas défini?

Lorsque vous obtenez une telle erreur essayer d'avoir la bonne réaction:

1. est mon élément défini? connectez-vous!
2. où aurait dû être défini? (ici: en $ (...))
3. Est-ce que les paramètres sont définis? connectez-les! (ici "this.options")
4. Est-ce que les paramètres sont corrects? (Ici: est-il une balise dans votre code html avec le nom de la classe correcte?)
5. .. encore et encore jusqu'à ce que vous trouverez enfin quelque chose