0

В общем, вот код адаптивного слайдера, но никак не могу подключить javascript, помогите.

 window.onload = function() {
    //Слайдер сантехники
    document.getElementById("slider_right").onclick = slidrerRight;
    var a = 0

    function slidrerRight() {
      var polosa = document.getElementById("items");
      a = a - 955;
      if (a < -2865) {
        a = 0
      }
      polosa.style.left = a + "px";

    }
    document.getElementById("slider_left").onclick = sliderLeft;

    function sliderLeft() {
      var polosa = document.getElementById('items');
      a = a + 955;
      if (a > 0) {
        a = -2865
      }
      polosa.style.left = a + 'px';
    }
  }

//Это JavaScript для этого слайдера, но там я вообще ничего не понимаю.

var d = document;
var wrap = d.querySelector('.wrap');
var items = d.querySelector('.items');
var itemCount = d.querySelectorAll('.item').length;
var scroller = d.querySelector('.scroller');
var pos = 0;
var transform = Modernizr.prefixed('transform');

function setTransform() {
  items.style[transform] = 'translate3d(' + (-pos *
    items.offsetWidth) + 'px,0,0)';
}

function prev() {
  pos = Math.max(pos - 1, 0);
  setTransform();
}

function next() {
  pos = Math.min(pos + 1, itemCount - 1);
  setTransform();
}
window.addEventListener('resize', setTransform);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrap {
  display: flex;
  align-items: stretch;
  width: 65%;
  margin: auto;
  flex-direction: column;
}

button {
  width: 30px;
  border: none;
  background: transparent;
  /*прозрачность*/
  font-size: 40px;
  text-align: center;
  outline: none;
  opacity: 0.5;
  transition: opacity 300ms ease-out;
  cursor: pointer;
}

button:hover {
  opacity: 1;
}

.slider {
  display: flex;
  flex-direction: row;
  /**/
}

.scroller {
  flex: 1;
  overflow: hidden;
}

.items {
  list-style-type: none;
  white-space: nowrap;
  transition: transform 1s ease-in-out;
}

