JSFiddle - React, Tailwind, and code Playground

by Mike Pol

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://creoart.org/jquery.fast-Slider/jquery.Slider.js"></script>
<div id="slider">
  <a href="#" class="next"></a>
  <a href="#" class="prev"></a>
  <ul>
    <li>
      <p><a href="http://www.a-piter.ru/cena/pjaterochka_skidki.html">Пятерочка</a></p>
      <a href="http://www.a-piter.ru/cena/pjaterochka_skidki.html"><img src="http://www.a-piter.ru/cena/img/pjaterochka/1s.jpg" height="210px" alt="" border="none"></a>
      <p><strong><em>17.05 — 23.05</em></strong></p>
    </li>
    <li>
      <p><a href="http://www.a-piter.ru/cena/netto_catalog.html">Нетто</a></p>
      <a href="http://www.a-piter.ru/cena/netto_catalog.html"><img src="http://www.a-piter.ru/cena/img/netto/1s.jpg" height="210px" alt="" border="none"></a>
      <p><strong><em>17.05 — 23.05</em></strong></p>
    </li>
    <li>
      <p><a href="http://www.a-piter.ru/cena/verniy_catalog.html">Верный</a></p>
      <a href="http://www.a-piter.ru/cena/verniy_catalog.html"><img src="http://www.a-piter.ru/cena/img/verniy/1s.jpg" height="210px" alt="" border="none"></a>
      <p><strong><em>17.05 — 23.04</em></strong></p>
    </li>
    <li>
      <p><a href="http://www.a-piter.ru/cena/real_supermarket_catalog.html">РеалЪ</a></p>
      <a href="http://www.a-piter.ru/cena/real_supermarket_catalog.html"><img src="http://www.a-piter.ru/cena/img/reall/1s.jpg" height="210px" alt="" border="none"></a>
      <p><strong><em>16.05 — 31.05</em></strong></p>
    </li>
    <li>
      <p><a href="http://www.a-piter.ru/cena/pjaterochka_skidki.html">Пятерочка</a></p>
      <a href="http://www.a-piter.ru/cena/pjaterochka_skidki.html"><img src="http://www.a-piter.ru/cena/img/pjaterochka/1s.jpg" height="210px" alt="" border="none"></a>
      <p><strong><em>17.05 — 23.05</em></strong></p>
    </li>
    <li>
      <p><a href="http://www.a-piter.ru/cena/netto_catalog.html">Нетто</a></p>
      <a...

CSS

#slider {
  width: 820px;
  height: 270px;
}
#slider > .next {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 30px;
  cursor: pointer;
  background: url(http://creoart.org/jquery.fast-Slider/images/slider-next.png) no-repeat center #fff;
  outline: none;
  z-index: 1;
}
#slider > .prev {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 30px;
  cursor: pointer;
  outline: none;
  background: url(http://creoart.org/jquery.fast-Slider/images/slider-prev.png) no-repeat center #fff;
  z-index: 1;
}
#slider > ul {
  margin: 0;
  padding: 0;
}
#slider > ul > li {
    padding: 5px 10px;
    margin: 0;
}

JavaScript

$(document).ready(function(){
 	$('#demo1').Slider({
  	circle: true
  });
 });