class構文 setintervalが繰り返さない

スライダーの処理で自動切替を実装したい

setintervalでthis.next()を繰り返したいのですが、一回しか実行されず...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    .wrapper {
        width: 350px;
    }
    .button_area {
        background-color: #000;
        height: 100px;
        display: flex;
        justify-content: center;
    }
    .button_area div {
        align-self: center;
    }
    .button_area div + div {
        margin-left: 20px;
    }
    .image_wrapper {
        display: flex;
        height: 200px;
    }
    .none {
        display: none;
    }
    
    </style>
    <div class="wrapper">
        <figure class="image_wrapper">
            <img src="https://fakeimg.pl/350x200/ff0000/?text=1">
        </figure>
        <div class="button_area">
            <div class="prev"><img src="https://fakeimg.pl/50x50/?text=prev"></div>
            <div class="next"><img src="https://fakeimg.pl/50x50/?text=next"></div>
        </div>
    </div>

    <script>

        class Photoview {

            constructor( init_index = 0 ){
                this.$el = $('.image_wrapper img');
                this.images = [
                                'https://fakeimg.pl/350x200/ff0000/?text=1',
                                'https://fakeimg.pl/350x200/ff0000/000?text=2',
                                'https://fakeimg.pl/350x200/ff0000,128/000,255?text=3'
                              ];
                this.$nextBtn = $('.next');
                this.$prevBtn = $('.prev');
                this.index = init_index;
                this.handleEvent();
                this.displayImg();
                this.maxLength = 2;
                this.autoplay();
            }

            handleEvent() {
                const self = this;
                this.$nextBtn.on("click", function(){
                    self.next();
                });
                this.$prevBtn.on("click", function(){
                    self.prev();
                });
            }

            autoplay() {
                setInterval( this.next(), 3000 );
            }

            next() {
                if ( this.index == this.maxLength ) {
                    this.index = 0;
                }
                else {
                    this.index++;
                }
                console.log( this.index );
                this.displayImg( this.index );
            }

            prev() {
                if ( this.index === 0 ) {
                    this.index = this.maxLength;
                }
                else {
                    this.index--;
                }
                this.displayImg( this.index );
            }

            displayImg() {
                this.$el.attr( 'src', this.images[ this.index ] );
            }

        }

        const Photoview_ins = new Photoview();

    </script>

</body>
</html>