Как переместить прокрутку влево

* { 
  margin: 0; 
  padding: 0; 
} 
 
.slider { 
  /*width: 300px;*/ 
  width:calc(100% - 253px); 
  position: relative; 
  padding-top: 0px; 
  float: right; 
} 
 
.slider>label {} 
 
.slider>img { 
  position: absolute; 
  left: 0px; 
  top: 0px; 
  width: 100%; 
  height: 700px; 
  background-size: cover; 
} 
 
input[name='slide_switch'] { 
  display: none; 
} 
 
.slider label { 
  margin: 18px 18px 18px 18px; 
  cursor: pointer; 
  opacity: 0.6; 
} 
 
.slider label img { 
  display: block; 
} 
 
.slider input[name='slide_switch']:checked+label { 
  border-color: #666; 
  opacity: 1; 
} 
 
.slider input[name='slide_switch']~img { 
  opacity: 0; 
  transform: scale(1.1); 
} 
 
.slider input[name='slide_switch']:checked+label+img { 
  opacity: 1; 
  transform: scale(1); 
} 
 
.leff { 
  background-color: rgb(173, 36, 36); 
  float: left; 
  overflow: scroll; 
  direction: rtl; 
} 
 
.leff>label { 
  display: block; 
  margin: 18px 18px 18px 18px; 
  height: 150px; 
  width: 200px; 
} 
 
.leff>label>img { 
  height: 150px; 
  width: 200px; 
}

<div class="slider"> 
  <input type="radio" name="slide_switch" id="id1" /> 
  <label for="id1"> 
 
    </label> 
  <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" /> 
 
  <!--Lets show the second image by default on page load--> 
  <input type="radio" name="slide_switch" id="id2" checked="checked" /> 
  <label for="id2"> 
 
    </label> 
  <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" /> 
 
  <input type="radio" name="slide_switch" id="id3" /> 
  <label for="id3"> 
 
    </label> 
  <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" /> 
 
  <input type="radio" name="slide_switch" id="id4" /> 
  <label for="id4"> 
 
    </label> 
  <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" /> 
 
  <input type="radio" name="slide_switch" id="id5" /> 
  <label for="id5"> 
 
    </label> 
  <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" /> 
 
</div> 
<div class="leff"><input type="radio" name="slide_switch" id="id1" /> 
  <label for="id1"> 
        <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/> 
    </label> 
 
 
  <!--Lets show the second image by default on page load--> 
  <input type="radio" name="slide_switch" id="id2" checked="checked" /> 
  <label for="id2"> 
        <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/> 
    </label> 
 
 
  <input type="radio" name="slide_switch" id="id3" /> 
  <label for="id3"> 
        <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/> 
    </label> 
 
 
  <input type="radio" name="slide_switch" id="id4" /> 
  <label for="id4"> 
        <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/> 
    </label> 
 
 
  <input type="radio" name="slide_switch" id="id5" /> 
  <label for="id5"> 
        <img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/> 
    </label> 
 
</div>