スライドした時にテキストも変えたい

スライドショーでボタンを押した時に表示するテキストをスライドする度に変えたいのですが可能でしょうか
リンク
スライドの動きはリンクを元に作成しました。

html
1<div class="wrapper">
2  <div class="circle"></div>
3  <ul class="slider">
4    <li class="slider-item slider-item01"></li>
5    <li class="slider-item slider-item02"></li>
6    <li class="slider-item slider-item03"></li>
7  </ul>
8</div>
9<div class="gloval-nav">
10    <nav>
11        <p>スライドした時にここの文章を変えたいです。<br>
12        xxxxxvxvxvxvxvxvxvxvxxxvxvxvxxxxxxxxxxxxxxxxxv<br>
13        xxxxxvxvxvxvxvxvxvxvxxxvxvxvxxxxxxxxxxxxxxxxxv</p>
14    </nav>
15</div>

css
1.slider {
2  position: relative;
3  z-index: 1;
4  height: 100vh;
5}
6.slider-item01 {
7  background-image: url("../images/you.jpg");
8}
9.slider-item02 {
10  background-image: url("../images/tw.jpg");
11}
12.slider-item03 {
13  background-image: url("../images/fa.jpg");
14}
15.slider-item {
16  width: 100%;
17  height: 100vh;
18  background-repeat: no-repeat;
19  background-position: center;
20  background-size: cover;
21}
22.slick-prev, .slick-next {
23  position: absolute;
24  z-index: 3;
25  top: 42%;
26  cursor: pointer;
27  outline: none;
28  border-top: 2px solid #ccc;
29  border-right: 2px solid #ccc;
30  height: 25px;
31  width: 25px;
32}
33.slick-prev {
34  left: 2.5%;
35  transform: rotate(-135deg);
36}
37.slick-next {
38  right: 2.5%;
39  transform: rotate(45deg);
40}
41ul {
42  margin: 0;
43  padding: 0;
44  list-style: none;
45}
46.circle {
47  top: 5%;
48  left: 50%;
49  transform: translateX(-50%);
50  width: 50px;
51  height: 50px;
52  border: solid #000 1px;
53  border-radius: 50%;
54  background-color: #1BD5AA;
55  position: fixed;
56  z-index: 999;
57  display: block;
58	
59}
60.circle:hover {
61  cursor: pointer;
62  background-color: #000;
63}
64.gloval-nav {
65  background: rgba(0, 0, 0, 0.6);
66  color: #fff;
67  position: fixed;
68  width: 100%;
69  height: 50vh;
70  bottom: 0;
71  left: 0;
72  z-index: 900;
73  text-align: center;
74  display: flex;
75  visibility: hidden;
76  justify-content: center;
77  align-items: center;
78  font-size: 3rem;
79  
80}
81.is-open .circle {
82  z-index: 999;
83  visibility: visible;
84  opacity: 1;
85}
86.is-open .gloval-nav {
87  z-index: 999;
88  visibility: visible;
89  opacity: 1;
90}
91

js
1$('.slider').slick({
2  speed: 1000,
3  infinite: true,
4  slidesToShow: 1,
5  slidesToScroll: 1,
6  arrows: true,
7  prevArrow: '<div class="slick-prev"></div>',
8  nextArrow: '<div class="slick-next"></div>',
9});
10$(function () {
11  $('.circle').on('click', function () {
12    $('body').toggleClass('is-open');
13    $('body').remove('is-open');
14
15  });
16});
17