Показать сообщение отдельно
  #1 (permalink)  
Старый 18.02.2020, 11:49
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 204

Как доработать скрипт?
Здравствуйте. Помогите, пожалуйста, дописать функцию, чтобы кроме нажатия вперед/назад (навигации) слайдер мог и автоматически переключаться. Спасибо!
<style>
#slider {
  position: relative;
  overflow: hidden;
  width: 400px;
  height: 200px;
  margin-bottom: 10px;
}

#items img {
  float: left;
  width: 400px;
  height: 200px;
}
</style>
<div id="slider">
  <div id="items">
    <img src="https://cdn.jdpower.com/Models/400x200/2018-McLaren-570S.jpg" />
    <img src="https://cdn.iseecars.com/image2/w450/16564.jpg" />
    <img src="https://www.theautochannel.com/db/as_images/17876.jpg" />
    <img src="https://www.rrtuningclub.ru/media/k2/items/cache/d6c28c6582af8287b0eef478e4a8f548_M.jpg" />
  </div>
</div>
<button id="prev">Назад</button>
<button id="next">Вперед</button>
[JS]
var count_elements = 4,
  current_element = 0,
  width = 400,
  height = 200,
  duration = 500;
var screen = $('#items');
screen.width(width * count_elements);
function move_screen(x) {
  current_element = (current_element + x) % count_elements;
  if (current_element < 0) {
    current_element += count_elements;
  }
  //console.log(current_element);
  screen.animate({
    marginLeft: -width * current_element
  }, duration);
}
$("#prev").click(function() {
  move_screen(-1);
})
$("#next").click(function() {
  move_screen(1);
})
[/JS]
Ответить с цитированием