0

В меню реализован слайдер , стрелки навигации в котором появляются при достижении определенной ширины всех элементов слайдера. Т.е. если ширина всех элементов превышает ширину родителя появляются стрелки навигации (влево/вправо). эта часть отвечает за появление стрелок:

if(this._isTabsMoreThenParent()) {
        this.arrows.right.show();
        this.arrows.left.show();

        if(!this.current_position) {
            this.arrows.left.hide();

        }

        if(this.current_position == this.total - 3) {
            this.arrows.right.hide();
        }
    } else {
        this.arrows.left.hide();
        this.arrows.right.hide();
    }
},

Выглядит это так:

введите сюда описание изображения

Полный код слайдера:

/**
 * Created by mvoronova on 13.01.2016.
 */

(function() {
  function Slideshow(element) {
    this.$slider = $(element);
    this.parent_width = this.$slider.width();
    this.animate = 0;
    this.init();
  }

  Slideshow.prototype = {
    init: function(options) {
      this.$wrapper = $('.tabs-slider-wrapper');
      this.$tabs = $('.js_order_service_tabs > li');
      this.arrows = {
        'left': $('.slider-previous'),
        'right': $('.slider-next')
      };

      this.current_position = 0;
      this.recalculateTotal();
      this.actions();
      this.arrowAction();
    },

    recalculateTotal: function() {
      this.total = this.$tabs.length;
    },

    getParentWidth: function() {
      return this.parent_width;
    },

    arrowAction: function() {
      this.recalculateTotal();

      if (this._isTabsMoreThenParent()) {
        this.arrows.right.show();
        this.arrows.left.show();

        if (!this.current_position) {
          this.arrows.left.hide();
        }

        if (this.current_position == this.total - 3) {
          this.arrows.right.hide();
        }
      } else {
        this.arrows.left.hide();
        this.arrows.right.hide();
      }
    },

    _isTabsMoreThenParent: function() {
      var left_position = !!(parseInt(this.$wrapper.css('left')) * -1) || 0;
      return ((this.getTabsWidth() > this.getParentWidth()) || left_position);
    },

    setWrapperWidth: function() {
      var need_width;
      if (this._isTabsMoreThenParent()) {
        need_width = this.getTabsWidth();
      } else {
        need_width = this.getParentWidth();
      }

      this.$wrapper.css('width', need_width);
      this.current_wrapper_width = need_width;
    },

    getCurrentWrapperWidth: function() {
      return this.current_wrapper_width;
    },

    getTabsWidth: function() {
      this.$tabs = $('.js_order_service_tabs > li');
      var width = 0;

      for (var i = 0, ci = this.$tabs.length; i < ci; i++) {
        width += $(this.$tabs[i]).width();
      }
      return width;
    },

    _slide: function(direction) {
      var self = this;

      if (direction == 'right') {
        this.current_position++;
      } else if (direction == 'left') {
        if (this.current_position) {
          this.current_position--;
        }
      }

      this.animate = 1;
      this.$slider.css('overflow', 'hidden');
      this.showAllTabs();

      this.$wrapper.css('left', this.$tabs[this.current_position].offsetLeft * -1);

      var tmt = setTimeout(this.hideTabs.bind(self), 600);
    },

    isAnimate: function() {
      return this.animate;
    },

    actions: function() {
      var self = this;

      this.arrows.right.on('click', function() {
        if (self.isAnimate()) {
          return false;
        }
        self._slide('right');
      });

      this.arrows.left.on('click', function() {
        if (self.isAnimate()) {
          return false;
        }
        self._slide('left');
      });

      $(document).on('order:service:tab:added', function() {
        self.setWrapperWidth();

        if (self._isTabsMoreThenParent()) {
          self._slide('right');
        }
      });

      $(document).on('request:service:tab:close', function() {
        var tmp = self.getCurrentWrapperWidth(),
          tab_width;

        self.setWrapperWidth();

        if (parseInt(self.$wrapper.css('left'))) {
          tab_width = tmp - self.getCurrentWrapperWidth();

        }
        self._slide('left');
      });
    },

    hideTabs: function() {
      var el_summ = 0,
        left_position = parseInt(this.$wrapper.css('left').replace('-', ''));

      if (left_position) {
        for (var i = 0; i < this.$tabs.length; i++) {
          el_summ += $(this.$tabs[i]).width();
          $(this.$tabs[i]).css('visibility', 'hidden');

          if (el_summ == left_position) {
            break;
          }
        }
      }

      if (this.$wrapper.width() - left_position <= this.getParentWidth()) {
        this.$slider.css('overflow', '');
      }

      this.animate = 0;
      this.arrowAction();
    },

    showAllTabs: function() {
      for (var i = 0; i < this.$tabs.length; i++) {
        $(this.$tabs[i]).css('visibility', 'visible');
      }
    }
  };

  document.addEventListener('DOMContentLoaded', function() {
    var tabs_slider = new Slideshow('#multiSelection');
  });
})();

