Variable get different result inside and outside of object - html

Question

I have one question. I am doing automatic slider with option to click on dot, which picture I want to show.
But I have problem with variable, which should find SVG and then I use this variable as a value for an array.
PROBLEM IS:
If I define this variable "dot" INSIDE of my object "Slider", it finds all SVG in div element.
But if I declare this variable "dot" OUTSIDE of my object, I will find elements instead of SVG.
Problematic part is:
dot = $('.images-switch').children(), - give different results if INSIDE or OUTSIDE of object SLIDER
Can you advise me how to solve it. And give my your opinion about my solution of slider?
Code is below (var dot is defined inside Slider object = find alls SVG):
var covers = $('.fadecovers'),
cover = $('.cover'),
imagesSwitch = $('.images-switch')
i = 0,
slideCount = $('.cover').length,
slide = $('.cover'),
slideArr = jQuery.makeArray(slide),
dot = $('.images-switch').children(),
dotArr = jQuery.makeArray(dot),
n = 0;
console.log(dot);
for (n = 0; n < (slideCount); n++) {
$(dotArr[n]).attr('data', n);
};
$('.images-switch').children().first().addClass('active');
//Zaciatok objektu
var Slider = {
// nastavenie atributov objektu Slider defaultne ako null
intervalID: null,
running: false,
start: function() {
intervalID = setInterval (function () {
var dot = $('.images-switch').children(),
dotArr = jQuery.makeArray(dot);
if (i == slideCount) {i = 0};
if (cover.eq(0).is(':visible')) {i = 1};
$(slideArr).fadeOut(700);
$(slideArr[i]).fadeIn(700);
$(dotArr).removeClass('active');
$(dotArr[i]).addClass('active')
i++;
running = true;
},3500);
},
pause: function() {
//stopne vykonavanie setInterval funkcie
clearInterval(intervalID);
intervalID = null;
running = false;
},
resume: function() {
//ak nie je interval prazdny (teda ako keby neexistuje), tak spusti vykonavanie setInterval funkcie
if (!intervalID) {this.start()};
},
//zlucenie funckii na stopnutie a znovu spustenie setInterval
toggle: function() {
if (running) this.pause();
else this.resume();
},
};
Slider.start();
covers.on('click', function() {
Slider.toggle();
});
imagesSwitch.on('click', 'svg', function() {
var dot = $('.images-switch').children(),
dotArr = jQuery.makeArray(dot),
data = $(this).attr('data');
i = data;
$(slideArr).fadeOut(700);
$(slideArr[i]).fadeIn(700);
$(dotArr).removeClass('active');
$(dotArr[i]).addClass('active')
i++;
});
Here is belonging HTML code:
<header class="article-header">
<div class="container">
<h1 class="post-title">
Naše portfólio prác
</h1>
</div>
<div class="fadecovers">
<div class="cover"><img src="img/dragon-1.jpg"></div>
<div class="cover fade-out" ><img src="img/dragon-2.jpg"></div>
<div class="cover fade-out"><img src="img/dragon-3.jpg"></div>
<div class="cover fade-out" ><img src="img/dragon-4.jpg"></div>
</div>
<div class="images-switch">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
</div>
</header>

Answer 1

I finally solved it by myself. I changed the circles made by SVG to SPAN (circle made by CSS). Now it works.