Как сделать бесконечную карусель JS (проблема бесконечности) - PullRequest
Новая
       5

Как сделать бесконечную карусель JS (проблема бесконечности)

3 голосов
/ 05 октября 2019

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

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

HTML: 

      <div class="content__bottom">
    <div class="service__block" data-name="instagram" data-order="1">
      <i class="service__block--icon fab fa-instagram"></i>
      <h5 class="service__block--title">אינסטגרם</h5>
      <i class="service__block--arrow fas fa-chevron-circle-up"></i>
    </div>
    <div class="service__block" data-name="facebook" data-order="2">
      <i class="service__block--icon fab fa-facebook-f"></i>
      <h5 class="service__block--title">פייסבוק</h5>
      <i class="service__block--arrow fas fa-chevron-circle-up"></i>
    </div>
    <div class="service__block" data-name="youtube" data-order="3">
      <i class="service__block--icon fab fa-youtube"></i>
      <h5 class="service__block--title">יוטיוב</h5>
      <i class="service__block--arrow fas fa-chevron-circle-up"></i>
    </div>
    <div class="service__block" data-name="twitch" data-order="4">
      <i class="service__block--icon fab fa-twitch"></i>
      <h5 class="service__block--title">טוויץ</h5>
      <i class="service__block--arrow fas fa-chevron-circle-up"></i>
    </div>
    <div class="service__block" data-name="twitter" data-order="5">
      <i class="service__block--icon fab fa-twitter"></i>
      <h5 class="service__block--title">טוויטר</h5>
      <i class="service__block--arrow fas fa-chevron-circle-up"></i>
    </div>
    <div class="service__block" data-name="pinterest" data-order="6">
      <i class="service__block--icon fab fa-pinterest"></i>
      <h5 class="service__block--title">פינטרסט</h5>
      <i class="service__block--arrow fas fa-chevron-circle-up"></i>
    </div>
    <div class="service__block" data-name="soundcloud" data-order="7">
      <i class="service__block--icon fab fa-soundcloud"></i>
      <h5 class="service__block--title">סאונדקלאוד</h5>
      <i class="service__block--arrow fas fa-chevron-circle-up"></i>
    </div>
    <div class="service__block" data-name="spotify" data-order="8">
      <i class="service__block--icon fab fa-spotify"></i>
      <h5 class="service__block--title">ספוטיפי</h5>
      <i class="service__block--arrow fas fa-chevron-circle-up"></i>
    </div>
    <div class="service__block" data-name="telegram" data-order="9">
      <i class="service__block--icon fab fa-telegram-plane"></i>
      <h5 class="service__block--title">טלגרם</h5>
      <i class="service__block--arrow fas fa-chevron-circle-up"></i>
    </div>
    <div class="service__block" data-name="tumblr" data-order="10">
      <i class="service__block--icon fab fa-tumblr"></i>
      <h5 class="service__block--title">טאמבלר</h5>
      <i class="service__block--arrow fas fa-chevron-circle-up"></i>
    </div>
  </div>

SCSS: 

    * {
  margin: 0;
  padding: 0;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62.5%; // 1rem = 10px, 10px/16px = 62.5%
}

body {
  max-height: 100vh;
  font-family: 'Arimo', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  background-color: #f8f8f8;
  // overflow: hidden;
  overflow-x: hidden;
}

.content__bottom {
  margin-top: 3%;
    width: 100vw;
    height: auto;
    padding: 2% 2%;
    display: flex;
}