Логика слайдера не совсем верна, т.к. часто стрелка(справа) после последнего элемента не пропадает, хотя это очевидно последний элемент. Как в таком случае реализовать скрытие стрелки если элемент последний?

UPD разметка

<div id="multiSelection" class="tabs-slider">
<ul class="tabs-slider-wrapper nav nav-tabs js_order_service_tabs">

    <? $active = 'active'; ?>

    <? foreach($this->getServicesTabsFromRequestServiceInfo() as $tab_id => $tab_title): ?>
        <li class="js_order_request_service_tab_<?=$tab_id;?> js_order_request_service_tab <?=$active;?>"
            tabid="order_service_<?=$tab_id;?>">
            <a href="#order_service_<?=$tab_id;?>"
               data-toggle="tab"><?=$tab_title;?>
                <i class="icon icon-remove js_remove_service_tab"
                   data-order-service-tab-id="<?=$tab_id;?>"></i>
            </a>
        </li>
        <? if($active) $active = ''; ?>
    <? endforeach; ?>

    <li id="TabAdded" class="dropdown js_order_add_service_tab">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <i class="icon icon-plus"></i>&nbsp;Добавить услугу<b class="caret"></b>
        </a>
        <ul class="dropdown-menu order-add-service-dropdown-menu">
            <? foreach($this->services as $code => $title): ?>
                <li><a data-service-id="<?=$code;?>" href="#"><?=$title;?>   </a></li> 
            <? endforeach; ?>
        </ul>
    </li>
    <div class="clear"></div>
</ul>
<div class="border-bottom"></div>

<div class="tabs-slider-nav">
    <div id="moveTabsLeft" class="roller roller-wrap-style-left slider-previous">
        <i  class="icon icon-chevron-left icon-position-left "></i>
    </div>
    <div id="moveTabsRight" class="roller roller-wrap-style-right slider-    next">
        <i  class="icon icon-chevron-right icon-position-right"></i>
    </div>
</div>
</div>
 <div class="request-service-tab-content tab-content">
<? $active = 'active'; ?>
<? foreach($this->getServicesTabsContentFromRequestServiceInfo() as $tab_id        => $tab_content): ?>
    <div class="order-service-tab tab-pane <?=$active;?>"
         id="order_service_<?=$tab_id;?>"><?=$tab_content;?></div>
    <? if($active) $active = ''; ?>
<? endforeach; ?>

UPD javascript

'use strict';

function Slideshow(element) {
this.$slider = $(element);
this.parent_width = this.$slider.width();
this.animate = 0;
this.init();
}

