スライドショーを再開する方法がわかりません

画像をクリックしたらスライドショーを止めて、もう一度クリックしたら再開するようにしたいのですが、再開することができません。
どなたか教えていただけますでしょうか。

jquery
1$(function () {
2    $('.slideshow').each(function () {
3        let $slides = $(this).find('img'), 
4            slideCount = $slides.length,   
5            currentIndex = 0;              
6        $slides.eq(currentIndex).fadeIn();
7        timer = setInterval(showNextSlide, 1000);
8        function showNextSlide () {
9            let nextIndex = (currentIndex + 1) % slideCount;
10            $slides.eq(currentIndex).fadeOut();
11            $slides.eq(nextIndex).fadeIn();
12            currentIndex = nextIndex;
13        }
14    });
15    $('img').on('click', function() {
16        if (timer != null) {
17            clearInterval(timer);
18            timer = null;
19        } else {
20            setInterval(showNextSlide, 1000);
21        }
22    });
23});

JQUERY
1$(function () {
2    $('.slideshow').each(function () {
3        let $slides = $(this).find('img'), 
4            slideCount = $slides.length,   
5            currentIndex = 0;              
6        $slides.eq(currentIndex).fadeIn();
7        timer = setInterval(showNextSlide, 1000);
8        function showNextSlide () {
9            let nextIndex = (currentIndex + 1) % slideCount;
10            $slides.eq(currentIndex).fadeOut();
11            $slides.eq(nextIndex).fadeIn();
12            currentIndex = nextIndex;
13        }
14        function stop() {
15            clearInterval(timer);
16            timer = null;
17        }
18        $('img').on('click', function() {
19            if (timer != null) {
20                stop();
21            } else {
22                setInterval(showNextSlide, 1000);
23                timer = 1;
24            }
25        });
26    });
27});

2番目のJQUERYのようにすれば、再開はできたのですが、2度目以降ののストップと再開ができません。

html
1<!DOCTYPE html>
2<html class="no-js" lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta http-equiv="X-UA-Compatible" content="IE=edge">
6<title>Chapter 05-01 &#xB7; jQuery 最高の教科書</title>
7<link rel="stylesheet" href="./css/normalize.css">
8<link rel="stylesheet" href="./css/main.css">
9<script src="./js/vendor/modernizr.custom.min.js"></script>
10<script src="./js/vendor/jquery-1.10.2.min.js"></script>
11<script src="./js/main.js"></script>
12</head>
13<body>
14
15<header class="hero-header">
16    <div class="inner">
17        <div class="slideshow">
18            <img src="./img/slide-1.jpg" alt="" width="1600" height="465">
19            <img src="./img/slide-2.jpg" alt="" width="1600" height="465">
20            <img src="./img/slide-3.jpg" alt="" width="1600" height="465">
21            <img src="./img/slide-4.jpg" alt="" width="1600" height="465">
22        </div>
23    </div>
24</header>
25
26</body>
27</html>