Slider doesn't work on js. Where is the mistake?

let slider1 = new Slider({ images: '.gallery-1 img', btnPrev: '.gallery-1 .prev', btnNext: '.gallery-1 .next', }) function Slider(obj) { this.images = document.querySelectorAll(obj.images) let i = 0 this.prev = function() { this.images[i].classList.remove('show') i-- if (i < 0) { i = this.images.length - 1 } this.images[i].classList.add('show') } this.next = function() { this.images[i].classList.remove('show') i++ if (i >= this.images.length) { i = 0 } this.images[i].classList.add('show') } document.querySelector(obj.btnPrev).onclick = function() { this.prev } document.querySelector(obj.btnNext).onclick = function() { this.next } } 

 .photos { margin: auto; width: 400px; height: 400px; position: relative } .photos img { width: 400px; height: 400px; position: absolute; opacity: 0; transition: 0.5s; } img.show { opacity: 1; } .nav { width: 200px; margin: 20px auto 0 } 

 <div class="gallery-1"> <div class="photos"> <img class="show" src="https://cs9.pikabu.ru/post_img/big/2018/04/14/4/152368263318662102.jpg" alt=""> <img src="https://cameralabs.org/media/lab18/12/26-1/Pobediteli-fotokonkursa-Dikaya-priroda-Rossii-2018_25.jpg" alt=""> <img src="https://cs11.pikabu.ru/post_img/big/2018/06/08/5/1528444187125297930.jpg" alt=""> <img src="http://dlyakota.ru/uploads/posts/2017-12/dlyakota.ru_fotopodborki_kanadskaya-priroda-na-snimkah-stacy-william-head_6.jpeg" alt=""> </div> <nav class="nav"> <button class="prev">Назад</button> <button class="next">Вперед</button> </nav> </div>