Как сделать скролл картинок по горизонтали?

255

21 ноября 2021, 11:10

Как сделать, что бы картинки располагались как на примере

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

Answer 1

Легче и не придумаешь )

var leftBtn = document.querySelector('#left'); 
var rightBtn = document.querySelector('#right'); 
 
leftBtn.addEventListener('click', slide); 
rightBtn.addEventListener('click', slide); 
 
function slide(e) { 
  e.target.id === 'left' ? scroll(100) : scroll(-100); 
} 
 
function scroll(val) { 
  document.querySelector('ul').scrollBy({  
    left: val, 
    behavior: 'smooth'  
  }); 
}

* { 
  margin: 0; 
  padding: 0; 
} 
 
body { 
  height: 100vh; 
  display: flex; 
  align-items: center; 
} 
 
div { 
  width: 100%; 
  display: grid; 
  grid-gap: 5rem; 
  grid-template-columns: 60px 1fr 60px; 
  grid-template-rows: 50px; 
} 
 
ul { 
  width: 100%; 
  display: grid; 
  grid-gap: 1rem; 
  grid-template-columns: repeat(20, 100px); 
  list-style: none; 
  overflow: hidden; 
  scroll-snap-type: x mandatory; 
} 
 
li { 
  background-color: #c62828; 
  scroll-snap-align: center; 
} 
 
button { 
  background-color: #212121; 
  border: none; 
  cursor: pointer; 
} 
 
#left { 
  clip-path: polygon(100% 0, 0 50%, 100% 100%); 
} 
 
#right { 
  clip-path: polygon(0 0, 100% 50%, 0 100%); 
}

<div> 
  <button id="left"></button> 
  <ul> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
  </ul> 
  <button id="right"></button> 
</div>

Answer 2

Почему не придумаешь CTRL + C и CTRL + V

https://learn.javascript.ru/introduction-browser-events#tasks

 let i = 1; 
    for(let li of carousel.querySelectorAll('li')) { 
      li.style.position = 'relative'; 
      li.insertAdjacentHTML('beforeend', `<span style="position:absolute;left:0;top:0">${i}</span>`); 
      i++; 
    } 
 
    /* конфигурация */ 
    let width = 130; // ширина картинки 
    let count = 3; // видимое количество изображений 
 
    let list = carousel.querySelector('ul'); 
    let listElems = carousel.querySelectorAll('li'); 
 
    let position = 0; // положение ленты прокрутки 
 
    carousel.querySelector('.prev').onclick = function() { 
      // сдвиг влево 
      position += width * count; 
      // последнее передвижение влево может быть не на 3, а на 2 или 1 элемент 
      position = Math.min(position, 0) 
      list.style.marginLeft = position + 'px'; 
    }; 
 
    carousel.querySelector('.next').onclick = function() { 
      // сдвиг вправо 
      position -= width * count; 
      // последнее передвижение вправо может быть не на 3, а на 2 или 1 элемент 
      position = Math.max(position, -width * (listElems.length - count)); 
      list.style.marginLeft = position + 'px'; 
    };

body { 
  padding: 10px; 
} 
 
.carousel { 
  position: relative; 
  width: 398px; 
  padding: 10px 40px; 
  border: 1px solid #CCC; 
  border-radius: 15px; 
  background: #eee; 
} 
 
.carousel img { 
  width: 130px; 
  height: 130px; 
  /* делаем этот элемент блочным, чтобы убрать лишнее пространство вокруг картинок */ 
  display: block; 
} 
 
.arrow { 
  position: absolute; 
  top: 60px; 
  padding: 0; 
  background: #ddd; 
  border-radius: 15px; 
  border: 1px solid gray; 
  font-size: 24px; 
  line-height: 24px; 
  color: #444; 
  display: block; 
} 
 
.arrow:focus { 
  outline: none; 
} 
 
.arrow:hover { 
  background: #ccc; 
  cursor: pointer; 
} 
 
.prev { 
  left: 7px; 
} 
 
.next { 
  right: 7px; 
} 
 
.gallery { 
  width: 390px; 
  overflow: hidden; 
} 
 
.gallery ul { 
  height: 130px; 
  width: 9999px; 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  transition: margin-left 250ms; 
  /* удаляем пустое пространство между элементами li, у которых установлен inline-block */ 
  /* http://davidwalsh.name/remove-whitespace-inline-block */ 
  font-size: 0; 
} 
 
