Чистый JS Цветной слайдер - PullRequest
Новая
       27

Чистый JS Цветной слайдер

0 голосов
/ 06 марта 2019

У меня есть слайдер с .images class , а также previous- и next-button .

Я определил цвета в JavaScript следующим образом: 

let colors = ['red', 'green',];

В настоящее время, когда я нажимаю следующую кнопку, отображается красный цвет.(Функция ниже). 

function nextSlide() {
  container.style.backgroundColor = colors[0];

Я хотел бы выполнить следующее: Когда вы нажимаете следующую кнопку, она всегда будет отображать следующий цвет из массива let colors (или любой другой способ определения цветов).называется).Наоборот, когда вы нажимаете предыдущую кнопку, ползунок должен показывать предыдущий цвет из массива .

Вы можете найти полный исходный код ниже.

const nextBtn = document.querySelector('.nextBtn');
const prevBtn = document.querySelector('.prevBtn');
const container = document.querySelector('.images');

let colors = ['red', 'blue',];

nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);

function nextSlide() {
  container.style.backgroundColor = colors[0];
}

function prevSlide() {
  container.style.backgroundColor = colors[1];
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightblue;
}
.images {
  background-color: #4047c9;
  flex: 0 0 80%;
  min-height: 70vh;
  border-radius: 10px;
  position: relative;
}
.btn {
  display: inline-block;
  background: white;
  color: black;
  padding: 10px;
  border: none;
  cursor: pointer;
}
.prevBtn {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.nextBtn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  -webkit-transform: translate(50%, -50%);
  -moz-transform: translate(50%, -50%);
  -ms-transform: translate(50%, -50%);
}

.btn:active {
  background-color: grey;
  color: white;
}

.btn:hover {
  background-color: grey;
  color: white;
}
  <div class="images">
    <button type="button" class="btn prevBtn">Prev Btn</button>
    <button type="button" class="btn nextBtn">Next Btn</button>
  </div>

Ответы [ 4 ]

2 голосов
/ 06 марта 2019 
const nextBtn = document.querySelector('.nextBtn');
const prevBtn = document.querySelector('.prevBtn');
const container = document.querySelector('.images');

let colors = ['red', 'blue',];

let index = 0;

nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);

function nextSlide() {
  container.style.backgroundColor = colors[index];
  if(index <= colors.length){
    index++;
  }else{
    index = 0;
  }
}

function prevSlide() {
  container.style.backgroundColor = colors[index];
  if(index <= colors.length){
    index--;
  }else{
    index = 0;
  }
}




<div class="images">
    <button type="button" class="btn prevBtn">Prev Btn</button>
    <button type="button" class="btn nextBtn">Next Btn</button>
  </div>
1 голос
/ 06 марта 2019

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

slideslength + currentslidenumber + directions %(modulus) slidelength

Ниже приведен пример. 

const nextBtn = document.querySelector('.nextBtn');
const prevBtn = document.querySelector('.prevBtn');
const container = document.querySelector('.images');

let colors = ['red', 'green', 'blue',];
let currentSlide = 0;

function updateSlide(direction) {
  currentSlide = 
    (colors.length + currentSlide + direction)
    % colors.length;
  container.style.backgroundColor = colors[currentSlide];
}

updateSlide(0);

nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);

function nextSlide() {
  updateSlide(+1);
}

function prevSlide() {
  updateSlide(-1);
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightblue;
}

.images {
  background-color: #4047c9;
  flex: 0 0 80%;
  min-height: 70vh;
  border-radius: 10px;
  position: relative;
}

.btn {
  display: inline-block;
  background: white;
  color: black;
  padding: 10px;
  border: none;
  cursor: pointer;
}

.prevBtn {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
}

.nextBtn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
}

.btn:active {
  background-color: grey;
  color: white;
}

.btn:hover {
  background-color: grey;
  color: white;
}
<div class="images">
    <button type="button" class="btn prevBtn">Prev Btn</button>
    <button type="button" class="btn nextBtn">Next Btn</button>
  </div>
1 голос
/ 06 марта 2019

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

const nextBtn = document.querySelector('.nextBtn');
const prevBtn = document.querySelector('.prevBtn');
const container = document.querySelector('.images');

let colors = ['red', 'blue','green','yellow'];

nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);
var i=0;
function nextSlide() {
if(i>=colors.length-1)
i=0;
if(i<0)
i=colors.length-1;
  container.style.backgroundColor = colors[i++];

}

function prevSlide() {
if(i>=colors.length-1)
i=0;
if(i<0)
i=colors.length-1;
  container.style.backgroundColor = colors[i--];
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightblue;
}

.images {
  background-color: #4047c9;
  flex: 0 0 80%;
  min-height: 70vh;
  border-radius: 10px;
  position: relative;
}

.btn {
  display: inline-block;
  background: white;
  color: black;
  padding: 10px;
  border: none;
  cursor: pointer;
}

.prevBtn {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
}

.nextBtn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
}

.btn:active {
  background-color: grey;
  color: white;
}

.btn:hover {
  background-color: grey;
  color: white;
}
<div class="images">
    <button type="button" class="btn prevBtn">Prev Btn</button>
    <button type="button" class="btn nextBtn">Next Btn</button>
  </div>
0 голосов
/ 06 марта 2019

Вы почти у цели, просто введите index для сохранения текущей позиции вашего цветового массива: 

const nextBtn = document.querySelector('.nextBtn');
const prevBtn = document.querySelector('.prevBtn');
const container = document.querySelector('.images');

let colors = ['red', 'blue', 'yellow', 'green'];
let index = 0;
let length = colors.length;

nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);

function changeColor() {
  container.style.backgroundColor = colors[index];
}

function nextSlide() {
 if(index == length - 1){
   index = 0;
 }else{
   index++;
 }
 changeColor();
}

function prevSlide() {
  if(index == 0){
    index = length - 1;
  }else {
    index--;
  }
  changeColor();
}
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightblue;
}

.images {
  background-color: #4047c9;
  flex: 0 0 80%;
  min-height: 70vh;
  border-radius: 10px;
  position: relative;
}

.btn {
  display: inline-block;
  background: white;
  color: black;
  padding: 10px;
  border: none;
  cursor: pointer;
}

.prevBtn {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
}

.nextBtn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
}

.btn:active {
  background-color: grey;
  color: white;
}

.btn:hover {
  background-color: grey;
  color: white;
}
<div class="images">
    <button type="button" class="btn prevBtn">Prev Btn</button>
    <button type="button" class="btn nextBtn">Next Btn</button>
  </div>
...