0

Как можно сделать плавную замену слайдов? (пример слайдера на главной странице).

Какие параметры в css или действия в js отвечают за это? Интересует только эта часть слайдера.

Если здесь участвует javaScript,то попрошу уточнить это (и, тем более, если jQuery).

1 ответ 1

1

Эффект называется «карусель». Есть огромное количество реализаций, в т.ч. плагины к jQuery.

Не сложно сделать свой вариант, в т.ч. на чистом JS.

По событию для смены слайда (нажатию на кнопку, стрелку на клавиатуре, таймеру, ещё какому-то) надо, чтобы текущий слайд «уехал», а новый – «приехал».

Движение можно сделать двумя способами:

  • меняя часто-часто JS'ом положение картинки;
  • или CSS3 transitions – просто дать двум слайдам новое положение сразу, а анимация выполнится за счёт CSS3 инструкций. Пример:

var state = true,
    box = document.getElementById("box");
document.getElementById("tggl").addEventListener('click', function(e){
  if(state=!state) {
    box.className = "";
  } else {
    box.className = "right";
  }
});
#box {
  width: 50px;
  height: 50px;
  background-color: red;
  -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
  transition: width 2s, height 2s, background-color 2s, transform 2s;
}

.right {
  width: 90px !important;
  height: 30px !important;
  transform: translate(500px,0px) rotate(3deg);
}
  
<div id="box"></div>

<button type="button" id="tggl">Нажми меня</button>

4
  • Спасибо большое,а такой вопрос,смогу ли я это легко реализовать на чистом javaScript?Или придётся писать кучу кода?
    – Kardanx
    9 янв 2016 в 7:48
  • добавил в ответ.
    – Sergiks
    9 янв 2016 в 7:53
  • Я понял как это сделать,но есть ещё один небольшой вопрос как вы посоветуете сделать это "валидно"?Через какое позиционирование?Или это не имеет значение лишь бы мне было удобно,что в таком случае на счёт кросбраузерности? Я имею ввиду ваш первый вариант с JS.
    – Kardanx
    9 янв 2016 в 8:12
  • 3
    «валидно» – взять готовый плагин с репутацией и обновляемый.
    – Sergiks
    9 янв 2016 в 8:45

Ваш ответ

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

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