Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.05.2019, 15:54
Новичок на форуме
Отправить личное сообщение для alexvtokar Посмотреть профиль Найти все сообщения от alexvtokar
 
Регистрация: 17.05.2019
Сообщений: 1

Карусель на чистом javascript
Здравствуйте!
Готов оплатить работу на киви-кошелёк!

Условия задачи:
Имеется множество svg-файлов (пример), с интерактивными элементами внутри. В них лезть, и что-то менять нельзя! Эти файлы необходимо выводить в html при помощи <object></object>.

Что требуется:
Вывести карусель из svg-картинок. У карусели должны быть элементы управления: стрелки вправо-влево, и кнопки вызова каждого слайда (не знаю, как назвать, типа точечки, показывающие, какой слайд сейчас активен). Элементы управления нельзя привязывать к родительскому элементу карусели (то есть, должна быть возможность элементы управления воткнуть в любом месте страницы). Карусель не должна быть avtoplay, она двигается только при нажатии элементов управления.

В чём моя проблема:
Под эти цели подходит обычная Bootstrap-3 carousel, однако, при её использовании перестают работать интерактивные элементы внутри svg-картинок. Я подозреваю, это потому, что слайды вызываются при помощи jQuery. Думаю, что если написать что-то подобное на чистом js, проблема исчезнет. Однако, с js у меня пока что натянутые отношения.

Спасибо за любую помощь, повторюсь, готовое решение с радостью оплачу (только на киви кошель).
Ответить с цитированием
  #2 (permalink)  
Старый 17.05.2019, 16:37
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,879

На сайте полно каруселей.
Пример на базе одной из каруселей от рони
Ничего не менял, кроме контента
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .slider{
  position: relative;
  }

  .slider__container{
  white-space: nowrap;
  overflow: hidden;
  max-width: 790px;
  margin: 0 auto;
  border: 1px solid #0000FF;
  }

  .slider__scroll{
  position: relative;
  left: 0;
  transform: translateX(0);
  transition: all 0.4s ease-in-out;
  display: inline-block;
  white-space: nowrap;
  }
  .slider__item{
  display: inline-block;
  margin: 0 30px;
  width: 600px;
  height: 200px;
 
  }


 .slider__dots-item{
  width: 13px;
  height: 13px;
  border: 1px solid black;
  display: inline-block;
  border-radius: 50%;
  margin-right: 5px;
  cursor: pointer;
  transition: all 0.4s;
}

.slider__dots-item.slider__dots-item_active{
  background: black;
  transition: all 0.4s;
}

.slider__dots-item:last-child{
  margin-right: 0;
}

.slider__dots-item:hover{
  background: black;
}

  </style>
</head>
<body>
 <div class="slider">
       <div class="slider__btn slider__btn_left">left</div>
       <div class="slider__btn slider__btn_right">right</div>

        <div class="slider__container">
          <div class="slider__scroll">
            <div class="slider__item"><object data="https://spkz.site/alt.svg"></object></div>
            <div class="slider__item"><object data="https://spkz.site/alt.svg"></object></div>
            <div class="slider__item"><object data="https://spkz.site/alt.svg"></object></div>
          </div>
       </div>

     <div class="slider__dots">
     <span class="slider__dots-item slider__dots-item_active"></span>
     <span class="slider__dots-item"></span>
     <span class="slider__dots-item"></span>
    </div>

</div>


  <script>
  var sliderBtnLeft=document.querySelector('.slider__btn_left');
  var sliderBtnRight=document.querySelector('.slider__btn_right');
  var sliderDots = document.querySelectorAll('.slider__dots-item'); //кружочки
  var sliderItems=document.querySelectorAll('.slider__item');
  var sliderIndex=0;
  var sliderScroll=document.querySelector('.slider__scroll');
  var Width=0;
  function sliderMove(up)
  {
  sliderDots[sliderIndex].classList.remove('slider__dots-item_active');
  sliderIndex=(sliderIndex + up + sliderItems.length)% sliderItems.length;
  sliderDots[sliderIndex].classList.add('slider__dots-item_active');
  Width=0;
  for(var i=0;i < sliderIndex;i++)
  {
  Width +=sliderItems[i].offsetWidth + 60
  }
  sliderScroll.style.transform='translateX(-' + Width + 'px)';
  }
  function dotMove(i)
  {
     sliderMove(i - sliderIndex);
  }
  [...sliderDots].forEach((dot, i) => dot.addEventListener('click', dotMove.bind(dot, i)));
  sliderBtnRight.onclick=sliderMove.bind(null,1);
  sliderBtnLeft.onclick=sliderMove.bind(null,-1);
  </script>
</body>
</html>

Последний раз редактировалось Dilettante_Pro, 17.05.2019 в 16:41.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Auto resizing textarea на чистом JavaScript volshebnyi jQuery 1 16.09.2016 10:34
Помогите распарсить Гугл табличку на чистом javascript. sovsem-nub AJAX и COMET 0 29.04.2016 17:59
JSON запрос на чистом javascript FaLer Events/DOM/Window 5 12.05.2015 18:12
Последние книги по JavaScript! monolithed Учебные материалы 7 26.10.2010 18:40
Выдвет ошибку JavaScript Ромио Opera, Safari и др. 4 21.10.2010 19:34