Галерея со слайдером, где вместо точек переключение слайда, которые обычно распологаются под блоком с основным слайдом, является картинка самого слайда. Т.е есть картинка, вы кликаете на нее и слайдер переключается.
Так же есть возможность увеличить картинку или фотографию, если навести на нее курсор, при этом картинка будет перемещаться в зависимости от направлении курсора. Такой вариант слайдера отлично подойдет для интернет магазина, реклама продукта, где надо показать несколько фотографий с возможностью рассмотреть мелкие детали, при этом сохраняя место на странице.
Слайдер галерея
See the Pen Slick slider with dots by Aleksandrs (@CoolS2) on CodePen.0
Для такого слайдера нам придется подключть следующие библиотеки:
Slick slider бесплатный плагин, я его всегда при необходимости использую в своих проектах, слайдер работает на всех популярных браузерах и имеет гидкие настройки. Также у него хорошая документация с примерами. Если вы знаете другие хорошие слайдеры, то обязательно поделитесь в комментариях, может все используют, а я не знаю!
В первую очередь разместим html
<div class="main">
<div id="carousel" class="slider">
<div data-thumb="https://allstringsnylon.com/media/catalog/product/cache/1/image/17f82f742ffe127f42dca9de82fb58b1/c/o/cordoba-15cm-concert-uke-top_lrg_1.png"><img src="https://allstringsnylon.com/media/catalog/product/cache/1/image/17f82f742ffe127f42dca9de82fb58b1/c/o/cordoba-15cm-concert-uke-top_lrg_1.png" alt=""></div>
<div data-thumb="http://rolandblog.ca/wp-content/uploads/2013/11/13082_MATON-UKULELE-CEDAR-TOP__98800_zoom.jpg"><img src="http://rolandblog.ca/wp-content/uploads/2013/11/13082_MATON-UKULELE-CEDAR-TOP__98800_zoom.jpg" alt=""></div>
<div data-thumb="http://www.lunaguitars.com/productimages/uketribal6/uketribal6.jpg"><img src="http://www.lunaguitars.com/productimages/uketribal6/uketribal6.jpg" alt=""></div>
</div>
</div>
Что важно, так это блок с классом slider, который будет отвечать за слайды и сами слайды (просто div внутри блока с классом slider)
Так же не стоит забывать, что можно использовать несколько слайдеров на одной странице одновременно, только указываете разные классы или идентификаторы блоков со слайдером.
Стили для слайдера и общего блока. Стили могут отличаться в зависимости от вашего проекта.
.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;
}
А теперь самое интересное. Для начало мы просто инициализируем наш слайдер
Галерея со слайдером JS
$(".slider").slick({
autoplay: false,
dots: true,
customPaging : function(slider, i) {
var thumb = $(slider.$slides[i]).data('thumb');
return '<a><img src="'+thumb+'"></a>';
},
});
Этого кода будет вполне достаточно, чтобы сам слайдер уже работал, если вам не нужно увеличение картинки при наведении курсора, то на этом можно остановиться
Как увеличить картинку при навереднии курсора
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);
});
Применял этот скрипт в своих проектах несколько раз и думаю еще буду использовать. Оставлю здесь, чтобы не забыть, может еще кому пригодиться такой вариант слайда!
Если есть вопросы, пишите в комментариях, постораюсь на все вопросы ответить.
Так же есть отличная статья о том, как поставить отметки google map на своем сайте.