Change image style and title

Question

I am new to javascript and jquery. How can I make the main image change when clicking on the image below, and also change the title for each image?

I managed to make the picture change, but I also want to add styles that will also change for everything and got stuck with the title

$('.img-to-select__item').click(function () {
  $('.main-image > img').attr('src', $(this).children('img').attr('src'));
});

.custom-slider {
  text-align: center;
}
.main-image > img {
  margin-top: 5px;
  width: 50px;
  border-radius: 100px;
  box-shadow: 0 0 0 3px pink, 0 0 13px #333;
}
.img-to-select > .img-to-select__item > img {
  width: 30px;
  border-radius: 100px;
  height: 100%;
}
.img-to-select {
  overflow: hidden;
  display: flex;
  justify-content: space-around;
}
.img-to-select > .img-to-select__item {
   display: flex;
   justify-content: space-around;
}
.img-to-select > .img-to-select__item.selected {
   height: 100%;
   border-radius: 100px;
   border: 3px solid pink; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="custom-slider-section">
  <div class="custom-container">
    <div class="custom-slider">
      <div class="custom-slider__title">
        <span>Title
        </span>
      </div>
      <div class="main-image">
        <img src="https://i.picsum.photos/id/973/200/300.jpg?hmac=gFjS6R63ZUmM9pkLFyPxuEmsxvZ_e8VJxB3mcXpvTUQ">
      </div>
      <div class="img-to-select">
        <div class="img-to-select__item selected">
          <img src="https://i.picsum.photos/id/973/200/300.jpg?hmac=gFjS6R63ZUmM9pkLFyPxuEmsxvZ_e8VJxB3mcXpvTUQ">
        </div>
        <div class="img-to-select__item">
          <img src="https://i.picsum.photos/id/732/200/300.jpg?hmac=mBueuWVJ8LlL-R7Yt9w1ONAFVayQPH5DzVSO-lPyI9w">
        </div>
        <div class="img-to-select__item">
          <img src="https://i.picsum.photos/id/230/200/300.jpg?hmac=pyhlpgJN2oBeEzhJbnJYrCsLoJM6MKd_NUQGIQhVx5k">
        </div>
        <div class="img-to-select__item">
          <img src="https://i.picsum.photos/id/377/200/300.jpg?hmac=veEWg3ApI7rkKqMF6MuaWBmxPgnEe-Ar9eDdMG3q-kk">
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

For Adding the Title:

$(".custom-slider__title span").text($(this).children('img').data("title"));

To Add a Class to the main image

$('.main-image > img').addClass("my-class");

To Remove a Class from the main image

$('.main-image > img').removeClass("my-class");

These commands can be chained. i.e.

$('.main-image > img').attr('src', $(this).children('img').attr('src')); }).removeClass("old-class").addClass("new-class");