如何更改幻灯片中的箭头？

Question

I have auto-moving images as a slideshow.

Here's my code in CodePen: https://codepen.io/Krzysiek_39/pen/poNLbgx

On my code, instead of the left arrow, I have "previous" and instead of the right arrow I have "next". Unfortunately, I don't like the round backgrounds with the words "previous" and "next". Instead of the words "previous" (including the blue circular background) and the words "next" (including the red circular background) - I would like to have normal arrows (from another slideshow) in place of "previous" and "next".

Here is another slideshow with normal arrows: https://www.jqueryscript.net/demo/Responsive-Infinite-jQuery-Carousel-Slider-Plugin-LoopSlider/

Can I put these normal arrows (from another slideshow) in place of "previous" and "next"?

An important issue! I would also like "cursor: pointer" to only work when hovering over these normal arrows.

I will be very grateful for effective help.

<div class="header">

    <div class="text">
        <a class="refresh" title="A website refresh">Website</a>
    </div>
    
</div>

<div class="menu-container">

    <div class="menu">
        <a>MENU</a>
    </div>
    
</div>

<div class="box">

    <div class="slider_wrapper">
    
        <div class="slider">
        
            <div class="slider_img_wrapper">
                <a href="#"><img src="https://source.unsplash.com/1600x900/?art" alt=""><span class="caption">Caption for slide 1</span></a>
            </div>
            
            <div class="slider_img_wrapper">
                <a href="#"><img src="https://source.unsplash.com/1600x900/?action" alt=""><span class="caption">Caption for slide 2</span></a>
            </div>
            
            <div class="slider_img_wrapper">
                <a href="#"><img src="https://source.unsplash.com/1600x900/?war" alt=""><span class="caption">Caption for slide 3</span></a>
            </div>
            
            <div class="slider_img_wrapper">
                <a href="#"><img src="https://source.unsplash.com/1600x900/?crime" alt=""><span class="caption">Caption for slide 4</span></a>
            </div>
            
            <div class="slider_img_wrapper">
                <a href="#"><img src="https://source.unsplash.com/1600x900/?drama" alt=""><span class="caption">Caption for slide 5</span></a>
            </div>
            
            <div class="slider_img_wrapper">
                <a href="#"><img src="https://source.unsplash.com/1600x900/?sci-fi" alt=""><span class="caption">Caption for slide 6</span></a>
            </div>
            
        </div>
        
        <div class="slider_objects">
        
            <div class="slider_btn prev_btn">previous</div>
            <div class="slider_btn next_btn">next</div>
            
            <ul class="slider_list_wrapper">
                <li class="slider_list active_slide"></li>
                <li class="slider_list"></li>
                <li class="slider_list"></li>
                <li class="slider_list"></li>
                <li class="slider_list"></li>
                <li class="slider_list"></li>
            </ul>
            
        </div>
        
    </div>
    
</div>

Answer 1

You can modify the styles to remove the round background and add HTML entity for the arrows:

HTML

<div class="slider_btn prev_btn">&lsaquo;</div>
<div class="slider_btn next_btn">&rsaquo;</div>

CSS

.prev_btn, .next_btn {
  font-size:4em;
  position: absolute;
  cursor: pointer;
  color: #ffffff;
  background:0;
}

.prev_btn {
  left: 50px;
}

.next_btn {
  right: 50px;
}