Slideshow.prototype = {
init: function(options) {
    this.$wrapper = $('.tabs-slider-wrapper');
    this.$tabs = $('.js_order_service_tabs > li');
    this.arrows = {
        'left': $('.slider-previous'),
        'right': $('.slider-next')
    };

    this.current_position = 0;
    this.recalculateTotal();
    this.actions();
    this.arrowAction();

},

recalculateTotal: function() {
    this.total = this.$tabs.length;


},

getParentWidth: function() {

    return this.parent_width;

},

arrowAction: function() {
    this.recalculateTotal();

    if(this._isTabsMoreThenParent()) {

        this.arrows.right.show();
        this.arrows.left.show();

        if(!this.current_position) {
            this.arrows.left.hide();
        }

        if(this.current_position == this.total - 3) {

            this.arrows.right.hide();

        }
    } else {
        this.arrows.left.hide();
        this.arrows.right.hide();
    }
},

_isTabsMoreThenParent: function() {
    var left_position = !!(parseInt(this.$wrapper.css('left'))*-1) || 0;
    return ((this.getTabsWidth() > this.getParentWidth()) || left_position);

},

setWrapperWidth: function() {
    var need_width;

    if(this._isTabsMoreThenParent()) {
        need_width = this.getTabsWidth();
    } else {
        need_width = this.getParentWidth();
    }


    this.$wrapper.css('width', need_width+10); 
    this.current_wrapper_width = need_width;

},

getCurrentWrapperWidth: function() {
    return this.current_wrapper_width;
},

getTabsWidth: function() {
    this.$tabs = $('.js_order_service_tabs > li');
    var width = 0;

    for(var i = 0, ci = this.$tabs.length; i<ci; i++) {
        width += $(this.$tabs[i]).width();

    }
    return width;
},

_slide: function(direction) {
    var self = this;

    if(direction == 'right') {
        this.current_position++;

    } else if(direction == 'left') {
        if(this.current_position) {
            this.current_position--;
        }
    }

    if(this.current_position >= this.total)
        this.current_position = this.total-1;
    if(this.current_position < 0)
        this.current_position = 0;

    this.animate = 1;
    this.$slider.css('overflow', 'hidden');
    this.showAllTabs();


    this.$wrapper.css('left', this.$tabs[this.current_position].offsetLeft*-1);


    var tmt = setTimeout(this.hideTabs.bind(self), 600);
},

isAnimate: function() {
    return this.animate;
},

actions: function() {
    var self = this;

    this.arrows.right.on('click', function() {
        if(self.isAnimate()) {
            return false;
        }
        self._slide('right');
    });

    this.arrows.left.on('click' , function() {
        if(self.isAnimate()) {
            return false;
        }
        self._slide('left');
    });

    $(document).on('order:service:tab:added', function() {
        self.setWrapperWidth();

        if(self._isTabsMoreThenParent()) {
            self._slide('right');
        }
    });

    $(document).on('request:service:tab:close', function() {
        var tmp = self.getCurrentWrapperWidth(),
            tab_width;

        self.setWrapperWidth();

        if(parseInt(self.$wrapper.css('left'))) {
            tab_width = tmp - self.getCurrentWrapperWidth();

        }
        self._slide('left');
    });
},

hideTabs: function() {
    var self = this,
        el_summ = 0,
        left_position = parseInt(this.$wrapper.css('left').replace('-',''));

    if(left_position) {
        for (var i = 0; i < this.$tabs.length; i++) {
            el_summ += $(this.$tabs[i]).width();
            $(this.$tabs[i]).css('visibility', 'hidden');

            if (el_summ == left_position) {
                break;
            }
        }
    }

    if(this.$wrapper.width() - left_position <= this.getParentWidth()) {
        this.$slider.css('overflow','');
    } else {
        $('#TabAdded').one('click', function() {
           self._slide('right');
        });
    }

    this.animate = 0;
    this.arrowAction();
},

showAllTabs: function() {
    for (var i = 0; i < this.$tabs.length; i++) {
        $(this.$tabs[i]).css('visibility', 'visible');
    }
}
};
10
  • кроме js добавьте html к которому он применяется
    – Grundy
    23 янв 2016 в 16:10
  • html добавлять не имеет смысла, т.к. слайдер динамический - количество элементов всегда разное
    – siberian
    25 янв 2016 в 9:37
  • без примера html - ваш код ничего не делает, следовательно ваша проблема не воспроизводится
    – Grundy
    25 янв 2016 в 9:38
  • согласна. к сожалению, не могу удалить этот вопрос
    – siberian
    25 янв 2016 в 10:18
  • почему не можете? автор вроде всегда может. Кроме того, проще было добавить пример html к которому вы применяете этот код
    – Grundy
    25 янв 2016 в 10:20

1 ответ 1

2
$(".prev").click(function() {
    step = itemW + margin * 2;
    td += step;
    $(".slider-wrapper").css({
        "transform": "translate3d(" + td + "px, 0px, 0px)"
    });
    if (td == 0) $(this).hide();
    if (td != nextMax) $(".next").show()
}).hide();
$(".next").click(function() {
    step = itemW + margin * 2;
    td -= step;
    $(".slider-wrapper").css({
        "transform": "translate3d(" + td + "px, 0px, 0px)"
    });
    if (nextMax == td) $(this).hide();
    if (nextMax) $(".prev").show()
});

