Сделайте точки активными на слайдере - PullRequest
Новая
       15

Сделайте точки активными на слайдере

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

У меня есть этот пример Slider, созданный с использованием чистого JS.

Слайдер работает отлично. Единственное, что осталось сделать, это активировать три точки, чтобы при открытии 1-го слайда активировалась 1-я точка, показывая цвет, отличный от других точек, и так далее. Кроме того, вы должны иметь возможность открывать правильный слайд при нажатии точек, поэтому 1-я точка открывает 1-й слайд, 2-я точка 2-й слайд и т. Д.

Не могли бы вы помочь мне достичь этого? Вы можете найти исходный код ниже. 

const nextBtn = document.querySelector('.nextBtn');
const prevBtn = document.querySelector('.prevBtn');
const container = document.querySelector('.images');
const offers = document.getElementById('offers');
const link = document.getElementById('links');

let colors = ['#7f86ff', '#2932d1', '#00067f'];
let currentSlide = 0;

let texts = ['Change1', 'Change2', 'Change3'];
let currentText = 0;

let links = ['<a href="https:www.google.com">Link1</a>', '<a href="https:www.is.fi">Link2</a>', '<a href="https:www.betsson.com">Link3</a>'];
let currentLink = 0;

function updateSlide(direction) {
  currentSlide =
    (colors.length + currentSlide + direction)
  % colors.length;
  container.style.backgroundColor = colors[currentSlide];
  container.animate([{opacity:'0.1'}, {opacity:'1.0'}],
  {duration: 200, fill:'forwards'})
}

function updateText(direction) {
  currentText =
    (texts.length + currentText + direction)
  % texts.length;
  offers.innerHTML = texts[currentText];
  offers.animate([{transform:'translateY(-50px)', opacity:'0.0'}, {transform:'translateY(0)', opacity:'1.0'}],
  {duration: 200, fill:'forwards'})
}

function updateLink(direction) {
  currentLink =
    (links.length + currentLink + direction)
  % links.length;
  link.innerHTML = links[currentLink];
  link.animate([{transform:'scale(0,0)'}, {transform:'scale(1.1)'}],
  {duration: 200, fill:'forwards'})
}

updateSlide(0);
updateText(0);
updateLink(0);

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

function nextSlide() {
  updateSlide(+1);
  updateText(+1);
  updateLink(+1);
  clearInterval(myInterval);
}

function prevSlide() {
  updateSlide(-1);
  updateText(-1);
  updateLink(-1);
  clearInterval();
  clearInterval(myInterval);
}

var myInterval = window.setInterval(function(){
  updateSlide(+1),updateText(+1),updateLink(+1);  }, 
  8000);
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;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  color: white;
}

#links {
  text-decoration: none;
  color: white;
  border: solid 2px white;
  border-radius: 3px;
  padding: 5px 10px;
}

#links:hover {
  background-color: #000238;
}

a {
  color: white;
  text-decoration: none;
}

.dots {
  display: flex;
  margin-top: 120px;
  margin-bottom: 50px;
}

#dot1, #dot2, #dot3 {
  width: 20px;
  height: 20px;
  background-color: rgb(147, 151, 249);
  border-radius: 50%;
  margin: 0px 5px;
  cursor: pointer;
}

#dot1:active, #dot2:active, #dot3:active {
  background-color: #fff;
}

.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;
}
<body>

  <div class="images">
    <button type="button" class="btn prevBtn">Prev Btn</button>
    <button type="button" class="btn nextBtn">Next Btn</button>
    <h1 id="offers">Changing text</h1>
    <a href="#" id="links">Links</a>
    <div class="dots">
    <span id="dot1"></span>
    <span id="dot2"></span>
    <span id="dot3"></span>
    </div>
  </div>
      
</body>

1 Ответ

1 голос
/ 07 марта 2019

Во-первых, согласно

https://developer.mozilla.org/en-US/docs/Web/CSS/:active

Псевдокласс: active CSS представляет элемент (например, кнопку), который активируется пользователем.

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

Однако, основываясь на другом запросе, вам, скорее всего, придетсяточки, тег <a> или что-то в этом роде, так что вы можете добавить к ним функциональность, чтобы щелкнуть по точкам, и вы попадете на любой слайд.Вероятно, что-то вроде: 

function dot1Click() {
  updateSlide(1);
  updateText(1);
  updateLink(1);
  dot1.style.backgroundColor = #fff;
}

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...