Навигация карусель owl?

Question

[Карен Мнацаканян]

Привет всем!
У меня такая проблема надо реализовать навигацию таким образом, то есть при клике листаеться, как мне реализовать ? Может есть готовая решения ?
Спасибо.

Comments

[Сергей delphinpro]

sib-stroi.delphinpro.ru/object.html
tis2.delphinpro.ru/object.html

на обеих страницах смотрите блок "Динамика строительства".

[Ярослав Иванов]

Сергей: tis2.delphinpro.ru/object.html Это ты сетку из фш перенес на верстку?)) как и зачем?)

[Сергей delphinpro]

Ярослав Иванов: Да
Как? https://github.com/delphinpro/gulp-starter/blob/ma...
https://github.com/delphinpro/gulp-starter/blob/ma...
Зачем? - чтобы верстать удобно было.
Сетка включается хешем #dev в адресной строке.

[Карен Мнацаканян]

Сергей: а не подскажете какой карусель тут используют ? sib-stroi.delphinpro.ru/object.html

[Сергей delphinpro]

Карен Мнацаканян:

$(function () {
    var eSliderWidth = 80;

    var eDoc    = $(document);
    var eDin    = $('.din');
    var eLine   = $('.din__line', eDin);
    var eSlider = $('.din__slider', eDin);
    var ePane   = $('.din__pane', eDin);
    var eCont   = $('.din__container', eDin);

    var isSliderMove = false;
    var startX       = false;
    var startXPos    = false;

    eSlider.on('mousedown', function (e) {
        isSliderMove = true;
        startX       = e.clientX;
        startXPos    = eSlider.position().left;
        console.info(startX);
        eDoc.on('mousemove.din', sliderMove);
    });
    eDoc.on('mouseup', function () {
        isSliderMove = false;
        startX       = false;
        eDoc.off('mousemove.din', sliderMove);
    });

    function sliderMove(e) {
        if (startX === false) return;

        var x = e.clientX - startX;// - e.offsetX;
        x     = startXPos + x;

        if (x < 0) x = 0;
        var max = eLine.width() - eSliderWidth;
        if (x > (max)) x = max;

        eSlider.css({left: x + 'px'});

        var percentSlider = Math.round((x * 100) / max);
        var paneWidth     = ePane.width() - eCont.width();
        var panePos       = -Math.round((percentSlider * paneWidth) / 100);

        console.log(paneWidth, panePos);

        ePane.css({left: panePos + 'px'});
    }
});

.din {
  margin-bottom: 70px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  .din__line {
    height: 4px;
    background: #E1E1E1;
    position: relative;
    margin-bottom: 30px; }
  .din__slider {
    width: 80px;
    height: 12px;
    background: url("/design/images/slider.png");
    position: absolute;
    left: 0;
    top: -4px;
    cursor: pointer; }
  .din__item {
    width: 260px;
    display: inline-block;
    vertical-align: top;
    padding: 0 10px; }
    .din__item:first-child {
      padding-left: 0;
      width: 250px; }
  .din__container {
    overflow: hidden;
    position: relative;
    height: 210px; }
    .din__container::after {
      content: '';
      width: 130px;
      position: absolute;
      right: 0;
      bottom: 0;
      top: 0;
      background: -webkit-linear-gradient(right, #fff, rgba(255, 255, 255, 0));
      background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
      z-index: 3;
      pointer-events: none; }
  .din__pane {
    top: 0;
    left: 0;
    height: 210px;
    position: absolute;
    white-space: nowrap;
    font-size: 0; }

.din-item__image {
  display: block;
  width: 100%; }

.din-item__body {
  border: 2px solid #D5D5D5;
  border-top: none;
  text-align: center;
  font-size: 16px;
  color: #454545;
  padding: 25px 10px; }