2

Не могу сделать медиа-слайдер. Хочу сделать эффект фингер-слайда с помощью мышки используя js или jquery.

.row{
  display:flex;
  flex-direction:row;
  height:100px;
  overflow-x:scroll;
  width:100%;
}
.media_item{
  margin-right:10px;
  cursor:move;
}
.media_item img{
  width:auto;
  height:100%;
}
.image_slider::-webkit-scrollbar {
    width: 3px;
    opacity: 0;
    height: 5px;
}
 
.image_slider::-webkit-scrollbar-track {
	background: transparent;
	border:1px solid rgba(255,255,255,0.2);
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.image_slider::-webkit-scrollbar-thumb {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: #ccc;
}
<div class="row image_slider">

  <div class="media_item">
    <img src="https://cdn.pixabay.com/photo/2013/04/06/11/50/image-editing-101040_960_720.jpg">
  </div>
  <div class="media_item">
    <img src="https://cdn.pixabay.com/photo/2013/04/06/11/50/image-editing-101040_960_720.jpg">
  </div>
  <div class="media_item">
    <img src="https://cdn.pixabay.com/photo/2013/04/06/11/50/image-editing-101040_960_720.jpg">
  </div>
  <div class="media_item">
    <img src="https://cdn.pixabay.com/photo/2013/04/06/11/50/image-editing-101040_960_720.jpg">
  </div>
  <div class="media_item">
    <img src="https://cdn.pixabay.com/photo/2013/04/06/11/50/image-editing-101040_960_720.jpg">
  </div>
			
</div>

8
  • Что именно у вас не получается? Приведите ваш код
    – vihtor
    23 дек 2017 в 7:49
  • Есть же код....
    – Bekzod
    23 дек 2017 в 7:51
  • 2
    Если вам просто надо что бы оно смещалось, то отслеживайте клик, запоминайте позицию курсора, вешайте маусмув и смещайте на разницу первоначальной позиции и текущей. Если вам нужно что бы это было с инерцией, то это задача не для SO и вообще лучше взять какой-то плагин тот же Slick 23 дек 2017 в 8:02
  • 1
    Такие штуки как свайп, драг-н-дроп и подобные, на первый взляд несложны, но содержат много подводных камней. Поэтому я бы посоветовал поискать библиотеку для swipe с поддержкой мышки (такие есть, я использовал в реакт-проекте, но сейчас не вспомню). 23 дек 2017 в 9:45
  • 1
    Собсвенно, сверху уже посоветовали :) 23 дек 2017 в 9:46

0

Ваш ответ

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

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