Реализовать адаптивность в самописном слайдере изображений?

Имеется небольшой самописный JQuery-слайдер с двуями крутилками:

<div class="slider">
  <div>
    <img src="1.jpg">
    <img src="2.jpg">
    <img src="3.jpg">
  </div>
  <a class="prev"></a>
  <a class="next"></a>
</div>

.slider {
  float: right;
  max-width: 712px;
  max-height: 423px;
  overflow: hidden;
  position: relative;
}
.slider div {
  position:relative;
        width: 10000px;
    height: 424px;
}
.slider div img {
  float: left;
  display: block;
  width: 100%;
  max-width: 712px;
}

Нужно реализовать адаптивность для него, а именно: чтобы изображения внутри div были шириной не более ширины родительского .slider

Какие могут быть варианты?