Слайдер изображений для сайта в модальном окне

$(document).ready(function() { 
        var slideNow = 0; 
        var slideCount = $('#portfolio-project-1.portfolio_slider .slider_wrap').children().length; 
        var navBtnId = 0; 
        var translateWidth = 0; 
 
        $('#portfolio-project-1.portfolio_slider .viewport').hover( 
            function () { 
                $('.slider_btns').css({'opacity' : '1', 'transition' : 'all ease 0.3s'}); 
            }, 
            function () { 
                $('.slider_btns').css('opacity','0'); 
            }); 
        $('.slider_arrow').click(function() { 
            $(".slider_wrap .slide,.slider_nav .slider_nav_btn").removeClass("active"); 
            $(".slider_nav .slider_nav_btn:eq(" + $(this).addClass("active").index() + ")").addClass('active') 
        }); 
        $(".slider_nav .slider_nav_btn:eq(" + $(".slider_wrap .slide").index() + ")").addClass('active') 
 
        $('.next_btn').click(function() { 
            nextSlide(); 
        }); 
        $('.prev_btn').click(function() { 
            prevSlide(); 
        }); 
 
        $('.slider_nav_btn').click(function() { 
            $('.slider_nav_btn').removeClass('active'); 
            $(this).addClass('active'); 
            navBtnId = $(this).index(); 
 
            if (navBtnId + 1 != slideNow) { 
                translateWidth = -$('#portfolio-project-1.portfolio_slider .viewport').width() * (navBtnId); 
                $('#portfolio-project-1.portfolio_slider .slider_wrap').css({ 
                    'transform': 'translate(' + translateWidth + 'px, 0)', 
                    '-webkit-transform': 'translate(' + translateWidth + 'px, 0)', 
                    '-ms-transform': 'translate(' + translateWidth + 'px, 0)', 
                }); 
                slideNow = navBtnId + 1; 
            } 
        }); 
 
        function nextSlide() { 
 
            slideNow = (slideNow == slideCount - 1) ? 0 : ( slideNow + 1 ); 
            translateWidth = -$('#portfolio-project-1.portfolio_slider .viewport').width() * ( slideNow ); 
            $('#portfolio-project-1.portfolio_slider .slider_wrap').css({ 
                'transform': 'translate(' + translateWidth + 'px, 0)', 
                '-webkit-transform': 'translate(' + translateWidth + 'px, 0)', 
                '-ms-transform': 'translate(' + translateWidth + 'px, 0)', 
            }); 
 
 
            $('.slider_nav_btn').removeClass('active'); 
            $('.slider_nav_btn').eq(slideNow).addClass('active'); 
        } 
 
 
        function prevSlide() { 
            slideNow = (slideNow == 0) ? (slideCount - 1) : slideNow - 1; 
            translateWidth = -$('#portfolio-project-1.portfolio_slider .viewport').width() * ( slideNow ); 
            $('#portfolio-project-1.portfolio_slider .slider_wrap').css({ 
                'transform': 'translate(' + translateWidth + 'px, 0)', 
                '-webkit-transform': 'translate(' + translateWidth + 'px, 0)', 
                '-ms-transform': 'translate(' + translateWidth + 'px, 0)', 
            }); 
            $('.slider_nav_btn').removeClass('active'); 
            $('.slider_nav_btn').eq(slideNow).addClass('active'); 
        } 
 
    });

