Slider on jQuery

by yshrkn

HTML

<div class="slider" data-config='{ "itemMaxWidth": "300", "controller": { "visible": "true", "next": { "className": "slider__controller slider__controller--next", "charactor": ">" }, "back": { "className": "slider__controller slider__controller--back", "charactor": "<" } } }'>
  <ul class="slider__wrapper">
    <li class="slider__item"><a href="#"><img src="https://placehold.jp/500x300.png?text=silde_01" alt=""></a></li>
    <li class="slider__item"><a href="#"><img src="https://placehold.jp/500x300.png?text=silde_02" alt=""></a></li>
    <li class="slider__item"><a href="#"><img src="https://placehold.jp/500x300.png?text=silde_03" alt=""></a></li>
  </ul>
</div>

SCSS

.slider {
  position: relative;
  
  &__wrapper {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    justify-content: start;
  }
  
  &__item {
    // default max-width
    max-width: 300px;
    
    & + & { margin-left: 20px;}
    
    img {
      display: inline-block;
      width: 100%;
      height: auto;
    }
  }
}

JavaScript

$((function() {

  const SLIDER_CLASS_NAME = 'slider';
  const SLIDER_WRAPPER_CLASS_NAME = 'slider_wrapper';
  const SLIDER_ITEM_CLASS_NAME = 'slider__item';

  $.slider = class Slider {

    /**
     * 
     */
    constructor(customParams) {
      console.log('is running');
      this.jqueryMap = {
        $sliders: $(`.${SLIDER_CLASS_NAME}`),
        $sliderWrappers: $(`.${SLIDER_WRAPPER_CLASS_NAME}`),
        $sliderItems: $(`.${SLIDER_ITEM_CLASS_NAME}`),
      }

      this.params = {
        itemMaxWidth: 200,
        controller: {
          visible: true,
          next: {
            className: `slider__controller slider__controller--next`,
            charactor: '>',
          },
          back: {
            className: `slider__controller slider__controller--back`,
            charactor: '<',
          },
        },
      }

      // 引数をマージ
      if (customParams) {
        $.extend(true, this.params, customParams);
      }

      // 初期設定
      this.setInitialView();
    }

    /**
     * 
     */
    setInitialView() {
    	const that = this;
      this.jqueryMap.$sliders.each(function(index, elem) {
        that.addController(elem);
      });

      if (this.jqueryMap.$sliderItems.length) {
        this.jqueryMap.$sliderItems.css('maxWidth', this.params.itemMaxWidth);
      }
    }

    /**
     * コントローラーを表示
     */
    addController(target) {
      const that = this;
      const $target = $(target);
      $target.append(`<div class="${this.params.controller.next.className}">${this.params.controller.next.charactor}</div>`);
      $target.append(`<div class="${this.params.controller.back.className}">${this.params.controller.back.charactor}</div>`);

      // $(`.${this.params.controller.next.className}`).each(function(index, elem) {
      //   $(elem).css({
      //     'position': 'absolute',
      //     'top': '50%',
      //     'transform': 'translateY(-50%)',
      //   });
      // });
    }
  }

  const sliders = [];

  /**
   *
   */
 ...