Создайте слайдер отзывов, используя HTML, CSS и JavaScript

Привет Кодеры! Добро пожаловать в сегодняшнее руководство по Codewithrandom. Мы узнаем, как сделать Слайдер отзывов, который будет генерировать отзыв или отзыв, в котором они делятся своим опытом и взглядами, чтобы продолжить свое путешествие с брендом или компанией.

В этой статье мы создадим Testimonial Slider, используя HTML, CSS и JavaScript. Этот проект будет полезен для начинающих и поможет им развить свои навыки разработки интерфейса.

Предварительный просмотр слайдера отзывов: -

Как создать слайдер отзывов с помощью HTML, CSS и JavaScript

Шаг 1.HTML (язык гипертекстовой разметки) поможет нам создать структуру списка с некоторыми необходимыми атрибутами и элементами для создания этого проекта.
Шаг 2.Затем мы воспользуемся CSS (каскадной таблицей стилей), которая поможет нам стилизовать или спроектировать проект с подходящими отступами и выравниванием в этом проекте.
Шаг 3 –наконец мы будем использовать JS (JavaScript), который добавит логику, чтобы сделать проект Testimonial Slider Project отзывчивым со стороны пользователя.

Надеюсь, у вас есть представление о проекте.

Html-код слайдера отзывов: -

Сначала мы начнем с создания структуры проекта Testimonial Slider для этого, как вы можете видеть в приведенном выше коде, мы использовали все необходимые элементы и атрибуты для настройки структуры. Дайте нам знать код части CSS, чтобы добавить стиль и выровнять теги.

В коде HTML у нас есть собственный шрифт Google (poppins) в теге ‹head›. У нас есть основной div с именем класса wRAPPER, у нас есть дочерний divимя класса Testimonial-Container, мы даем имя ID этому div Testimonial-Container также. В основном весь контент отзывов или отзывов будет отображаться в этом контейнере.

В этом проекте у нас есть две кнопки, ID которых называются Prev и Next. Кнопка с именем ID Prev для просмотра предыдущего содержимого и кнопка с именем ID Next для просмотра следующего содержимого при пользователь нажимает на эти кнопки.

<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Testimonial Slider</title>
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="wrapper">
      <div class="testimonial-container" id="testimonial-container"></div>
      <button id="prev">&lt;</button>
      <button id="next">&gt;</button>
    </div>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

Css-код слайдера отзывов: -

Во-вторых, код CSS, в котором мы стилизовали структуру, которую мы дополнили, а также выровняли проект Testimonial Slider, чтобы он был правильно расположен и не запутался с подходящими элементами CSS. Теперь давайте закодируем часть JavaScript, чтобы сделать ее адаптивной.

Скопируйте весь приведенный ниже код CSS и вставьте его в свой файл style.css.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  background-color: #0a69ed;
}
.wrapper {
  background-color: #ffffff;
  position: absolute;
  width: 80vw;
  max-width: 41em;
  min-height: 25em;
  border-radius: 0.6em;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  box-shadow: 0 1.8em 3em rgba(1, 17, 39, 0.15);
  display: flex;
}
.testimonial-container {
  width: 85%;
  height: 100%;
  position: relative;
  margin: auto;
  padding: 1.8em 1.2em;
}
.wrapper button {
  font-size: 1.8em;
  height: 2.2em;
  width: 2.2em;
  background-color: #ffffff;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  border: none;
  color: #0a69ed;
  box-shadow: 0 0 1em rgba(1, 17, 39, 0.25);
  cursor: pointer;
  border-radius: 50%;
}
button#next {
  right: -1.1em;
}
button#prev {
  left: -1.1em;
}
.testimonial-container p {
  color: #8c8c90;
  text-align: center;
  font-size: 0.9em;
  line-height: 2em;
  letter-spacing: 0.05em;
}
.testimonial-container img {
  display: block;
  margin: 1.8em auto 1.25em auto;
  border-radius: 50%;
  width: 4.4em;
}
.testimonial-container h3 {
  color: #2d3d67;
  font-size: 1em;
  text-align: center;
}
.testimonial-container h6 {
  color: #bcc4da;
  font-size: 0.9em;
  letter-spacing: 0.03em;
  font-weight: 400;
  text-align: center;
}
@media screen and (max-width: 650px) {
  .wrapper {
    font-size: 14px;
  }
}

