JSFiddle - React, Tailwind, and code Playground

by Radioactive

HTML

<div id="slider">
  <a href="#" class="control_next">>></a>
  <a href="#" class="control_prev"><<</a>
  <ul>
    <li>
      <div class="s_title_pay">Выбор сервера</div>
     <datalist id="dl_fruits">
        <span class="Label">Выберите из списка:</span>
        <select id="favoriteFruite">
           <option label="Яблоко" value="apple">
           <option label="Ананас" value="ananas">
           <option label="Абрикос" value="apricot">
           <option label="Арбуз" value="watermelon">
           <option label="Авокадо" value="avocado">
           <option label="Апельсин" value="Orange">
        </select>
        <br>
        <span class="Label">Или введите вручную:</span>
     </datalist>
     <input id="fruit" list="dl_fruits">
    </li>
    <li>
      <div class="s_title_pay">Выбор услуги</div>
    </li>
    <li>
      <div class="s_title_pay">Длительность</div>
    </li>
    <li>
      <div class="s_title_pay">Выбор сервера</div>
    </li>
    <li>
      <div class="s_title_pay">капчя</div>
    </li>
    <li>
      <div class="s_title_pay">Оплата</div>
    </li>
  </ul>  
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);	
html, body {margin: 0;padding: 0;font-family: 'Open Sans';background: rgba(0,0,0,0.04);}
h1 {color: #fff;text-align: center;font-weight: 300;}
#slider {position: relative;overflow: hidden;margin: 20px auto 0 auto;border-radius: 4px;}
#slider ul {position: relative;margin: 0;padding: 0;min-height: 200px;list-style: none;}
#slider ul li {position: relative;display: block;float: left;margin: 0;padding: 0;width: 500px;min-height: 300px;background: #fff;text-align: center;line-height:20px;}
a.control_prev, a.control_next {position: absolute;top: 40%;z-index: 999;display: block;padding: 4% 3%;width: auto;height: auto;background: #2a2a2a;color: #fff;text-decoration: none;font-weight: 600;font-size: 18px;opacity: 0.8;cursor: pointer;}
a.control_prev:hover, a.control_next:hover {opacity: 1;-webkit-transition: all 0.2s ease;}
a.control_prev {border-radius: 0 2px 2px 0;}
a.control_next {right: 0;border-radius: 2px 0 0 2px;}

.s_title_pay{padding:10px;border-bottom:1px solid #f1f1f1;}
.Label {
   display: inline-block;
   width: 125px;
}

JavaScript

jQuery(document).ready(function($) {


  var slideCount = $('#slider ul li').length;
  var slideWidth = $('#slider ul li').width();
  var slideHeight = $('#slider ul li').height();
  var sliderUlWidth = slideCount * slideWidth;

  $('#slider').css({
    width: slideWidth,
    height: slideHeight
  });

  $('#slider ul').css({
    width: sliderUlWidth,
    marginLeft: -slideWidth
  });

  $('#slider ul li:last-child').prependTo('#slider ul');

  function moveLeft() {
    $('#slider ul').animate({
      left: +slideWidth
    }, 200, function() {
      $('#slider ul li:last-child').prependTo('#slider ul');
      $('#slider ul').css('left', '');
    });
  };

  function moveRight() {
    $('#slider ul').animate({
      left: -slideWidth
    }, 200, function() {
      $('#slider ul li:first-child').appendTo('#slider ul');
      $('#slider ul').css('left', '');
    });
  };

  $('a.control_prev').click(function() {
    moveLeft();
  });

  $('a.control_next').click(function() {
    moveRight();
  });

});