Скролл по кругу, при клике активный элемент скролить к началу блока

200
25 октября 2019, 22:10

У меня есть скролл элементов

Должно работать на дисплеях меньше 950 пикселей. Адаптивно.

Как я могу при клике на элемент подсветить его и поставить под стрелочку? Скролл должен быть по кругу, элементов может быть больше

Answer 1

Если вам нужно зациклить элементы, тогда вариант со скроллом не подойдет. Используйте Slick Slider или любой другой слайдер для этой задачи. Для перехода к нужному слайду можно использовать небольшую функцию. Я вынес ссылки за пределы блока, если требуется именно клик по элементу, оберните его ссылкой или функцию можно изменить, или добавьте абсолютное позиционирование ссылке. Вариантов масса.

$('.slider').slick({ 
  infinite: true, 
  slidesToShow: 3, 
  slidesToScroll: 1, 
  arrows: false, 
  focusOnSelect: true 
}); 
$('.slider').on('wheel', (function(e) { 
  e.preventDefault(); 
 
  if (e.originalEvent.deltaY < 0) { 
    $(this).slick('slickNext'); 
  } else { 
    $(this).slick('slickPrev'); 
  } 
}));
body { 
  background: #eee; 
  margin: 0; 
  padding: 0; 
} 
 
span { 
  display: block; 
  background: #fff; 
  color: #333; 
  font-size: 36px; 
  width: 100px; 
  line-height: 100px; 
  margin: 10px auto; 
  border-radius: 50px; 
  position: relative; 
  text-align: center; 
} 
 
.slider { 
  margin: 5%; 
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css" rel="stylesheet" /> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script> 
 
<div class="slider"> 
  <div> 
    <span>1</span> 
  </div> 
  <div> 
    <span>2</span> 
  </div> 
  <div> 
    <span>3</span> 
  </div> 
  <div> 
    <span>4</span> 
  </div> 
  <div> 
    <span>5</span> 
  </div> 
  <div> 
    <span>6</span> 
  </div> 
</div>

Если слайдер - это не тот случай и зацикливать прокрутку элементов не нужно, тогда вам нужна простейшая функция .scrollLeft.

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

$('.go-to-start').click(function(){
    $('.container').animate({
        scrollLeft: '0px',
    }, 300);
});
READ ALSO
Как в vue.js + typeScript, выводится тип для this у методов
javascript

Как в vue.js + typeScript, выводится тип для this у методов

В доке vuejs для подключения typescript рекомендуют использовать конструкцию типа -

 145
OpenCart | Ошибка при попытке добавлении заказа
javascript

OpenCart | Ошибка при попытке добавлении заказа

В данный момент переделываю обычный html шаблон в шаблон для opencart 3x

 173
что обозначает этот код
javascript

что обозначает этот код

изучал код простой игры змейки на js и не понимаю два фрагмента кода

 189
Vue CASL получить роль пользователя от Vuex
javascript

Vue CASL получить роль пользователя от Vuex

Есть тестовый сайт на spring boot

 178