I'm practicing js and for long time i cant solve problem bellow.

I have function for changing the blurry background "changeBg", but it does not work when called.

Also key event function are not working dont know why.

I will appreciate any hints where to search for problems.

I know the code is wet but it's far from end "product".

```js
 //counting img tags
  var n = $("img").length;
  var m = n - 2;
  //alert("jest " + m + "tagow img");
  //adding onclick to source of file
  var source = $(".slider-inner > img").attr("src");
  $(".slider-inner > img").attr("onclick", "location.href=\'" + source + "\'");
  for (i = 1; i <= m; i++) {
    $(".dotcontainer").append($("<div class=\"dot\">x</div>"));
    $('.slider-inner img').attr('id', function (i) {
      return 'x' + (i + 1);
    });
    $('.dotcontainer div').attr('id', function (i) {
      return 'x' + (i + 1);
    });
    var url = $('.slider-inner img:nth-child(' + i + ')').attr("src");
     console.log(i);
  }
    ///temporary solution for initial background
      $(".bg").css('background', "url('"+ source +"')");
      $(".bg").css('background-repeat', "no-repeat");
      $(".bg").css('background-size', "cover");
      $(".bg").css('background-position', "center");
      //making first dot active
      $('.dotcontainer div:nth-child(' + 1 + ')').addClass('activee');
      //function changing backgorund

function changeBg() {
$(".bg").css('background', "url('"+ source +"')");
$(".bg").css('background-repeat', "no-repeat");
$(".bg").css('background-size', "cover");
$(".bg").css('background-position', "center");
};

    // next buttton

  $('.next').on('click', function nextImage() {
    var currentImg = $('.active');
    var nextImg = currentImg.next();
    var currentdot = $('.activee');
    var nextdot = currentdot.next();
    if (nextImg.length) {
      currentImg.removeClass('active').css('z-index', -10);
      nextImg.addClass('active').css('z-index', 10);
      currentdot.removeClass('activee');
      nextdot.addClass('activee');
      var source = nextImg.attr("src");
      nextImg.attr("onclick", "location.href=\'" + source + "\'");
      changeBg();
      } else {
      currentImg.removeClass('active').css('z-index', -10);
      $('#x1').addClass('active').css('z-index', 10);
      currentdot.removeClass('activee');
      $('.dotcontainer div:nth-child(' + 1 + ')').addClass('activee');
    }
  });

//prev button
  $('.prev').on('click', function prevImage() {
    var currentImg = $('.active');
    var prevImg = currentImg.prev();
    var currentdot = $('.activee');
    var prevdot = currentdot.prev();
    var n = $("img").length;
    var m = n - 2;
    if (prevImg.length) {
      currentImg.removeClass('active').css('z-index', -10);
      prevImg.addClass('active').css('z-index', 10);
      currentdot.removeClass('activee');
      prevdot.addClass('activee');
      changeBg();
    } else {
      currentImg.removeClass('active').css('z-index', -10);
      $('.slider-inner img:nth-child(' + m + ')').addClass('active').css('z-index', 10);
      currentdot.removeClass('activee');
      $('.dotcontainer div:nth-child(' + m + ')').addClass('activee');
    }
  });

//switch active dots
   $(".dot").click(function (event) {
    $('.activee').attr('class', 'dot');
    $(this).attr('class', 'dot activee'); 
    var aktkrop = $(".activee").attr("id");
    var fotoa = $('.slider-inner .active').attr("id");
    $(".active").removeClass("active");
    $("#" + aktkrop).attr("class", "active")
  });

//temp shadowbox temporary solution
    $('.btn').on('click', function () {
    $(".boxx").css("display", "block");
  });
  $('.close').on('click', function () {
    $(".boxx").css("display", "none");
  });

   document.addEventListener('keydown',function(e){
      if (e.keyCode === 37) {
      prevImage();
    } else if(e.keyCode === 39) {
      nextImage();
    }
  });

```

