даже не рассматривал его функционал и возможности. То, что предоставляет smartgrid, мне кажется, уже не переплюнуть
$(function () {
var eSliderWidth = 80;
var eDoc = $(document);
var eDin = $('.din');
var eLine = $('.din__line', eDin);
var eSlider = $('.din__slider', eDin);
var ePane = $('.din__pane', eDin);
var eCont = $('.din__container', eDin);
var isSliderMove = false;
var startX = false;
var startXPos = false;
eSlider.on('mousedown', function (e) {
isSliderMove = true;
startX = e.clientX;
startXPos = eSlider.position().left;
console.info(startX);
eDoc.on('mousemove.din', sliderMove);
});
eDoc.on('mouseup', function () {
isSliderMove = false;
startX = false;
eDoc.off('mousemove.din', sliderMove);
});
function sliderMove(e) {
if (startX === false) return;
var x = e.clientX - startX;// - e.offsetX;
x = startXPos + x;
if (x < 0) x = 0;
var max = eLine.width() - eSliderWidth;
if (x > (max)) x = max;
eSlider.css({left: x + 'px'});
var percentSlider = Math.round((x * 100) / max);
var paneWidth = ePane.width() - eCont.width();
var panePos = -Math.round((percentSlider * paneWidth) / 100);
console.log(paneWidth, panePos);
ePane.css({left: panePos + 'px'});
}
});.din {
margin-bottom: 70px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.din__line {
height: 4px;
background: #E1E1E1;
position: relative;
margin-bottom: 30px; }
.din__slider {
width: 80px;
height: 12px;
background: url("/design/images/slider.png");
position: absolute;
left: 0;
top: -4px;
cursor: pointer; }
.din__item {
width: 260px;
display: inline-block;
vertical-align: top;
padding: 0 10px; }
.din__item:first-child {
padding-left: 0;
width: 250px; }
.din__container {
overflow: hidden;
position: relative;
height: 210px; }
.din__container::after {
content: '';
width: 130px;
position: absolute;
right: 0;
bottom: 0;
top: 0;
background: -webkit-linear-gradient(right, #fff, rgba(255, 255, 255, 0));
background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
z-index: 3;
pointer-events: none; }
.din__pane {
top: 0;
left: 0;
height: 210px;
position: absolute;
white-space: nowrap;
font-size: 0; }
.din-item__image {
display: block;
width: 100%; }
.din-item__body {
border: 2px solid #D5D5D5;
border-top: none;
text-align: center;
font-size: 16px;
color: #454545;
padding: 25px 10px; }
(Наверное так в ТЗ написано. А с тех. заданием не поспоришь)