padding
, то получаются большие отступы и пришлось обратным margin
-ом делать. Мне это не нравилось и думал может есть другое решение. $(".card__slider").each(function (index, element) {
let images = $(this).children("img");
let marker = "";
for (let i = 0; i < images.length; i++) {
let w = images[i].width * images.length;
$(this).css("width", w+"px");
marker += `<div class="item" data-pos="${images[i].width * i}"></div>`;
}
$(this).next(".card__bar").html(marker);
//console.log($(this).next(".card__bar").children(".item"));
$(this).next(".card__bar").children(".item").each(function (index, el) {
$(this).mousemove(function(){
$(this).parent().prev().css("left", -$(this).attr('data-pos')+"px");
});
});
});
$(this).next(".card__bar").children(".item").each(function (index, el) {
$(this).mousemove(function(){
$(this).css("left", -el.dataset.pos+"px");
});
});
<a href="/" class="wrap-slider">
<div class="card__slider">
<img src="https://serge-fashion.by/upload/resize_cache/iblock/865/450_450_0/1002_0__4507_65__black001_01.jpg" alt="">
<img src="https://serge-fashion.by/upload/resize_cache/iblock/865/450_450_0/1002_0__4507_65__black001_01.jpg" alt="">
<img src="https://serge-fashion.by/upload/resize_cache/iblock/865/450_450_0/1002_0__4507_65__black001_01.jpg" alt="">
</div>
<div class="card__bar"></div>
</a>
$(".card__slider").each(function (index, element) {
let images = $(this).children("img");
let marker = "";
for (let i = 0; i < images.length; i++) {
let w = images[i].width * images.length;
$(this).css("width", w+"px");
marker += `<div class="item" data-pos="${images[i].width * i}"></div>`;
}
$(this).next(".card__bar").html(marker);
console.dir($(this).next());
$(this).next(".item").each(function (index, element) {
$(this).onmousemove(function () {
$(element).css("left", -el.dataset.pos+"px");
});
});
});
1.2
- это версия стилей. готовое api - это и есть сервиси я захотел узнать почему ты так думаешь
<div class="main-banner__info">
<div class="container">
<div class="row">
<div class="col-3"></div>
<div class="col-3">
<p>текст</p>
</div>
<div class="col-3">
<p>текст</p>
</div>
<div class="col-3 img show-video"></div>
</div>
</div>
</div>