how to return first image with cycle plugin

Question

I'm using cycle2 plugin for my carousel and I wrote a basic function to start slide images on hover but there is something that I couldn't achieve is when I left my cursor from area carousel must return first image how to do that ?

$('.img-area').cycle({
  fx: 'none',
  speed: 750,
  timeout: 100
}).cycle("pause");


$(".otel-list").hover(function() {
  $(".img-area").cycle("resume");
}, function() {
  $(".img-area").cycle("pause");
});

.otel-list {
  width: 700px;
  background: #f0f0f0;
  border-bottom: 5px solid #ccc;
}
.otel-list:after,
.otel-list-:before {
  content: "";
  display: table;
  clear: both;
}
.img-area {
  width: 33%;
  float: left;
  position: relative;
}
.img-area img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.content-area {
  float: right;
  width: 66%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.js"></script>
<div class="otel-list">
  <div class="img-area">
    <img src="http://malsup.github.io/images/p1.jpg" />
    <img src="http://malsup.github.io/images/p2.jpg" />
    <img src="http://malsup.github.io/images/p3.jpg" />
    <img src="http://malsup.github.io/images/p4.jpg" />
  </div>
  <div class="content-area">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt dolorem, nemo illo non aspernatur distinctio deleniti repudiandae in reprehenderit, explicabo, ullam. Fuga dolorum voluptates esse animi earum! Sint, officia, molestias!</p>
  </div>
</div>

Answer 1

Just use $(".img-area").cycle(0) on mouse leave event.

$('.img-area').cycle({
  fx: 'none',
  speed: 750,
  timeout: 100
}).cycle("pause");

$(".otel-list").hover(function() {
  $(".img-area").cycle("resume");
}, function() {
  $(".img-area").cycle("pause");
}).mouseleave(function(){
  $(".img-area").cycle(0);
});

.otel-list {
  width: 700px;
  background: #f0f0f0;
  border-bottom: 5px solid #ccc;
}
.otel-list:after,
.otel-list-:before {
  content: "";
  display: table;
  clear: both;
}
.img-area {
  width: 33%;
  float: left;
  position: relative;
}
.img-area img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.content-area {
  float: right;
  width: 66%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.js"></script>
<div class="otel-list">
  <div class="img-area">
    <img src="http://malsup.github.io/images/p1.jpg" />
    <img src="http://malsup.github.io/images/p2.jpg" />
    <img src="http://malsup.github.io/images/p3.jpg" />
    <img src="http://malsup.github.io/images/p4.jpg" />
  </div>
  <div class="content-area">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt dolorem, nemo illo non aspernatur distinctio deleniti repudiandae in reprehenderit, explicabo, ullam. Fuga dolorum voluptates esse animi earum! Sint, officia, molestias!</p>
  </div>
</div>