Где найти слайдер такого формата?

294
21 января 2018, 03:24

Как сделать его самостоятельно? Если есть ссылка, буду очень благодарен.

Answer 1

Это вариант со связкой большой и малой фото (на чистом JS):

"use strict"; 
var gallery = document.getElementById('gallery'); 
var bImg = document.getElementById('b-img'); 
var minImgs = document.getElementById('min-imgs'); 
minImgs.addEventListener('click', function (e) { 
    var target = e.target; 
     
    if(target.classList.contains('img')){ 
        bImg.src = target.src;  
    } 
});
* { 
    margin: 0; 
    padding: 0; 
} 
ul { 
    list-style: none; 
} 
#gallery { 
    width: 800px; 
    margin: 0 auto; 
    border: 1px solid grey; 
} 
.min-imgs { 
    padding: 10px 0; 
    display: flex; 
    justify-content: space-between; 
} 
.min-imgs li { 
    width: 30%; 
    height: 150px; 
    overflow: hidden; 
} 
img { 
    display: block; 
    width: 100%; 
    height: auto; 
    cursor: pointer; 
} 
.container { 
    width: 80%; 
    margin: 0 auto; 
}
  <div id="gallery"> 
    <ul id="min-imgs" class="min-imgs"> 
      <li><img src="http://luxfon.com/large/201203/2608.jpg" class="img" alt="img"></li> 
      <li><img src="http://luxfon.com/large/201203/8886.jpg" class="img" alt="img"></li> 
      <li><img src="http://luxfon.com/large/201203/1341.jpg" class="img" alt="img"></li> 
    </ul> 
    <div class="container"> 
      <img src="http://luxfon.com/large/201203/2608.jpg" alt="img" id="b-img"> 
    </div> 
  </div>

Чуть, позже дополню и на jQuery, посмотрите сначала этот пример, тут принцип практически всех слайдеров.

Answer 2

Посмотрите в сторону slick slider. Общий блок объявляете в js. Внутри делаете блок с картинкой и то, что справа.

http://kenwheeler.github.io/slick/

READ ALSO
Создать динамические URL в HTML на основе JavaScript

Создать динамические URL в HTML на основе JavaScript

Провожу эксперимент с использованием AMT Amazon Mechanical Turk, требуется перенаправлять пользователей с AMT по ссылке на сервер, где они, собственно,...

306
Не работает font-face [требует правки]

Не работает font-face [требует правки]

Вопрос уже много раз тут звучал, но ответы никакие не помогают , обычно я использую отдельный css файл, в котором прописываю font-face, путь к шрифту

251
Как настроить изменение БД MySQL при работе через Github

Как настроить изменение БД MySQL при работе через Github

Ситуация такова: планируется организация работы над собственной темой через GithubВ репозитории будет храниться, по сути, только сама тема,...

265
PHP MYSQL два SELECT основываясь на первом значении

PHP MYSQL два SELECT основываясь на первом значении

Есть таблица chats, в ней поля id, lastupdateТак же есть таблица members, в ней поля chatid, userid, lastvisit

297