Access the css of items in list in jQuery

I want to make a simple list of images (something like a slideshow) and in the beginning only first one shows up (put display: none; on whole class and display: block on the first of type)and I have added the buttons to switch between pictures. So I have my one image showing and arrows looking good but when I press the buttons on the side I cant get it to work. I used materialize to create this but changed it and wanted to do it myself.

My code:

<div class="slider">
    <div class="left">
        <img class="arrow" id="arrow_left" src="imgs/arrow_left.png" alt="">
    </div>
    <ul class="slike_lista">
        <li class="slider_image"><img class="slide_photo" src="imgs/test.jpg" alt=""></li>
        <li class="slider_image"><img class="slide_slike" src="imgs/test2.jpg" alt=""></li>
        <li class="slider_image"><img class="slide_slike" src="imgs/test3.jpg" alt=""></li>
    </ul>
    <div class="right">
        <img class="arrow" id="arrow_right" src="imgs/arrow_right.png" onclick="NextImage();" alt="">
    </div>
</div>

jQuery part:

var bannerImages= $(".slider_image");
var position= 0;
var numberOfImages= bannerImages.length;
function NextImage(){
    if(position+1 >= brojSlika){
        bannerImages[position].css('display', "none");
        position= 0;
        bannerImages[position].css('display', "block");
    }
    else{
        bannerImages[position].css('display', "none");
        position+= 1;
        bannerImages[position].css('display', "block");
    }
}

I tried with regular .toggle to do it but it didn't work and the same thing happens with .css

The error when I press the button:

Uncaught TypeError: bannerImages[position].css is not a function

The same thing with toggle or anything else. I tried to fix it but I just don't know how, I suck at javaScript...