Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.06.2019, 12:21
Аспирант
Отправить личное сообщение для _marisha Посмотреть профиль Найти все сообщения от _marisha
 
Регистрация: 18.05.2018
Сообщений: 71

Слайдер внизу баннера
Доброго времени суток!
На сайте существует баннер и внизу баннера отображается панель навигации (скрин "Слайдер внизу баннера")
При смене баннера подсвечивается соответствующий пункт внизу.
На данный момент, если добавить много пунктов, то названия выходят за области и расстояние между пунктами становится минимальное (т.е. текст становится нечитаемым).
Хотелось бы сделать так, чтобы при большом количестве пунктов слайдер прокручивался влево и вправо.
Подскажите, пожалуйста, каким образом возможно сделать? Спасибо.

На данный момент навигация строится следующим образом:
jQuery(document).ready(function(){
      jQuery('.main_slider .slider li').css('display','block');
      main_slider = jQuery('.main_slider .slider').bxSlider({
pager:false,
controls:false,
pause:6000,
 mode:'fade',
		  <?if(count($arResult["ITEMS"])>1):?>
 auto:true,
<?endif;?>
          onSlideAfter: function ($slideElement, oldIndex, newIndex) {
              jQuery('.slider_pager li').removeClass('active');
              if (jQuery('.slider_pager .pages').eq(0).find('li').eq(newIndex).length) {
                  jQuery('.slider_pager .pages').eq(0).find('li').eq(newIndex).addClass('active');
              } else {
                  jQuery('.slider_pager .pages').eq(1).find('li').eq(newIndex-jQuery('.slider_pager .pages').eq(0).find('li').length).addClass('active');
              }
          }
      });
      jQuery('.slider_pager li').eq(0).addClass('active');
      jQuery('.slider_pager li').click(function () {
          main_slider.goToSlide(jQuery('.slider_pager li').index(jQuery(this)));
          jQuery('.slider_pager li').removeClass('active');
          jQuery(this).addClass('active');
      });
})
Изображения:
Тип файла: jpg Слайдер внизу баннера.jpg (105.4 Кб, 2 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 11.06.2019, 12:47
Аспирант
Отправить личное сообщение для _marisha Посмотреть профиль Найти все сообщения от _marisha
 
Регистрация: 18.05.2018
Сообщений: 71

Пункты идут в виде списка
<ul class="pages">
                                               <li class="">ОПЦИИ</li>
                                               <li>ИСПАРИТЕЛИ VED E (ЭЛЕКТРИЧЕСКИЕ)</li>
                                               <li>ИСПАРИТЕЛИ VWW IS (ЖИДКОСТНЫЕ)</li>
                                               <li>ИСПАРИТЕЛЬНЫЕ УСТАНОВКИ</li>
                                               <li>СТАНЦИИ АВТОНОМНОГО ГАЗОСАНБЖЕНИЯ</li>
                                               <li>ГАЗОВЫЕ ГЕНЕРАТОРЫ</li>
                                               <li>ИНФОКРАСНЫЕ ИЗЛУЧАТЕЛИ</li>
                                               <li>ПРОЕКТИРОВАНИЕ</li>
                                               <li>СТРОИТЕЛЬСТВО МОНТАЖ ПУСКО-НАЛАДКА</li>
                                               <li>ЭКСПЛУАТАЦИЯ</li>
                                               <li>МЕТАЛЛООЗАГОТОВКА И МЕТАЛЛООБРАБОТКА</li>
                                               <li>ИЗГОТОВЛЕНИЕ ИЗДЕЛИЙ НА ЗАКАЗ</li>
                                           </ul>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
вкладки и слайдер slicks ildar94 Элементы интерфейса 6 16.01.2018 14:29
Как поместить слайдер в модальное окно? ИщуПомощь Элементы интерфейса 2 24.08.2017 20:27
Нужно сделать слайдер контента OgecuT Элементы интерфейса 2 23.07.2014 13:31
Слайдер во время загрузки страницы v.v.dankiv jQuery 0 14.04.2013 10:16
Слайдер с помощью CSS и jQuery - 1000 р. stixia007 jQuery 21 27.03.2013 20:44