Напиши js html css код для ряда картинок, которые сдвигаются налево при скроле

25 мая, 2023
0 комментариев

Пользователь задал следующий вопрос:

Напиши js html css код для ряда картинок, которые сдвигаются налево при скроле страницы

Этот ответ написан нейросетью.

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

текстовая нейросеть отвечает:

Для создания ряда картинок, которые сдвигаются налево при скролле страницы, мы можем использовать комбинацию JavaScript, HTML и CSS.

Первым шагом мы создаем HTML разметку, в которой вводим элемент div с именем "slider", в котором размещаем изображения. Каждое изображение представлено элементом div с именем "slide", содержащим тег img. Затем мы добавим несколько изображений, чтобы скролл был заметен.

html
<!DOCTYPE html>
<html>
<head>
  <title>Slider example</title>
  <style>
    #slider {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: scroll;
    }
    .slide {
      width: 100vw;
      min-width: 1000px;
      margin: 0 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 5em;
    }
    .slide img {
      max-width: 100%;
    }
  </style>
</head>
<body>
  <div id="slider">
    <div class="slide">
      <img src="https://picsum.photos/1920/1080?random=1" alt="Slider Image 1">
    </div>
    <div class="slide">
      <img src="https://picsum.photos/1920/1080?random=2" alt="Slider Image 2">
    </div>
    <div class="slide">
      <img src="https://picsum.photos/1920/1080?random=3" alt="Slider Image 3">
    </div>
    <div class="slide">
      <img src="https://picsum.photos/1920/1080?random=4" alt="Slider Image 4">
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>


В CSS мы используем flex-бокс для создания горизонтального ряда картинок, а также "overflow-x: scroll" для показа скролла при достижении границы контейнера. Мы задаем минимальную ширину каждого слайда в 1000px, чтобы при любом разрешении экрана у нас была возможность скроллировать элементы. Для картинок мы используем max-width, чтобы подстроиться под размер контейнера и не растягивать их на весь экран.

Далее мы добавим JavaScript код, который будет следить за скроллом страницы и сдвигать содержимое контейнера налево.

javascript
// получаем элемент контейнера и создаем переменную для значения скролла
const slider = document.querySelector("#slider");
let isDown = false;
let startX;
let scroll;

// создаем обработчик событий для каждого клика на контейнере
slider.addEventListener("mousedown", e => {
  isDown = true;
  startX = e.pageX - slider.offsetLeft;
  scroll = slider.scrollLeft;
});

slider.addEventListener("mouseleave", () => {
  isDown = false;
});

slider.addEventListener("mouseup", () => {
  isDown = false;
});

slider.addEventListener("mousemove", e => {
  if (!isDown) return;
  e.preventDefault();
  const x = e.pageX - slider.offsetLeft;
  const walk = (x - startX) * 3;
  slider.scrollLeft = scroll - walk;
});


Мы инициализируем переменные для проверки состояния контейнера, начальной позиции клика, значения скролла и сдвига. Далее мы создаем обработчик событий для каждого клика на контейнере. При клике мы проверяем, был ли клик нажат на контейнер, и сохраняем начальную позицию клика и текущее значение скролла. Затем мы добавляем обработчики событий для событий "mouseleave" и "mouseup", которые будут проверять, вышел ли курсор за пределы контейнера и нажата ли кнопка мыши. Наконец, мы добавляем обработчик события "mousemove" для регистрации перемещения мыши внутри контейнера. При этом мы проверяем, если кнопка мыши нажата, и вычисляем значение перемещения мыши на основе начальной точки клика и текущей позиции.

Когда пользователь начинает скроллить, JavaScript код сдвигает содержимое контейнера налево. При перемещении мыши слайды плавно двигаются влево или вправо в зависимости от места клика пользователя на слайдере. В результате мы получаем интерактивный слайдер, где картинки двигаются влево и вправо в зависимости от типа скролла.

Напиши js html css код для ряда картинок, которые сдвигаются налево при скроле

Задайте любой вопрос нейросети!

но вы должны быть авторизованы, чтобы ей пользоваться

Напиши js html css код для ряда картинок, которые сдвигаются налево при скроле

Задайте любой вопрос нейросети!

но вы должны быть авторизованы, чтобы ей пользоваться

Обратная связь с администрацией проекта

Форма репорта неправомерного контента.

Хотите задать любой вопрос нейросети?