ここではjQueryプラグインGlide.jsについて解説しています。

ダウンロードはこちら
http://jedrzejchalubek.com/glide/

head

<link rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.glide.js"></script>

読み込むファイルはjquery.glide.jsとstyle.cssです。

body

<div class="slider">
    <ul class="slider__wrapper">
        <li class="slider__item"><img src="img1.jpg" /></li>
        <li class="slider__item"><img src="img2.jpg" /></li>
    </ul>
</div>

script

$('.slider').glide({
    arrowLeftText: '',        // 左にスライドさせる文字列
    arrowRightText: '',       // 右にスライドさせる文字列
    arrows: true,             // 左右切り替えの表示
    navigation: false,        // ナビゲーションの表示
    animationDuration: 1500,  // スライドの速度
    autoplay: 4000,           // スライドの感覚
    hoverpause: false         // マウスオーバーでスライドを止めるか
});

左右の切り替えを画像にする

style.css

.slider__arrows-item--right {
  background: url(glide-arrows-right.png) no-repeat; /* 追加 */
  bottom: 50%;
  right: 30px;
}
.slider__arrows-item--left {
  background: url(glide-arrows-left.png) no-repeat; /* 追加 */
  bottom: 50%;
  left: 30px;
}

style.cssの上記の箇所で左右切り替えを設定しているのでbackgroundで画像を設定し、
scriptの文字列は空白を指定しています。

関連記事
jQuery Camera 画像スライドショー
https://office-goto.info/javascript-jquery/camera/