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

#javascript #jquery #css #вёрстка #slider

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


    

Ответы

Ответ 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;
}
  

    

      

      

      

    
    

      
    
  




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


Ответ 2

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


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