Image slider with multiple controls and mobile swipe…

1<div class="container"> 
2            <div class="slider">
3
4                <div class="box1 box">
5                    <div class="bg"></div>
6                    <div class="details">
7                        <h1>I'm the first Box</h1>
8                        <p>
9                            Lorem ipsum dolor sit amet, consectetur adipiscing 
10                            elit. Integer lacinia dui lectus. Donec scelerisque ipsum
11                            diam, ac mattis orci pellentesque eget. 
12                        </p>
13                        <button>Check Now</button>
14                    </div>
15
16                    <div class="illustration"><div class="inner"></div></div>
17                </div>
18                                
19                
20                <div class="box2 box">
21                    <div class="bg"></div>
22                    <div class="details">
23                        <h1>I'm the second Box</h1>
24                        <p>
25                            Lorem ipsum dolor sit amet, consectetur adipiscing 
26                            elit. Integer lacinia dui lectus. Donec scelerisque ipsum
27                            diam, ac mattis orci pellentesque eget. 
28                        </p>
29                        <button>Check Now</button>
30                    </div>
31
32                    <div class="illustration"><div class="inner"></div></div>
33                </div>
34                                
35                <div class="box3 box">
36                    <div class="bg"></div>
37                    <div class="details">
38                        <h1>I'm the third Box</h1>
39                        <p>
40                            Lorem ipsum dolor sit amet, consectetur adipiscing 
41                            elit. Integer lacinia dui lectus. Donec scelerisque ipsum
42                            diam, ac mattis orci pellentesque eget. 
43                        </p>
44                        <button>Check Now</button>
45                    </div>
46
47                    <div class="illustration"><div class="inner"></div></div>
48                </div>
49                                
50                <div class="box4 box">
51                    <div class="bg"></div>
52                    <div class="details">
53                        <h1>I'm the fourth Box</h1>
54                        <p>
55                            Lorem ipsum dolor sit amet, consectetur adipiscing 
56                            elit. Integer lacinia dui lectus. Donec scelerisque ipsum
57                            diam, ac mattis orci pellentesque eget. 
58                        </p>
59                        <button>Check Now</button>
60                    </div>
61
62                    <div class="illustration"><div class="inner"></div></div>
63                </div>
64                                
65                <div class="box5 box">
66                    <div class="bg"></div>
67                    <div class="details">
68                        <h1>I'm the fifth Box</h1>
69                        <p>
70                            Lorem ipsum dolor sit amet, consectetur adipiscing 
71                            elit. Integer lacinia dui lectus. Donec scelerisque ipsum
72                            diam, ac mattis orci pellentesque eget. 
73                        </p>
74                        <button>Check Now</button>
75                    </div>
76
77                    <div class="illustration"><div class="inner"></div></div>
78                </div>
79                                
80            </div>
81
82            <svg xmlns="http://www.w3.org/2000/svg" class="prev" width="56.898" height="91" viewBox="0 0 56.898 91"><path d="M45.5,0,91,56.9,48.452,24.068,0,56.9Z" transform="translate(0 91) rotate(-90)" fill="#fff"/></svg>
83            <svg xmlns="http://www.w3.org/2000/svg" class="next" width="56.898" height="91" viewBox="0 0 56.898 91"><path d="M45.5,0,91,56.9,48.452,24.068,0,56.9Z" transform="translate(56.898) rotate(90)" fill="#fff"/></svg>
84            <div class="trail">
85                    <div class="box1 active">1</div>
86                    <div class="box2">2</div>
87                    <div class="box3">3</div>
88                    <div class="box4">4</div>
89                    <div class="box5">5</div>
90            </div>
91        </div>   
92        <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
93        <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CSSRulePlugin3.min.js"></script>