.service__block {
      cursor: pointer;
      position: absolute;
      width: 210px;
      height: 200px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 3rem 5rem;
      border-radius: 3.5rem;
      border: 1px solid transparent;
      background-color: white;
      box-shadow: 5px 5px 20px rgba($color: black, $alpha: 0.05);
      transition: all 0.5s;

      &[data-order='0'] {
        right: -17.5%;
        display: none;
        opacity: 0;
        z-index: -1;
        transition: none;

      }
      &[data-order='1'] {
        right: -5.5%;

      }
      &[data-order='2'] {
        right: 6.5%;

      }
      &[data-order='3'] {
        right: 18.5%;

      }
      &[data-order='4'] {
        right: 30.5%;

      }
      &[data-order='5'] {
        right: 42.5%;

      }
      &[data-order='6'] {
        right: 54.5%;

      }
      &[data-order='7'] {
        right: 66.5%;

      }
      &[data-order='8'] {
        right: 78.5%;

      }
      &[data-order='9'] {
        right: 90.5%;

      }
      &[data-order='10'] {
        right: 102.5%;

      }
      &[data-order='11'] {
        right: 114.5%;
        display: none;
        z-index: -1;
        transition: none;

      }
      &--icon {
        color: #adadad;
        font-size: 7rem;
        margin-bottom: 3rem;
        transition: all 0.5s;

      }
      &--title {
        color: #adadad;
        font-size: 2.5rem;
        transition: all 0.5s;
        font-weight: 400;


      }
      &--arrow {
        color: #4d48a8;
        font-size: 3rem;
        display: none;
        opacity: 0;
        transform: translateY(-5rem);
        transition: all 0.5s;
        cursor: pointer;

      }
    }
    .service__block:hover {
      .service__block--icon,
      .service__block--title {
        color: #707070;
      }
    }
    .selected {
      height: 250px;
      border: 1px solid #4d48a8;

      .service__block--title {
        color: #4d48a8;
        margin-bottom: 2rem;

      }
      .service__block--icon {
        color: #4d48a8;
      }
      .service__block--arrow {
        display: block;
        transform: translateY(0);
        opacity: 1;
      }
      &:hover {
        .service__block--title {
          color: #4d48a8;
        }
        .service__block--icon {
          color: #4d48a8;
        }
      }
    }

JS: 

const serviceList = document.querySelectorAll('.service__block');

serviceList.forEach(service => {
  service.addEventListener('click', () => {
    markSelectedService(service);
    checkDistance(service);
    moveService(checkDistance(service));
  });
});

//Adds the class to the clicked service
function markSelectedService(service) {
  removeSelectedClass();
  service.classList.add('selected');
}

//Removes the selected class from all the services
function removeSelectedClass() {
  serviceList.forEach(service => {
    service.classList.remove('selected');
  });
}

function moveServices(service) {
  //Check Service distance from center
  checkDistance(service);
  //Check if service is outside view

  //Check last position of serviceList
  //If service is outside view disable display
  //Move service to end of the serviceList
  //Enable visiblity
}

//Check distance from center
function checkDistance(service) {
  let distance = service.dataset.order - 4;
  return distance;
}

//Check if service is outside view
//Services 1 to 9 are visible the rest are outside the view
function checkIfVisible() {
  serviceList.forEach(service => {
    if (
      parseInt(service.dataset.order) > 0 &&
      parseInt(service.dataset.order) < 11
    ) {
      service.style.display = 'flex';
    } else {
      service.style.display = 'none';
    }
  });
}

//Move the service 1 by 1 n times
function moveService(distance) {
  if (distance > 0) {
    for (var i = 0; i < distance; i++) {
      serviceList.forEach(service => {
        service.dataset.order = parseInt(service.dataset.order) - 1;

        if (
          parseInt(service.dataset.order) === 0 &&
          service.dataset.name == 'instagram'
        ) {
          service.dataset.order = 11;
          service.dataset.order = checkServiceListLastPosition();
        } else if (parseInt(service.dataset.order) === 0) {
          service.dataset.order = 11;
          service.dataset.order = checkServiceListLastPosition() + 1;
        }
      });
    }
  } else if (distance < 0) {
    distance = distance * -1;
    for (var i = 0; i < distance; i++) {
      serviceList.forEach(service => {
        service.dataset.order = parseInt(service.dataset.order) + 1;
      });
    }
  }
}

//Check last position
function checkServiceListLastPosition() {
  lastPosition = 0;
  serviceList.forEach(service => {
    if (
      parseInt(service.dataset.order) > lastPosition &&
      parseInt(service.dataset.order) !== 11
    ) {
      lastPosition = parseInt(service.dataset.order);
    }
  });
  console.log(lastPosition);
  return lastPosition;
}

Кодовое перо для текущего состояния: https://codepen.io/tomyshoam/pen/yLLLYyQ

1 Ответ

0 голосов
/ 05 октября 2019

Вы можете создать еще один блок CSS над вашим текущим .service__block , чтобы переопределить поведение перехода вашего порядка данных 1 блока. 

.service__block {
  &[data-order='1'] {
    right: -17.5%;
    display: none;
    opacity: 0;
    z-index: -1;
    transition: none;
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...