How to change image on click?

Question

JavaScript

Hello.

There is an additional main picture under it, how to make it appear on the main one when clicking on the additional one? Now the additional pictures are hard-coded by id in the id="display-1" template to a href="#display-1"
As I understand it, it needs to be done with a Java script?

<div class="col-md-5 col-sm-5 col-xs-12">
                  <div class="clear"></div>
                  <div class="tab-content">
                    <!-- Product = display-1-1 -->
                    <div role="tabpanel" class="tab-pane fade in active" id="display-1">
                      <div class="row">
                        <div class="col-xs-12">
                          <div class="toch-photo">
                            <a href="#"><img src="{{ product.images.url }}" data-imagezoom="true" alt="#" /></a>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- End Product = display-1-1 -->
                  </div>
                  <!-- Start Toch-prond-Menu -->
                                    {% for albom in albom %}
                  <div class="toch-prond-menu">
                    <ul role="tablist">
                      <li role="presentation" class=" active"><a href="#display-1" role="tab" data-toggle="tab"><img src="{{ albom.image.url }}" alt="#" /></a></li>
                    </ul>
                  </div>
                                    {% endfor %}
                  <!-- End Toch-prond-Menu -->
                </div>

Answer 1

Here is a "ready made" solution. kenwheeler.github.io/slick
Apply it, don't write the bike yourself. However, I strongly recommend that you familiarize yourself with the source code in order to understand how such things are written.

Answer 2

I'll answer my own question, maybe it will help someone.
Suggested on another forum. Can be done with this javascript

<script type="text/javascript">
 var img = document.getElementById("display-1").getElementsByTagName("img")[0]; //получаем большую картинку.
 function changeIMG(str){
    img.setAttribute('src', str);
 }
</script>

Everything works, the pictures change as needed.