How to pass an object as an argument and reference it inside a constructor

Question

I have created a class for my custom slider and currently I am just passing one argument to the constructor which is the slider element. Everything is working at the moment nicely, I have managed to get 2 instances of the slider running without any issues.

What i would like to achieve is to be able to pass a second argument to the constructor which will be an object containing so custom properties to add to the slider slide i.e transition speed, transition duration and whatever other things i decide on.

An example object to pass

animation {
 transition-duration: 1s,
 transition-property: transform
}

let mySlider1 = new Slider('.slider--1', {
  animation {
   transition-duration: 1s,
   transition-property: transform
}
});

Im just not too sure how to go about referencing this in my constructor. This is just a custom project for myself learning object oriented programming.

This is my current constructor

class Slider {
    constructor(slider, myNewCustomObject) {
        this.slider = document.querySelector(slider);
        this.slide = this.slider.querySelectorAll('.slider--slide');
        this.prevSlide = this.slider.querySelector('.slider--btn--prev');
        this.nextSlide = this.slider.querySelector('.slider--btn--next');
        this.isAnimating = false;
        this.currentSlide = 0;
        this.prevSlide.addEventListener('click', () => {
            this.slidePrev();
        });
        this.nextSlide.addEventListener('click', () => {
            this.slideNext();
        });
    }
    resetSlides() {
        this.slide.forEach(venue => {
            venue.style.zIndex = '';
            this.slide[this.currentSlide].style.zIndex = '1';
        });
        this.slide[this.currentSlide].classList.remove('active');
        this.slide[this.currentSlide].classList.remove('slideLeft');
        this.slide[this.currentSlide].classList.remove('slideRight');
    }
    slidePrev() {
        if (this.isAnimating) {
            return;
        } else {
            this.resetSlides();
            if (this.currentSlide === 0) {
                this.currentSlide = this.slide.length - 1;
            } else {
                this.currentSlide--;
            }
            this.slide[this.currentSlide].classList.add('active');
            this.slide[this.currentSlide].classList.add('slideLeft');

            setTimeout(function () {
                this.isAnimating = false;
            }, 1100);
        }
    }
    slideNext() {
        if (this.isAnimating) {
            return;
        } else {
            this.resetSlides();
            if (this.currentSlide === this.slide.length - 1) {
                this.currentSlide = 0;
            } else {
                this.currentSlide++;
            }
            this.slide[this.currentSlide].classList.add('active');
            this.slide[this.currentSlide].classList.add('slideRight');

            setTimeout(function () {
                this.isAnimating = false;
            }, 1100);
        }
    }
}

let mySlider1 = new Slider('.slider--1');
let mySlider2 = new Slider('.slider--2');

<div class="slider slider--1">
        <div class="slider--slide venue__img--1 active slideRight">
          <div class="slider--slide--info">
            <h2 class="heading__xlg heading--white venue__heading mb--xsm">Woodhall Manor</h2>
            <a href="#" class="btn--text btn--text--white mt--md venue__link">View this venue</a>
          </div>
        </div>
        <div class="slider--slide venue__img--2">
          <div class="slider--slide--info">
            <h2 class="heading__xlg heading--white venue__heading">Parklands Lodge</h2>
            <a href="#" class="btn--text btn--text--white mt--md venue__link">View this venue</a>
          </div>
        </div>
        <div class="slider--slide venue__img--3">
          <div class="slider--slide--info">
            <h2 class="heading__xlg heading--white venue__heading">Northbrook Hall</h2>
            <a href="#" class="btn--text btn--text--white mt--md venue__link">View this venue</a>
          </div>
        </div>
        <div class="slider--slide venue__img--4">
          <div class="slider--slide--info">
            <h2 class="heading__xlg heading--white venue__heading">Goodward House</h2>
            <a href="#" class="btn--text btn--text--white mt--md venue__link">View this venue</a>
          </div>
        </div>
        <div class="slider--slide venue__img--5">
          <div class="slider--slide--info">
            <h2 class="heading__xlg heading--white venue__heading">Buxted Park</h2>
            <a href="#" class="btn--text btn--text--white mt--md venue__link">View this venue</a>
          </div>
        </div>
        <div class="slider--btn slider--btn--prev"><svg class="fas fa-caret-left"></svg></div>
        <div class="slider--btn slider--btn--next"><svg class="fas fa-caret-right"></svg></div>
      </div>

 <div class="slider slider--2">
            <div class="slider--slide venue__img--1 active slideRight">
              <div class="slider--slide--info">
                <h2 class="heading__xlg heading--white venue__heading mb--xsm">Woodhall Manor</h2>
                <a href="#" class="btn--text btn--text--white mt--md venue__link">View this venue</a>
              </div>
            </div>
            <div class="slider--slide venue__img--2">
              <div class="slider--slide--info">
                <h2 class="heading__xlg heading--white venue__heading">Parklands Lodge</h2>
                <a href="#" class="btn--text btn--text--white mt--md venue__link">View this venue</a>
              </div>
            </div>
            <div class="slider--slide venue__img--3">
              <div class="slider--slide--info">
                <h2 class="heading__xlg heading--white venue__heading">Northbrook Hall</h2>
                <a href="#" class="btn--text btn--text--white mt--md venue__link">View this venue</a>
              </div>
            </div>
            <div class="slider--slide venue__img--4">
              <div class="slider--slide--info">
                <h2 class="heading__xlg heading--white venue__heading">Goodward House</h2>
                <a href="#" class="btn--text btn--text--white mt--md venue__link">View this venue</a>
              </div>
            </div>
            <div class="slider--slide venue__img--5">
              <div class="slider--slide--info">
                <h2 class="heading__xlg heading--white venue__heading">Buxted Park</h2>
                <a href="#" class="btn--text btn--text--white mt--md venue__link">View this venue</a>
              </div>
            </div>
            <div class="slider--btn slider--btn--prev"><svg class="fas fa-caret-left"></svg></div>
            <div class="slider--btn slider--btn--next"><svg class="fas fa-caret-right"></svg></div>
          </div>

Answer 1

In order to access the properties of other object you just do it normally using either Object.property or Object['property'].

This is what you are looking for I believe:

constructor(slider, myNewCustomObject) {
   // Initialisation code

  this.speed = myNewCustomObject.transitionSpeed

  //This is also fine
  this.speed = myNewCustomObject['transitionSpeed']

}

Answer 2

Create a new property just like you did with this.slider.

class Slider {
    constructor(slider, myNewCustomObject) {
      this.slider = document.querySelector(slider);
      ...
      this.myNewCustomObject = myNewCustomObject;
    }
    ...
}

Make sure your object has the correct syntax. Prevent from using hyphens as keys of properties unless you don't have any choice.

Now pass your object as the second parameter of the constructor.

const slider = new Slider('.slider', {
  animation: {
    transitionDuration: '1s',
    transitionProperty: 'transform'
  }
});

And access them with the following property keys outside of your instance, or with this inside of your instance.

slider.myNewCustomObject.animation.transitionDuration;
slider.myNewCustomObject.animation.transitionProperty;