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">
                <img src="img/quebec_pic.svg" alt="">
              </div>
            </div>
          </div>
          <div class="slider-item norway">
            <div class="sub_slider">
              <div class="sub_circle">
                <div class="circle"></div>
                <div class="circle1">
                  <div class="circle1_sub"></div>
               ...

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-item {
  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(
      () => {  
        let nextIndex = prevIndex + 1;
        nextIndex = nextIndex < items.length ? nextIndex : 0;

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