JSFiddle - React, Tailwind, and code Playground

by zav19791979

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SAT</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>

  <section>
        <div class="slider">         
              <div class="slider-item active quebec">
                  <div class="sub_slider">
                      <div class="sub_circle">
                          <div class="circle1" style="">
                              <div class="circle1_sub"></div>
                          </div>
                          <div class="circle"></div>
                          <div class="circle"></div>
                      </div>
                      <div class="slider_txt">
                          <div class="slider_txt1">
                              <a class="sub_slider_txt1">
                                  Канада
                              </a>
                          </div>
                          <div class="slider_txt2">
                              <a class="sub_slider_txt2">
                                  Квебек
                              </a>
                          </div>
                          <div class="slider_txt3">
                              <a class="sub_slider_txt3">
                                  Квебек - один из не многих городов на <br>
                                  североамериканском континенте, где <br>
                                  сохранилась франкоязычная <br>
                                  культура.
                              </a>
                          </div>
                          <div class="sub_button1">
                              <a class="button1" href="#">
                                  Узнать больше
                              </a>
                          </div>
                      </div>
                      <div class="quebec_img">
   ...

CSS

body {
  padding: 0px;
	margin: 0 auto;
	font-family: 'Manrope', sans-serif;
	color: #18191F;
	font-size: 14px;
	width: 1440px;
}

a {
	font-family: 'Manrope', sans-serif;
	text-decoration: none;
	color: #18191F;
}

/* .quebec {
	display: none;
}

.norway {
	display: none;
}

.portu {
	display: none;
} */






.slider {
	display: flex;
	width: 1440px;
}

.slider-wrapper {
  position: relative;
}

.slider-item {
  position: absolute;
  display: none;
}

.slider-item.active {
  display: block;
}
.sub_slider {
	display: flex;
}

.sub_circle {
	width: 24px;
	height: 88px;
	margin: 90px 0px 0px 140px;
}

.circle1 {
	height: 24px;
	width: 24px;
	background-color: rgba(190, 149, 196, 0.5);
	border-radius: 50%;
	margin-bottom: 20px;
}

.circle1_sub {
	position: absolute;
	height: 12px;
	width: 12px;
	background-color:#BE95C4;
	border-radius: 50%;
	margin: 6px 6px 6px 6px;
}

.circle {
	height: 12px;
	width: 12px;
	background-color:#BE95C4;
	border-radius: 50%;
	margin: 6px 6px 20px 6px;
}

.slider_txt {
	margin: 44px 0px 0px 50px;
}

.slider_txt1 {
	margin: 0px 0px 10px 0px;
}

.sub_slider_txt1 {
	font-size: 14px;
	font-weight: 700;
	color: #BE95C4;
}

.slider_txt2 {
	margin: 0px 0px 15px 0px;
}

.sub_slider_txt2 {
	font-size: 48px;
	font-weight: 700;
	color: #000;
	margin: 0px 0px 0px 0px;
	line-height: 40px;
}

.slider_txt3 {
	margin: 7px 0px 0px 0px;
}

.sub_slider_txt3 {
	font-size: 14px;
	font-weight: 700;
	color: #000;
	margin: 0px 0px 0px 0px;
}

.sub_button1 {
	margin: 20px 0px 0px -12px;
}

.button1 {
	background: #BE95C4;
	font-size: 14px;
	font-weight: 700;
	padding: 10px 5px 10px 5px;
	margin: 12px;
	border-radius: 8px;
	color: #fff;
}

.quebec_img {
	position: relative;
	float: right;
	margin: -63px 0px 0px 143px;
}

.norway_img {
	position: relative;
	float: right;
	margin: -63px 0px 0px 87px;
}

.portu_img {
	position: relative;
	float: right;
	margin: -63px 0px 0px 106px;
}

JavaScript

const items = document.querySelectorAll('.slider-item');
let prevIndex = 0;

if (items.length) {
setInterval(
    () => {
      if (prevIndex >= items.length) {
        prevIndex = 0;
      }
            
      let nextIndex = prevIndex + 1;
      nextIndex = nextIndex < items.length ? nextIndex : 0;

      items[prevIndex].classList.remove('active');
      items[nextIndex].classList.add('active');
      prevIndex = nextIndex;    
     },
    2 * 1000
  );
}