カルーセル(スライダー)メニューについて

１枚目の、バラバラに囲っている４つの◯印を２枚目のように整えてほしいです
ほしいです。なお、受講者の名前、顔写真などがそれぞれの画像で違う人となっていますが、それは今回の質問とは関係ありません。
２枚目のソースコードを３言語すべて全文コピペした結果、１枚目のようになってしまいました。

HTML
1<!--受講者の声ー-->
2<h1 class="title">受講者の声</h1>
3<div class="swiper-container">
4	<div class="swiper-wrapper">
5		<div class="swiper-slide"><img class="swiper-image" src="student1.png"></div>
6		<div class="swiper-slide"><img class="swiper-image" src="student2.png"></div>
7		<div class="swiper-slide"><img class="swiper-image" src="student3.png"></div>
8		<div class="swiper-slide"><img class="swiper-image" src="student4.png"></div>
9  </div>
10  <div class="swiper-button-prev"></div>
11  <div class="swiper-button-next"></div>
12  <div class="swiper-pagination"></div>
13
14  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>
15<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
16<script src="main.js"></script>
17</div>

CSS
1.swiper-container{
2  width: 70%;
3  margin: 0 auto;
4}
5.swiper-image{
6  width: 100%;
7}

JavaScript
1$(function(){
2    $('.js-menu__item__link').each(function(){
3        $(this).on('click',function(){
4            $("+.submenu",this).slideToggle();
5            return false;
6        });
7    });
8});
9
10var mySwiper = new Swiper('.swiper-container', {
11	autoplay: {
12		delay: 5000,
13		stopOnLastSlide: false,
14		disableOnInteraction: false,
15		reverseDirection: false
16	},
17	navigation: {
18		nextEl: '.swiper-button-next',
19		prevEl: '.swiper-button-prev'
20	},
21	pagination: {
22		el: '.swiper-pagination',
23		type: 'bullets',
24		clickable: true
25	}
26});
27
28

m.ts10806

2021/02/23 09:58

>不自然なく個人の感覚に依存するので具体的に「こうしたい」を絵にするなり文章にするなり確実に要件を他者に伝えてください。あと画像でコードを提示されても他者は再現確認できません。テキストで、マークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564