$(document).ready(function() {
  Slider(20);

  function Slider(margin) {
    var sliderContainer = $('#slider');
    var sliderInner = $(sliderContainer).find('.slider-inner');
    var item = $(sliderInner).find('.item');
    var itemShow = 3;
    var pagination = $(sliderContainer).find('.pagination');
    var itemL = item.length;
    var sliderInnerWidth = sliderInner.width();
    var sliderWrapper = $(sliderInner).find('.slider-wrapper');
    var itemW = (sliderInnerWidth - margin * 2 * itemShow) / itemShow;
    var sliderWrapperWidth = itemL * (itemW + margin * 2);
    var nextMax = sliderWrapperWidth - sliderInnerWidth;
    nextMax = nextMax * -1;
    var td = 0;
    var step;
    $('.prev').click(function() {
      step = itemW + margin * 2;
      td += step;
      $('.slider-wrapper').css({
        'transform': 'translate3d(' + td + 'px, 0px, 0px)'
      });
      console.log(td);

      if (td == 0) {
        $(this).hide();
      };
      if (td != nextMax) $('.next').show();

    }).hide();
    $('.next').click(function() {
      step = itemW + margin * 2;
      td -= step;
      $('.slider-wrapper').css({
        'transform': 'translate3d(' + td + 'px, 0px, 0px)'
      });
      console.log(td);
      if (nextMax == td) {
        $(this).hide()
      };
      if (nextMax) $('.prev').show();
    });
    $(sliderWrapper).css({
      'width': sliderWrapperWidth + 'px'
    });
    $(item).css({
      'width': itemW + 'px',
      'margin': margin + 'px'
    });
  };
});
* {
  padding: 0;
  margin: 0;
}
body {
  background: #EE6E73;
}
.container {
  width: 600px;
  margin: 50px auto;
}
#slider {
  background: #1AF277;
  padding: 30px 0;
}
.slider-inner {
  overflow: hidden;
}
.slider-wrapper {
  overflow: hidden;
  position: relative;
  transform: translate3d(0px, 0px, 0px);
  transition: 0.3s;
}
.slider-inner .item {
  float: left;
  text-align: center;
  position: relative;
}
.item:nth-child(2n-1) {
  background: #fdeee0;
}
.item:nth-child(3n-1) {
  background: #8E24AA;
}
.item:nth-child(4n-1) {
  background: #FF8A80;
}
.item:nth-child(5n-1) {
  background: #C51162;
}
.item {
  background: #fdeee0;
}
.prev {
  float: left;
}
.next {
  float: right;
}
.pagination {
  width: 100%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
}
.pag-item {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: #fff;
  margin: 0 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">

  <div id="slider">

    <div class="slider-inner">

      <div class="slider-wrapper">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
      </div>

      <div class="sliderControll">

        <div class="nav">
          <div class="prev">prev</div>
          <div class="next">next</div>
        </div>

        <div class="pagination">
        </div>

      </div>


    </div>

  </div>

</div>

13
  • Привет, добро пожаловать на StackOverflow на Русском. Со вставкой кода вы вроде уже отлично справились. Комментарии под чужими вопросами и ответами требуют 50 репутации, но под своими вы можете уже сейчас писать. По форматированию текста есть статья справки: ru.stackoverflow.com/editing-help
    – Nick Volynkin
    23 янв 2016 в 16:17
  • Если возникнут какие-то вопросы по использованию сайта, можете спрашивать здесь, в ответном комментарии. Начните его с @NickVolynkin, тогда мне придет уведомление.
    – Nick Volynkin
    23 янв 2016 в 16:19
  • http://codepen.io/anon/pen/xZYYzE это демо кнопок вперёд назад для кода предложенного выше
    – рони
    23 янв 2016 в 22:23
  • Демо тоже можно здесь вставлять, кнопка. { }
    – Nick Volynkin
    24 янв 2016 в 4:36
  • @NickVolynkin куда добавить фигурные скобки и что в них должно быть?
    – рони
    24 янв 2016 в 14:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.