.item {
  padding: 30px 20px;
  display: inline-block;
  width: 100%;
  height: 570px;
  background-size: cover;
  background-position: 50% 50%;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
<section id="galary" name="galary">
  <div class="galar">
    <span>Галерея наших работ</span>
  </div>
  <div class="wrap">
    <div class="slider">
      <button onclick="prev()">&laquo;</button>
      <div class="scroller">
        <ul class="items">
          <li class="item" style="background-image: url(туалет.jpg)"></li>
          <li class="item" style="background-image: url(раковина.jpg)"></li>
          <li class="item" style="background-image: url(душ.jpg)"></li>
          <li class="item" style="background-image: url(ванна.jpg)"></li>
        </ul>
      </div>
      <button onclick="next()">&raquo;</button>
    </div>
  </div>
</section>

20
  • Что значит "подключить javascript"? Вам просто какой-нибудь javascript подключить или вы какую-то конкретную задачу хотите решить тем, что подключаете?
    – A K
    18 апр 2018 в 10:18
  • у меня, сайт визитка так сказать и там у меня слайдер, я смог сделать его адаптивным но кнопки подключить вообще не знаю как
    – user302628
    18 апр 2018 в 10:23
  • Так вам css не удаётся подключить или javascript. Какие такие кнопки не подключаются и какой плагин использовали, явно же не сами слайдер писали? :-D
    – Quazimorda
    18 апр 2018 в 10:26
  • 1
    Вы учили javascript? Разбирались как работают слайдеры? Вот например статья - попробуйте прочитать, понять механику и сделать по аналогии.
    – A K
    18 апр 2018 в 11:04
  • 2
    @Максим, Java это совсем НЕ JavaScript
    – Grundy
    18 апр 2018 в 11:40

1 ответ 1

1

Код для слайдера хорошо работает. Главное вставить его перед закрывающим тегом body, чтобы все используемые элементы уже были доступны.

Небольшая неточность будет с расчетом того, на сколько надо будет сдвинуть текущий слайд.

Расчет следующий:

items.style[transform] = 'translate3d(' + (-pos * items.offsetWidth) + 'px,0,0)';

то есть, список слайдов сдвигается на ширину просмотренных слайдов, это будет работать корректно, только если между слайдами не будет пустого места, иначе надо будет корректировать расчеты.

Плюс, в примере используется библиотека Modernizr, которая в данном случае нужна для получения имени свойства стиля для transform.

Вместо него можно просто использовать строку 'transform'.

Пример:

var d = document;
var wrap = d.querySelector('.wrap');
var items = d.querySelector('.items');
var itemCount = d.querySelectorAll('.item').length;
var scroller = d.querySelector('.scroller');
var pos = 0;
// var transform = Modernizr.prefixed('transform');

function setTransform() {
  items.style['transform'] = 'translate3d(' + (-pos *
    (items.offsetWidth + 3)) + 'px,0,0)';
}

function prev() {
  pos = Math.max(pos - 1, 0);
  setTransform();
}

function next() {
  pos = Math.min(pos + 1, itemCount - 1);
  setTransform();
}
window.addEventListener('resize', setTransform);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrap {
  display: flex;
  align-items: stretch;
  width: 65%;
  margin: auto;
  flex-direction: column;
}

button {
  width: 30px;
  border: none;
  background: transparent;
  /*прозрачность*/
  font-size: 40px;
  text-align: center;
  outline: none;
  opacity: 0.5;
  transition: opacity 300ms ease-out;
  cursor: pointer;
}

button:hover {
  opacity: 1;
}

.slider {
  display: flex;
  flex-direction: row;
  /**/
}

.scroller {
  flex: 1;
  overflow: hidden;
}

.items {
  list-style-type: none;
  white-space: nowrap;
  transition: transform 1s ease-in-out;
}

.item {
  display: inline-block;
  width: 100%;
  height: 570px;
  background-size: cover;
  background-position: 50% 50%;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
<section id="galary" name="galary">
  <div class="galar">
    <span>Галерея наших работ</span>
  </div>
  <div class="wrap">
    <div class="slider">
      <button onclick="prev()">&laquo;</button>
      <div class="scroller">
        <ul class="items">
          <li class="item" style="background-image: url('https://cdn.worldvectorlogo.com/logos/css-3.svg')"></li>
          <li class="item" style="background-image: url('https://cdn.worldvectorlogo.com/logos/css-3.svg')"></li>
          <li class="item" style="background-image: url('https://cdn.worldvectorlogo.com/logos/css-3.svg')"></li>
          <li class="item" style="background-image: url('https://cdn.worldvectorlogo.com/logos/css-3.svg')"></li>
        </ul>
      </div>
      <button onclick="next()">&raquo;</button>
    </div>
  </div>
</section>

6
  • Спасибо Вам огромнейшее, очень хороший сайт и люди, спасибо еще раз. Есть еще такой вопрос, а как сделать так, чтобы когда долистываешь до конца нажав кнопку еще раз возвращаешься к первому
    – user302628
    18 апр 2018 в 12:20
  • И можно ли как-то сделать так , когда я уменьшаю страницу, чтобы картинки уменьшались и по высоте тоже, а то все такое тонкое
    – user302628
    18 апр 2018 в 12:32
  • @Максим, нажав кнопку еще раз возвращаешься к первому - для этого добавь условие в функции prev и next. pos - это номер текущего слайда, itemCount - это сколько всего слайдов. Определяешь что показывается последний слайд и присваиваешь переменной pos значение 0
    – Grundy
    18 апр 2018 в 12:35
  • @Максим, когда я уменьшаю страницу, чтобы картинки уменьшались и по высоте тоже - здесь смотри что у тебя в css. Сейчас у тебя высота у .item жестко задана - 570px.
    – Grundy
    18 апр 2018 в 12:36
  • в css это я менял, но если я ставлю к примеру height;auto то пропадает слайдер
    – user302628
    18 апр 2018 в 14:05

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.