вот примеры создания компонента карусели изображений в React, Angular и Vue:

Реагировать:

import React, { useState } from 'react';

const ImageCarousel = ({ images }) => {
  const [currentImage, setCurrentImage] = useState(0);

  return (
    <div>
      <img src={images[currentImage]} />
      <button onClick={() => setCurrentImage(currentImage - 1)}>Previous</button>
      <button onClick={() => setCurrentImage(currentImage + 1)}>Next</button>
    </div>
  );
};

export default ImageCarousel;

В примере React определен функциональный компонент с именем ImageCarousel, который принимает массив изображений в качестве реквизита. Компонент использует хук useState для отслеживания текущего индекса изображения в переменной состояния currentImage. Компонент отображает элемент img с src, установленным для текущего изображения, и двумя кнопками «Предыдущий» и «Далее», которые используются для перехода между изображениями. При нажатии кнопки «Предыдущий» вызывается функция setCurrentImage с индексом текущего изображения, уменьшающимся на 1, а при нажатии кнопки «Далее» он увеличивается на 1.

Угловой:

import { Component } from '@angular/core';

@Component({
  selector: 'image-carousel',
  template: `
    <img [src]="images[currentImage]" />
    <button (click)="previousImage()">Previous</button>
    <button (click)="nextImage()">Next</button>
  `
})
export class ImageCarousel {
  currentImage = 0;

  previousImage() {
    this.currentImage--;
  }

  nextImage() {
    this.currentImage++;
  }
}

В примере с Angular компонент ImageCarousel определяется с помощью декоратора @Component. Компонент имеет шаблон, который включает элемент img с его src, привязанным к свойству currentImage компонента, и две кнопки «Предыдущий» и «Далее», которые используются для перехода между изображениями. Компонент также имеет два метода, previousImage() и nextImage(), которые вызываются при нажатии соответствующих кнопок, и они просто уменьшают или увеличивают свойство currentImage на 1.

Вид:

<template>
  <div>
    <img :src="images[currentImage]" />
    <button @click="previousImage">Previous</button>
    <button @click="nextImage">Next</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentImage: 0
    }
  },
  methods: {
    previousImage() {
      this.currentImage--;
    },
    nextImage() {
      this.currentImage++;
    }
  }
}
</script>

В примере Vue определен однофайловый компонент с именем ImageCarousel, который включает в себя шаблон и скрипт. Шаблон включает элемент img, src которого привязан к свойству данных currentImage компонента, и две кнопки «Предыдущий» и «Далее», которые используются для перехода между изображениями. Сценарий определяет объект data, который включает свойство currentImage, установленное на 0, и два метода, previousImage() и nextImage(), которые вызываются при нажатии соответствующих кнопок, и они просто уменьшают или увеличивают свойство currentImage на 1.

Все примеры кода схожи по функциональности, они отличаются только синтаксисом и способом обработки состояний и событий.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.