Слайдер галерея для интернет магазина

В интернет магазинах часто можно увидеть слайдер галерею, где можно просмотреть фото товара с возможностью увеличить фото при наведении курсора. Это очень удобно для посетителя сайта, так как можно рассмотреть товар в деталях.

See the Pen Slick slider with dots by Aleksandrs (@CoolS2) on CodePen.

Слайдер галерея

Чтобы сделать такой слайдер, нам понадобиться следующее:

• jQuery
• Slick Slider

Не будем изобретать велосипед, а возьмем готовый и быстрый слайдер, который работает на всех браузерах. Теперь добавим картинки и блоки в html

 <div class="main">  
  <div id="carousel" class="slider">  
   <div data-thumb="https://smartideal.net/wp-content/uploads/2018/08/guitar4.jpg"><img src="https://smartideal.net/wp-content/uploads/2018/08/guitar4.jpg" alt=""></div>
   
   <div data-thumb="https://smartideal.net/wp-content/uploads/2018/08/guitar2.jpg"><img src="https://smartideal.net/wp-content/uploads/2018/08/guitar2.jpg" alt=""></div> 
   
   <div data-thumb="https://smartideal.net/wp-content/uploads/2018/08/guitar3.jpg"><img src="https://smartideal.net/wp-content/uploads/2018/08/guitar3.jpg" alt=""></div>  
  </div> 
 </div>

Теперь все это дело оформим стилями

.main{
  width: 560px;
  margin:0 auto;
}
.slick-slide{
  overflow:hidden;
  height: 310px;
  position: relative;
  z-index:999;
}
.slick-slide img{
  transition: width 0.5s;
  height: auto;
  width:100%;
  object-fit:cover;
}
.slick-list img{
  width:100%;
  height: auto;
  object-fit: cover;
}
.slick-dots li{
  width: 25%;
  object-fit:cover;
  display:inline-block;
  margin:0;
  height: auto;
  padding:20px 10px;
  
}
.slick-dots li img{
  width:100%;
  height: 100px;
  object-fit:cover;
  border-radius:6px;
  transition: 0.5s;
  border: 1px solid #fff;
  padding:5px;
  box-shadow: 0.5px 3px 7px rgba(0, 0, 0, 0.18);
  -moz-box-shadow: 0.5px 3px 7px rgba(0, 0, 0, 0.18);
  -webkit-box-shadow: 0.5px 3px 7px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.slick-dots li:hover img{
  -webkit-box-shadow: 0.9px 4.9px 21px rgba(0, 0, 0, 0.25);
  box-shadow: 0.9px 4.9px 21px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0.9px 4.9px 21px rgba(0, 0, 0, 0.25);
  border: 1px solid #e2e2e2;
}
.slick-dots{
  position: relative;
  text-align:left;
  bottom: 0;
}

Теперь самое интересное, первое что нам надо сделать, чтобы слайдер работал, это его инициализировать и сделать это можно следующим образом:

$(".slider").slick({
    autoplay: false,
    dots: true,
    customPaging : function(slider, i) {
        var thumb = $(slider.$slides[i]).data('thumb');
        return '<a><img src="'+thumb+'"></a>';
    },
});

Так же в параметрах слайдера мы убрали autoplay, добавили точки для перелистывания слайдов, а также в эти точки добавили изображения слайдов.

На данный момент, слайдер уже будет работать, но не будет ничего происходить при наведении курсора на картинку.

Чтобы функция увелечения работала, нужно добавить следующую функцию:

var trueHeight,
      trueWidth,
      img;
  $('.slick-slide').hover(function(e){
   
    img = $(this).find('img');
    trueHeight = img.height();
    trueWidth = img.width();
    var imgHeight = img.prop('naturalHeight');
    var imgWidth = img.prop('naturalWidth');
   
    img.height(imgHeight);
    img.width(imgWidth);
    
    $(this).mousemove(function(e) {

       var cursor_position = {
      x: e.clientX - $(this).offset().left + $(window).scrollLeft(), // Положение курсора слева
      y: e.clientY - $(this).offset().top + $(window).scrollTop() // Положение курсора сверху
       },
    imagebox__img = img,
    image_position = {
      left: ((cursor_position.x / $(this).innerWidth()) * imagebox__img.width() - cursor_position.x) * -1, // Вычисляем позицию картинки слева
      top: ((cursor_position.y / $(this).innerHeight()) * imagebox__img.height() - cursor_position.y) * -1 // Вычисляем позицию картинки сверху
    }
    imagebox__img.css({
      position: 'absolute', 
      top: image_position.top, 
      left: image_position.left
    });

      
      });
  }, function(){
    
     img.css({'position': 'relative', 'top': 0,'left': 0});
     img.height(trueHeight);
     img.width(trueWidth);
    
  });

В целом получился вот такой вот слайдер. На мой взгляд это очень полезная функция, которую я использовал в своих проектах. Надеюсь она пригодиться и вам. Если у вас есть варианты получше, буду рад, если поделитесь ими в комментариях!