.portfolio_slider { 
  width: 100%; 
} 
.portfolio_slider .viewport { 
  width: 100%; 
  position: relative; 
  overflow: hidden; 
  -webkit-user-select: none; 
  -moz-user-select: none; 
  -ms-user-select: none; 
  -o-user-select: none; 
  user-select: none; 
  text-align: center; 
  height: 250px; 
} 
.portfolio_slider .viewport .slider_wrap { 
  position: relative; 
  width: calc(100% * 5); 
  -webkit-transition: 1s; 
  -o-transition: 1s; 
  transition: 1s; 
  -webkit-transition-timing-function: cubic-bezier(0.67, 0.01, 0.23, 1); 
  -o-transition-timing-function: cubic-bezier(0.67, 0.01, 0.23, 1); 
  transition-timing-function: cubic-bezier(0.67, 0.01, 0.23, 1); 
} 
.portfolio_slider .viewport .slider_wrap .slide { 
  width: calc(100%/5); 
  list-style: none; 
  display: inline; 
  float: left; 
} 
.portfolio_slider .viewport .slider_wrap .slide .slide_img { 
  width: 100%; 
  height: auto; 
} 
.portfolio_slider .viewport .slider_wrap, 
.portfolio_slider .viewport .slider_wrap ul, 
.portfolio_slider .viewport .slider_wrap li { 
  margin: 0; 
  padding: 0; 
} 
.portfolio_slider .viewport .slider_btns { 
  width: 100%; 
  padding: 0; 
  margin: 0; 
  text-align: center; 
  opacity: 0; 
} 
.portfolio_slider .viewport .slider_btns .prev_btn, 
.portfolio_slider .viewport .slider_btns .next_btn { 
  position: absolute; 
  width: 50px; 
  height: 50px; 
  background-color: #CD1F40; 
  border-radius: 50%; 
  top: calc(50% - 25px); 
} 
.portfolio_slider .viewport .slider_btns .prev_btn:hover, 
.portfolio_slider .viewport .slider_btns .next_btn:hover { 
  cursor: pointer; 
} 
.portfolio_slider .viewport .slider_btns .prev_btn { 
  left: 20px; 
} 
.portfolio_slider .viewport .slider_btns .next_btn { 
  right: 20px; 
} 
.portfolio_slider .viewport .slider_btns .prev_btn:before { 
  font-family: "Font Awesome 5 Pro"; 
  content: '\f053'; 
  line-height: 50px; 
  color: #fff; 
  text-align: center; 
  font-size: 20px; 
} 
.portfolio_slider .viewport .slider_btns .next_btn:before { 
  font-family: "Font Awesome 5 Pro"; 
  content: '\f054'; 
  line-height: 50px; 
  color: #fff; 
  text-align: center; 
  font-size: 20px; 
} 
.portfolio_slider .viewport .slider_btns:hover { 
  cursor: pointer; 
} 
.slider_nav { 
  display: table; 
  list-style: none; 
  width: 100%; 
  height: auto; 
} 
.slider_nav .slider_nav_btn { 
  display: table-cell; 
  width: 20%; 
  padding: 5px; 
} 
.slider_nav .slider_nav_btn img { 
  width: 100%; 
  height: 60px; 
} 
.slider_nav .slider_nav_btn.active img { 
  border: 3px solid #CD1F40; 
} 
.slider_nav:hover { 
  cursor: pointer; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="remodal portfolio_modal" data-remodal-id="portfolio-project-1"> 
    <div class="project_modal title"><span>Заголовок</span></div> 
    <div id="portfolio-project-1" class="portfolio_slider"> 
        <div class="viewport"> 
            <ul class="slider_wrap"> 
                <li class="slide active"><img src="http://placehold.it/400x150?text=Main Image 1" alt="1" class="slide_img"></li> 
                <li class="slide"><img src="http://placehold.it/400x150?text=Main Image 2" alt="2" class="slide_img"></li> 
                <li class="slide"><img src="http://placehold.it/400x150?text=Main Image 3" alt="3" class="slide_img"></li> 
                <li class="slide"><img src="http://placehold.it/400x150?text=Main Image 4" alt="4" class="slide_img"></li> 
                <li class="slide"><img src="http://placehold.it/400x150?text=Main Image 5" alt="5" class="slide_img"></li> 
            </ul> 
            <div class="slider_btns"> 
                <div class="prev_btn slider_arrow"></div> 
                <div class="next_btn slider_arrow"></div> 
            </div> 
        </div> 
    </div> 
    <div class="slider_nav"> 
        <div class="slider_nav_btn active"><img src="http://placehold.it/150x75?text=Thumbnail Image 1" alt="1" class="slide_img_thumbnail"></div> 
        <div class="slider_nav_btn"><img src="http://placehold.it/150x75?text=Thumbnail Image 2" alt="2" class="slide_img_thumbnail"></div> 
        <div class="slider_nav_btn"><img src="http://placehold.it/150x75?text=Thumbnail Image 3" alt="3" class="slide_img_thumbnail"></div> 
        <div class="slider_nav_btn"><img src="http://placehold.it/150x75?text=Thumbnail Image 4" alt="4" class="slide_img_thumbnail"></div> 
        <div class="slider_nav_btn"><img src="http://placehold.it/150x75?text=Thumbnail Image 5" alt="5" class="slide_img_thumbnail"></div> 
    </div> 
</div>