Vue Карусель Син c с временной шкалой - PullRequest
Новая
       16

Vue Карусель Син c с временной шкалой

0 голосов
/ 09 февраля 2020

Я работаю над компонентом с каруселью (я использую хупер) и временной шкалой ниже.

для вывода слайдов, которые я зацикливаю с помощью v-for, в следующее: 

slides: [
    {
       title: "title",
       description: "description",
       image: "https://via.placeholder.com/150"
     },
     {
       title: "title",
       description: "description",
       image: "https://via.placeholder.com/150"
     },
     {
       title: "title",
       description: "description",
       image: "https://via.placeholder.com/150"
     },
     {
       title: "title",
       description: "description",
       image: "https://via.placeholder.com/150"
     },
     {
       title: "title",
       description: "description",
       image: "https://via.placeholder.com/150"
     },
     {
       title: "title",
       description: "description",
       image: "https://via.placeholder.com/150"
     },
     {
       title: "title",
       description: "description",
       image: "https://via.placeholder.com/150"
     },
     {
       title: "title",
       description: "description",
       image: "https://via.placeholder.com/150"
     },
     {
       title: "title",
       description: "description",
       image: "https://via.placeholder.com/150"
     },
     {
       title: "title",
       description: "description",
       image: "https://via.placeholder.com/150"
     }
   ],

для вывода временной шкалы, с которой я зацикливаюсь с помощью v-for: 

years: [
        { title: 1999, redBox: [true, false] },
        { title: 2000, redBox: [false] },
        { title: 2001, redBox: [false] },
        { title: 2002, redBox: [false, false] },
        {
          title: 2003,
          redBox: [false, false]
        },
        {
          title: 2004,
          redBox: [false, false]
        }
      ],

Вот моя задача: Каждый слайд соответствует одному redBox, поэтому каждый раз, когда я меняю слайд, мне нужно назначить активный класс соответствующему RedBox. Slide1 = Redbox1 class active

У кого-нибудь есть решение для этого? Я пробовал несколько раз, но безуспешно. : pensive: Не стесняйтесь менять структуру данных.

Здесь демонстрация https://jsfiddle.net/4z5myfst/7/

...