Код:

<div id="slideshow">
  <div id="slidesContainer">

<div class="slide">
     <img src="http://ipic.su/img/img7/fs/111111.1447596453.jpg">
    </div>
    
<div class="slide">
     <img src="http://ipic.su/img/img7/fs/2222.1447596413.jpg">
    </div>

  </div>
</div>

Код:

  <script>
        $(document).ready(function(){
      var currentPosition = 0;
      var slideWidth =175;
      var slides = $('.slide');
      var numberOfSlides = slides.length;

      // Remove scrollbar in JS
      $('#slidesContainer').css('overflow', 'hidden');

      // Wrap all .slides with #slideInner div
      slides
      .wrapAll('<div id="slideInner"></div>')
      // Float left to display horizontally, readjust .slides width
      .css({
        'float' : 'left',
        'width' : slideWidth
      });

      // Set #slideInner width equal to total width of all slides
      $('#slideInner').css('width', slideWidth * numberOfSlides);

      // Insert left and right arrow controls in the DOM
      $('#slideshow')
        .prepend('<span class="control" id="leftControl">Move left</span>')
        .append('<span class="control" id="rightControl">Move right</span>');

      // Hide left arrow control on first load
      manageControls(currentPosition);

      // Create event listeners for .controls clicks
      $('.control')
        .bind('click', function(){
        // Determine new position
          currentPosition = ($(this).attr('id')=='rightControl')
        ? currentPosition+1 : currentPosition-1;

          // Hide / show controls
          manageControls(currentPosition);
          // Move slideInner using margin-left
          $('#slideInner').animate({
            'marginLeft' : slideWidth*(-currentPosition)
          });
        });

      // manageControls: Hides and shows controls depending on currentPosition
      function manageControls(position){
        // Hide left arrow if position is first slide
        if(position==0){ $('#leftControl').hide() }
        else{ $('#leftControl').show() }
        // Hide right arrow if position is last slide
        if(position==numberOfSlides-1){ $('#rightControl').hide() }
        else{ $('#rightControl').show() }
        }
      });
    </script>

Код:

/* Слайдер */
#slideshow #slidesContainer {
  margin: -2px auto 5px 44px;
  width:250x;  /* ширина */
  height:45px; /* высота */
  overflow:auto; /* allow scrollbar */
  position:absolute;
margin-top: 0px; /* вниз */
margin-left: 0px; /* влево*/
background-color: #ffffff; /* цвет фона*/
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:175px; /* reduce by 20 pixels to avoid horizontal scroll */  /* размер контента */
  height:45px;
}
.control {
  display:block;
    width:15px;
  height:15px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  margin-top:14px; /* расположение кнопки левой */
  margin-left:-18px;
  background:transparent url(http://ipic.su/img/img7/fs/arrow1.1447585599.png) no-repeat 0 0;
}
#rightControl {
  margin-top:11px;  /* правой */
  margin-left:266px;
  background:transparent url(http://ipic.su/img/img7/fs/arrow2.1447585618.png) no-repeat 0 0;
}
/* Конец слайдера */