.gallery li { 
  display: inline-block; 
}

  <div id="carousel" class="carousel"> 
    <button class="arrow prev">⇦</button> 
    <div class="gallery"> 
      <ul class="images"> 
        <li><img src="https://ru.js.cx/carousel/1.png"></li> 
        <li><img src="https://ru.js.cx/carousel/2.png"></li> 
        <li><img src="https://ru.js.cx/carousel/3.png"></li> 
        <li><img src="https://ru.js.cx/carousel/4.png"></li> 
        <li><img src="https://ru.js.cx/carousel/5.png"></li> 
        <li><img src="https://ru.js.cx/carousel/6.png"></li> 
        <li><img src="https://ru.js.cx/carousel/7.png"></li> 
        <li><img src="https://ru.js.cx/carousel/8.png"></li> 
        <li><img src="https://ru.js.cx/carousel/9.png"></li> 
        <li><img src="https://ru.js.cx/carousel/10.png"></li> 
      </ul> 
    </div> 
    <button class="arrow next">⇨</button> 
  </div>

Answer 3

Вот прекрасный пример

var slideIndex = 1; 
showSlides(slideIndex); 
 
// Next/previous controls 
function plusSlides(n) { 
  showSlides(slideIndex += n); 
} 
 
// Thumbnail image controls 
function currentSlide(n) { 
  showSlides(slideIndex = n); 
} 
 
function showSlides(n) { 
  var i; 
  var slides = document.getElementsByClassName("mySlides"); 
  var dots = document.getElementsByClassName("dot"); 
  if (n > slides.length) { 
    slideIndex = 1 
  } 
  if (n < 1) { 
    slideIndex = slides.length 
  } 
  for (i = 0; i < slides.length; i++) { 
    slides[i].style.display = "none"; 
  } 
  for (i = 0; i < dots.length; i++) { 
    dots[i].className = dots[i].className.replace(" active", ""); 
  } 
  slides[slideIndex - 1].style.display = "block"; 
  dots[slideIndex - 1].className += " active"; 
}

* { 
  box-sizing: border-box 
} 
 
 
/* Slideshow container */ 
 
.slideshow-container { 
  max-width: 1000px; 
  position: relative; 
  margin: auto; 
} 
 
 
/* Hide the images by default */ 
 
.mySlides { 
  display: none; 
} 
 
 
/* Next & previous buttons */ 
 
.prev, 
.next { 
  cursor: pointer; 
  position: absolute; 
  top: 50%; 
  width: auto; 
  margin-top: -22px; 
  padding: 16px; 
  color: white; 
  font-weight: bold; 
  font-size: 18px; 
  transition: 0.6s ease; 
  border-radius: 0 3px 3px 0; 
  user-select: none; 
} 
 
 
/* Position the "next button" to the right */ 
 
.next { 
  right: 0; 
  border-radius: 3px 0 0 3px; 
} 
 
 
/* On hover, add a black background color with a little bit see-through */ 
 
.prev:hover, 
.next:hover { 
  background-color: rgba(0, 0, 0, 0.8); 
} 
 
 
/* Caption text */ 
 
.text { 
  color: #f2f2f2; 
  font-size: 15px; 
  padding: 8px 12px; 
  position: absolute; 
  bottom: 8px; 
  width: 100%; 
  text-align: center; 
} 
 
 
/* Number text (1/3 etc) */ 
 
.numbertext { 
  color: #f2f2f2; 
  font-size: 12px; 
  padding: 8px 12px; 
  position: absolute; 
  top: 0; 
} 
 
 
/* The dots/bullets/indicators */ 
 
.dot { 
  cursor: pointer; 
  height: 15px; 
  width: 15px; 
  margin: 0 2px; 
  background-color: #bbb; 
  border-radius: 50%; 
  display: inline-block; 
  transition: background-color 0.6s ease; 
} 
 
.active, 
.dot:hover { 
  background-color: #717171; 
} 
 
 
/* Fading animation */ 
 
.fade { 
  -webkit-animation-name: fade; 
  -webkit-animation-duration: 1.5s; 
  animation-name: fade; 
  animation-duration: 1.5s; 
} 
 
@-webkit-keyframes fade { 
  from { 
    opacity: .4 
  } 
  to { 
    opacity: 1 
  } 
} 
 
@keyframes fade { 
  from { 
    opacity: .4 
  } 
  to { 
    opacity: 1 
  } 
}

<!-- Slideshow container --> 
<div class="slideshow-container"> 
 
  <!-- Full-width images with number and caption text --> 
  <div class="mySlides fade"> 
    <div class="numbertext">1 / 3</div> 
    <img src="https://picsum.photos/50/50" style="width:100%"> 
    <div class="text">Caption Text</div> 
  </div> 
 
  <div class="mySlides fade"> 
    <div class="numbertext">2 / 3</div> 
    <img src="https://picsum.photos/50/51" style="width:100%"> 
    <div class="text">Caption Two</div> 
  </div> 
 
  <div class="mySlides fade"> 
    <div class="numbertext">3 / 3</div> 
    <img src="https://picsum.photos/51/50" style="width:100%"> 
    <div class="text">Caption Three</div> 
  </div> 
 
  <!-- Next and previous buttons --> 
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a> 
  <a class="next" onclick="plusSlides(1)">&#10095;</a> 
</div> 
<br> 
 
<!-- The dots/circles --> 
<div style="text-align:center"> 
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div>