Нажмите SVG для отображения слайдера изображения

Question

Я хочу превратить мой SVG (круги) в кнопки, когда каждый отдельный круг нажимается, я хочу, чтобы отображался другой слайдер изображений.Как бы я поступил так?вот мой код ..

<div id="sidle">
  <img class="image" src="img/nelson-street/SOKER.jpg" alt>
  <img class="image" src="img/nelson-street/VORTER.jpg"alt>
  <img class="image" src="img/nelson-street/MAFYA.jpg"alt>
  <img class="image" src="img/nelson-street/nick-walker.jpg"alt>
  <img class="image" src="img/nelson-street/SOKER-VORTER-DREAM.jpg"alt>
</div>

<circle class="circles" id="SmallStreet" fill="#B9C3C6" cx="692" cy="344.4" r="12.7"title="Small Street"/>
    <circle class="circles" id="BellLane" fill="#B9C3C6" cx="721.9" cy="311" r="12.7"title="Bell Lane"/>
    <circle class="circles" id="Quay-NelsonStreet" fill="#B9C3C6" cx="652.3" cy="327.7" r="12.7"title="Quay and Nelson Street"/>

В данный момент я пытаюсь показать слайдер изображения при нажатии кнопки, но он говорит мне, что слайдер не определен.Вот этот код ...

<button onclick="slider()"></button>
<div id="sidle">
  <img class="image" src="img/nelson-street/SOKER.jpg" alt>
  <img class="image" src="img/nelson-street/VORTER.jpg"alt>
  <img class="image" src="img/nelson-street/MAFYA.jpg"alt>
  <img class="image" src="img/nelson-street/nick-walker.jpg"alt>
  <img class="image" src="img/nelson-street/SOKER-VORTER-DREAM.jpg"alt>
</div>

$(function slider() {
    var obj = document.getElementById("sidle");
    var i;

    for (i = 0; i < obj.length; i++) {
      if (obj[i].style.display == "none") {
        obj[i].style.display = "block";
      } else {
        obj[i].style.display = "none";
      }
    }
  });

Answer 1

у нас есть два метода здесь:
первый:
У меня есть два изображения с уникальным классом или идентификатором, и я хочу показать их на кругах кликов:

 <div id="sidle">
  <img class="image" id="img-SmallStreet" src="img/nelson-street/SOKER.jpg" alt>
  <img class="image" id="img-BellLane" src="img/nelson-street/VORTER.jpg"alt>
 </div>
 <circle class="circles" id="SmallStreet" /> 
 <circle class="circles" id="BellLane" />
 <script>
 $(document).ready(function(){
    $("#SmallStreet").click(function(){ $("#img-SmallStreet").fadeIn();  });
    $("#BellLane").click(function(){ $("#img-BellLane").fadeIn();  });
 });
 </script>

или простым и лучшим способом:

 <div id="sidle">
  <img class="image" id="img-SmallStreet" src="img/nelson-street/SOKER.jpg" alt>
  <img class="image" id="img-BellLane" src="img/nelson-street/VORTER.jpg"alt>
 </div>
 <circle class="circles" id="SmallStreet" /> 
 <circle class="circles" id="BellLane" />
 <script>
 $(document).ready(function(){
    $(".circles").click(function(){ 
        $id = $(this).attr('id');
        $("#sidle #"+id).fadeIn();
    });
 });
 </script>

У меня много картинок, и я хочу показать их:

 <script>
 $(document).ready(function(){
    let index = 0;
    let lenght = $(".img").length;
    $(".circles").click(function(){ 
        $index = $(this).index();
        $("img").hide();
        $("img").eq($index).fadeIn();
        $index +=1;
        if($index >= length) $index = 0;
    });
 });
 </script>