Заготовка для слайдера

by yoowordpress

HTML

<div CLASS="wpp-slide-wrapper">
  <div class="wpp-slide-arrows wpp-arrow-left"></div>
  <ul class="wpp-slide-wrap-list">
    <li class="wpp-slider-slide"><img src="//via.placeholder.com/350x150" alt="1" class="slide-img"></li>
    <li class="wpp-slider-slide"><img src="//via.placeholder.com/350x150" alt="2" class="slide-img"></li>
    <li class="wpp-slider-slide"><img src="//via.placeholder.com/350x150" alt="3" class="slide-img"></li>
    <li class="wpp-slider-slide"><img src="//via.placeholder.com/350x150" alt="4" class="slide-img"></li>
  </ul>
  <div class="wpp-slide-arrows wpp-arrow-right"></div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

.wpp-slide-wrapper {
  width: 100%;
  overflow: hidden;
      position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.wpp-slide-wrap-list {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wpp-slider-slide {
  float: left;
  display: block;
  border-collapse: collapse;
}

.wpp-slide-arrows {
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    background-color: red;
    opacity:0;
}

.wpp-arrow-right {
    right: 0;
}

.wpp-slide-arrows:hover{
  opacity:1;
}

JavaScript

jQuery(document).ready(function($) {

  /**
   * Получение первоначальной ширины контейнеров со слайдами
   */
  $('.wpp-slide-wrap-list').each(function() {
    var $width = 0;
    $(this).find('.wpp-slider-slide').each(function() {
      $width = $(this).width() + $width;
    });

    $(this).width($width);
  });
  
  
});