el-ladies

Web Scripts

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

• 15-08-2018 •

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

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

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

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

Не будем изобретать велосипед, а возьмем готовый и быстрый слайдер, который работает на всех браузерах. Теперь добавим картинки и блоки в 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);
    
  });

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

4 thoughts on “Слайдер галерея для интернет магазина

  1. хорошая статья, на мой взгляд не хватает более менее универсальной инструкции для внедрения в проект, для дилетантов вроде меня 🙂

  2. возможно тут и не будет ответа, но все же понадеюсь на лучшее. слайдер хорош. но если адо чтобы одновременно показывать несколько товаров может ли он? если да то как, если нет, может есть хороший легковесный вариант и Вы о нем сообщите? из того что нашел функционального (много то там и не надо) и главное понимающего свайп для моб устройств и показывающего одновременно 3 товара с возможностью листать и автополистыванием все достаточно не малый объем занимает, что сопоставимо с размером кода самого сайта.

    1. В статье есть ссылка на документацию слайдера, можно одновременно сколько угодно показывать слайдов, там очень подробно с примерами все показывают. Чтобы создавать несколько слайдеров, достаточно создать несколько блоков с классом, который задействован для загрузки слайдера.

  3. и второй вопрос, который вероятно возникнет у тех кто будет использовать данный слайдер. а если нужно поставить на страницу два или три слайдера или десять? возможно ли это, если да, то как?

Добавить комментарий

hentai xxx