Может кто подсказать слайдер с миниатюрами слева?

Question

[Николай Добрынин]

Помогите найти слайдер в котором можно настроить, и точки и миниатюры с лева и стрелки. Что то типо такого.

Answer 1

[tendkuh]

https://www.jssor.com/demos/image-gallery-with-ver...

Comments

[Николай Добрынин]

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

[ProjectSoft]

Без JS
https://codepen.io/huijing/pen/GvNLJm

[Николай Добрынин]

ProjectSoft, а как перенести миниатюры налево, и добавить точки и стрелки?

[ProjectSoft]

fbir, т. е. вы не хотите CSS читать и разбирать что да как?
Поверьте, вам это ой как пригодится. Я про умение читать код.

[Николай Добрынин]

ProjectSoft, признаться я часа полтора просидел но так и не понял как переместить. Кроме как изменив позицию position

[tendkuh]

fbir,
это просто список с классом ="thumbnails" состоящий из обычных ul и li который можно поместить в начало без CSS
но делать это можно внутри контейнера, а не снаружи него, потому-что это контейнер походу flexbox
https://codepen.io/anon/pen/RmVLej

[tendkuh]

fbir, я первый раз тоже пробовал изменить position и тщетно, не вы один, но потом подумал, если тут без JS, то всё должно быть намного проще по логике создателя, просто перенеся элементы в другое место

И вроде нормально))

<div class="container">

  <!-- Начало превьюшек --> 
  <ul class="thumbnails">
    <li>
      <a href="#slide1"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw1.jpg" /></a>
    </li>
    <li>
      <a href="#slide2"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw2.jpg" /></a>
    </li>
    <li>
      <a href="#slide3"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw3.jpg" /></a>
    </li>
    <li>
      <a href="#slide4"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw4.jpg" /></a>
    </li>
    <li>
      <a href="#slide5"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw5.jpg" /></a>
    </li>
  </ul>
  <!-- Конец превьюшек -->

  <ul class="slides">
    <li id="slide1"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw1.jpg" alt="" /></li>
    <li id="slide2"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw2.jpg" alt="" /></li>
    <li id="slide3"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw3.jpg" alt="" /></li>
    <li id="slide4"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw4.jpg" alt="" /></li>
    <li id="slide5"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw5.jpg" alt="" /></li>
  </ul>
</div>

[ProjectSoft]

tendkuh, классам .thumbnails и .slides пропишитеposition: relative; Иначе overflow для них бесполезен.

[tendkuh]

ProjectSoft, вчера мельком глянул, там ещё гдето использовался display: block зачемто, для чего именно он?

[ProjectSoft]

tendkuh, нет там block.
Единственная сложность будет это перевести всё в проценты для переноса в конкретное место на странице товара. С нахрапа может не получиться.

[Николай Добрынин]

tendkuh, вот так вроде то что надо, но что делать с стрелками и точками?

[tendkuh]

fbir, для этого подойдёт SVG или PNG с абсолютным позиционированием вроде как, внутри блока "slides" похоже

а для точек придётся создать наверное отдельный блок, чтобы не было путанины и сгруппировать их,

круги можно сделать на CSS задав border-radius: 50% но я бы так не извращался, и сделал бы их тоже на SVG или PNG в зависимости от вашего выбора, чтобы код был однородным, а элементы навигации в одном формате.

потом "натравить" точки на теже ссылки куда и ведут превьюшки

по поводу стрелок сказать не могу, может нужен JS для "Назад" и "Вперёд", но не уверен, может можно обойтись и без скриптов тоже

создадите новый вопрос для того чтобы примотать стрелки "влево" и "вправо" вам дальше помогут

[Николай Добрынин]

tendkuh, Правильно ли я понял, можно сделать вот такую же конструкцию

• 
  
  
  
• 
  
  
  
• 
  
  
  
• 
  
  
  
• 
  
  
  

завернув ее в div ивместо картинок поставить либо SVG или PNG точки? ну или их сделать в css что как по мне эстетичнее?

[tendkuh]

fbir, на первое время пока учитесь старайтесь вообще всё оборачивать в дивы, это называется дивянка или диватоз, и считается заболеванием, но так проще учиться наглядный потом для себя код получается, который ты узнаёшь через десятки лет если его откроешь без комментариев в самом коде

но на будущее layout макета так делать нельзя, с работы выгонят, только отдельные какието компоненты вроде галереи, куда никто не заходит имхо))

завернув ее в div ивместо картинок поставить либо SVG или PNG точки?

точки и стрелки не вместо, а поверх картинок, задав вроде значение z-index повыше

[Николай Добрынин]

tendkuh, что то меня вообще сейчас запутал ваш ответ про точки. Их я так понимаю надо будет переместить на картинку это ясно.

[tendkuh]

fbir, лучше чем это сделано в таких примерах как owl или slick мы врядли изобретём вместе, нажмите F12, затем CTRL + SHIFT + С и понаводите мышкой как это сделано во всех других галереях которые сможете найти, или в той, что я указал в качестве ответа в самом вверху в ответе

по поводу точек, они на вашем скриншоте находятся не под изображениями, а "над" ними, это значит что они сверху галерии должны располагаться, для этого используется только z-index

[Николай Добрынин]

tendkuh, Точки по итогу сделал, а вот вопрос со стрелками открыт, и судя по всему без скрипта не обойтись. А можно как то придумать у того же owl слайдера эти боковые миниатюры?

[Николай Добрынин]

tendkuh, в общем долго мучался, по итогу сел и за пару часов составил то что мне надо через https://www.jssor.com/demos/image-gallery-with-ver... вот эту крутую штуку. Не все удалось там же реализовать, но думаю получится. Спасибо за помощь.

[Николай Добрынин]

tendkuh, Можете подсказать, как сделать :hover с вот таким
-webkit-box-shadow: 0px 0px 23px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 23px -1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 23px -1px rgba(0,0,0,0.75);

https://www.jssor.com/byfbir/image-gallery-with-ve...