JSFiddle - React, Tailwind, and code Playground

by artgas_pro

HTML

<section id="quizSection" class="quiz">
    <div class="quiz__container quiz-container">
        <h2 class="quiz__title">@lang('home.quiz.title')</h2>
        <h3 class="quiz__sub-title">@lang('home.quiz.sub-title')</h3>
        <div class="quiz__body quiz-body">
            <div class="quiz-body__overlay"></div>
            <div class="quiz-body__progres">
                <div class="quiz-body__progres-line"><span></span></div>
                <div class="quiz-body__progres-count">@lang('home.quiz.count')</div>
            </div>
            <h4 class="quiz-body__title">@lang('home.quiz.body.title')</h4>
            <div class="quiz-body__slider swiper">
                <div class="swiper-wrapper">
                    @foreach ($quizData as $quiz)
                    <div {!! implode(" ", $quiz['data']) !!} class=" swiper-slide {{$quiz['class'] ?? null}}">
                        <div class="item-quiz__img">
                            <img src="{{ asset($quiz[App::currentLocale()]) }}" alt="{{__($quiz['alt'])}}">
                        </div>
                        <h3 class="item-quiz__title">{{__($quiz['title'])}}</h3>
                    </div>
                    @endforeach
                </div>
            </div>
            <div class="quiz-body__slider-btns">
                <div class="swiper-button-prev swiper-button">&larr;</div>
                <div class="swiper-button-next swiper-button">&rarr;</div>
            </div>
            <button data-quiz="init" class="quiz-body__back-btn disabled"><span class="arrow">&larr;</span><span
                    class="text">@lang('home.quiz.back_btn')</span></button>
        </div>
    </div>
</section>

JavaScript

// init Swiper:
new Swiper('.quiz-body__slider', {
  // configure Swiper to use modules
  modules: [Navigation],
  simulateTouch: true,
  slidesPerView: 2,
  //loop: true,
  speed: 800,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  breakpoints: {
    768: {
      slidesPerView: 'auto',
      //loop: false,
    },
  },
});

const quizSlides = {
  es: {
    signboards: [`<div data-quiz="signboardsLight" class="swiper-slide new-slide"> <div class="item-quiz__img"> <img src="/img/home/quiz/es/signboards/light.webp" alt="Fabricacion de rotulos luminosos de metacrilato en Barcelona "> </div> <h3 class="item-quiz__title">Rótulos luminosos</h3> </div> `,
      ` <div data-quiz="layout" data-msg="ОПРОСНИК: Вывески без света" class="swiper-slide"> <div class="item-quiz__img"> <img src="/img/home/quiz/es/signboards/no_light.webp" alt="Rotulo de pvc sin luz con estructura metalica"> </div> <h3 class="item-quiz__title">Rótulos sin luz</h3> </div> `,
      ` <div data-popup-id="main" data-popup-show-select="" data-popup-payload="ОПРОСНИК: Вывески другой вариант" class="swiper-slide link-on-popup"> <div class="item-quiz__img"> <img src="/img/home/quiz/es/4.webp" alt=""> </div> <h3 class="item-quiz__title">Otra opción</h3> </div> `],
    signboardsLight: [`<div data-quiz="layout" data-msg="ОПРОСНИК: Вывески -> лайтбокс" class="swiper-slide new-slide"> <div class="item-quiz__img"> <img src="/img/home/quiz/es/signboards/1_.webp" alt="Fabricacion de rotulos luminosos de metacrilato en Barcelona"> </div> <h3 class="item-quiz__title">Rótulo bandeja metacrilato con luz</h3> </div> `,
      ` <div data-quiz="layout" data-msg="ОПРОСНИК: Вывески с фрезерной резкой" class="swiper-slide"> <div class="item-quiz__img"> <img src="/img/home/quiz/es/signboards/2_.webp" alt="Rótulo de composite. Caja calada luminosa desde dentro. Fabricacion en Barcelona"> </div> <h3 class="item-quiz__title">Rótulo bandeja calada con luz</h3> </div> `,
      ` <div...