```css
body {
 font-family: "Arial", sans-serif;
 font-size: 14px;
 color: #fff;
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: center;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 margin: 0;
 padding: 0;

}
.bg{
 z-index: -2;
 position: absolute;
 width: 100%;
 height: 100%;
 filter: blur(30px);
 -webkit-filter: blur(30px);
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: center;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 margin: 0;
 padding: 0;
}
.blackshadow{
 z-index: -1;
 position: absolute;
 width: 100%;
 height: 100%;
 background-color: black;
 opacity: 0.6;
}

a {
 color: #fff;
 text-decoration: none;
}

h1 {
 text-align: center;
}

.container {
 width: 540px;
 margin: 40px auto;
 overflow: auto;

}

.slider-inner {
 width: 500px;
 height: 300px;
 position: relative;
 overflow: hidden;
 float: left;
 padding: 3px;
 border: #666 solid 1px;
}

.slider-inner img {
 display: none;
 width: 500px;
 height: 300px;
}

.slider-inner img.active {
 display: inline-block;
}

.prev,
.next {
 float: left;
 margin-top: 130px;
 cursor: pointer;
}

.prev {
 position: relative;
 margin-right: -45px;
 z-index: 100;
}

.next {
 position: relative;
 margin-left: -45px;
 z-index: 100;
}

.buba {

 display: flex;
 align-items: center;
 justify-content: center;
}

.dotcontainer {
 position: relative;
 display: flex;
 flex-direction: row;
 align-items: center;
 align-items: center;
 justify-content: center;
}

.dot {
 cursor: pointer;
 margin: 5px;
 width: 20px;
 height: 20px;
 background-color: gray;
 border-radius: 50%;
 text-align: center;
 justify-content: center;
 color: black;
 font-weight: 800;
}

.activee {
 background-color: white;
}

.boxx {
 width: 100%;
 height: 100%;
 background-color: black;
 opacity: 0.6;
 position: fixed;
 z-index: 11;
 margin: 0;
 padding: 0;
 display: none;
}

.close {
 margin-left: 300px;
 margin-top: 300px;
 z-index: 11;
}
```

```html
<html>

<head>
 <title>Page Title</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="initial-scale=1.0">
 <link rel="stylesheet" href="style.css">
 <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
  crossorigin="anonymous"></script>
</head>

<body>
 <div class="bg"></div>
 <div class="blackshadow"></div>

  <div class="boxx">
   <div class="closee">
    <button class="close">Close</button>
   </div>
  </div>
  <button class="btn">Kliknij</button>
  <div class="container">
   <h1>JQSlider</h1>

   <div class="slider-outer">
    <img src="http://www.fotem.pl/data/7d87e07a3066629171add66003d.png" id="prev" class="prev" alt="Prev">
    <div class="slider-inner">

     <img src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832_1280.jpg" class="active">
     <img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/green-1072828_1280.jpg">
     <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg">
     <img src="https://cdn.pixabay.com/photo/2015/06/19/21/24/the-road-815297_1280.jpg">
     <img src="https://cdn.pixabay.com/photo/2015/01/28/23/35/landscape-615429_1280.jpg">
     <img src="https://cdn.pixabay.com/photo/2019/09/30/14/51/squirrel-4515962_1280.jpg">
     <img src="https://cdn.pixabay.com/photo/2016/07/22/16/29/fog-1535201_1280.jpg">
     <img src="https://cdn.pixabay.com/photo/2016/11/23/13/48/beach-1852945_1280.jpg">

    </div>

    <img src="http://www.fotem.pl/data/6f1498615d84ca14dbf0de784bd.png" id="next" class="next" alt="Next">
   </div>
  </div>

  <div class="dotcontainer">
  </div>

 </body>
 <script type="text/javascript" src="script.js">

 </script>

</html>
```

Thank you in advance.

Code:
<https://codepen.io/odzeradodeveloperajava/pen/EMLbzz>