Код JavaScript слайдера отзывов: -

Последний этап проекта — JavaScript, в который мы добавили логику и закодировали в соответствии с требованиями с некоторыми условиями. Давайте посмотрим на окончательный результат проекта Слайдер отзывов с использованием HTML, CSS и JavaScript (исходный код).

В коде JavaScript у нас есть массив отзывов, где находятся все данные отзывов или отзывов, которые у нас есть. Из этого массива мы покажем все данные в контейнере отзывов, используя метод Array object.

Также мы создали функцию onclick для кнопок, позволяющих перемещать эти отзывы следующий и предыдущий. Хорошо, теперь вы просто посмотрите на приведенный ниже код JavaScript и скопируйте весь этот код, а затем вставьте его в свой файл JavaScript, который вы связали в HTML.

//Testimonial Data
const testimonials = [
  {
    name: "Eva Sawyer",
    job: "CEO, Fashworks",
    image: "https://i.postimg.cc/mgp4pfz5/profile-image-1.png",
    testimonial:
      "Neque volutpat ac tincidunt vitae semper quis lectus nulla at volutpat diam ut venenatis tellus in metus vulputate eu scelerisque felis imperdiet proin fermentum leo vel orci porta non pulvinar neque laoreet suspendisse interdum consectetur",
  },
  {
    name: "Katey Topaz",
    job: "Developer, TechCrew",
    image: "https://i.postimg.cc/PfSSwtB9/profile-image-2.png",
    testimonial:
      "Elementum tempus egestas sed sed risus pretium quam vulputate dignissim suspendisse in est ante in nibh mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet nulla",
  },
  {
    name: "Jae Robin",
    job: "UI Designer, Affinity Agency",
    image: "https://i.postimg.cc/W4mnbjG9/profile-image-3.png",
    testimonial:
      "Orci nulla pellentesque dignissim enim sit amet venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque massa placerat duis ultricies lacus sed turpis",
  },
  {
    name: "Nicola Blakely",
    job: "CEO,Zeal Wheels",
    image: "https://i.postimg.cc/xdLsJL23/profile-image-4.png",
    testimonial:
      "Sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit",
  },
];
//Current Slide
let i = 0;
//Total Slides
let j = testimonials.length;
let testimonialContainer = document.getElementById("testimonial-container");
let nextBtn = document.getElementById("next");
let prevBtn = document.getElementById("prev");
nextBtn.addEventListener("click", () => {
  i = (j + i + 1) % j;
  displayTestimonial();
});
prevBtn.addEventListener("click", () => {
  i = (j + i - 1) % j;
  displayTestimonial();
});
let displayTestimonial = () => {
  testimonialContainer.innerHTML = `
    <p>${testimonials[i].testimonial}</p>
    <img src=${testimonials[i].image}>
    <h3>${testimonials[i].name}</h3>
    <h6>${testimonials[i].job}</h6>
  `;
};
window.onload = displayTestimonial;

Окончательный вывод слайдера отзывов: -

Мы успешно создали наш Слайдер отзывов, используя HTML, CSS и JavaScript. Вы можете использовать этот проект для своих личных нужд, и соответствующие строки кода приведены со ссылкой на ручку кода, упомянутую выше.

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

Идея кода — codingartist

Написано — Харш Савант

Автор кода — @harshh9

Как сделать слайдер отзывов с помощью HTML, CSS и JavaScript

Шаг 1.HTML (язык гипертекстовой разметки) поможет нам создать структуру списка с некоторыми необходимыми атрибутами и элементами для создания этого проекта.

Шаг 2.Затем мы воспользуемся CSS (каскадной таблицей стилей), которая поможет нам стилизовать или спроектировать проект с подходящими отступами и выравниванием в этом проекте.

Шаг 3 —
Наконец, мы будем использовать JS (JavaScript), который добавит логику, чтобы сделать проект Testimonial Slider Project отзывчивым со стороны пользователя.