Прокрутите до горизонтальной цели с помощью jQuery ⇐ Jquery

[Anonymous]

Пытаемся произвести революцию в мире каруселей, создав что-то очень простое и семантическое, которое просто работает с якорными ссылками. Пока что у меня все работает отлично, но у меня есть одна проблема и одно желание:
Проблема: когда фокус находится внутри одного из слайдов карусели, и вы нажимаете клавишу табуляции, он исчезает. на следующий слайд, фокусируется на первом элементе, на котором можно выделить фокус, и автоматически меняет слайды. Не хочу этого. Когда вы сфокусированы на слайде, фокусироваться должны только объекты за пределами карусели (не включая элементы управления).
Желание: теперь это выглядит довольно скучно и ведет себя не так, как настоящий " карусель», потому что анимации нет. Я пробовал переходы CSS, но безуспешно. И я встречал много сообщений о вертикальной прокрутке к цели, но ничего, что описывало бы, как это сделать по горизонтали, особенно с элементами div, ширина которых составляет 100%.
Бонусные баллы: Было бы очень здорово, если бы направление прокрутки зависело от того, какой слайд в данный момент активен.
Обновление после публикации: я нашел это почти идеально. Но в этом примере вы вручную вводите идентификатор div во входные данные. Как мне просто получить идентификатор в href и использовать его вместо этого?
прокрутите до элемента в горизонтальном div
My CodePen:
https://codepen.io/tactics/pen/BaegWWW
HTML:



More about web design

More about graphic design

More about copy writing

• web design
• graphic design
• copy writing

CSS:
.carousel {
width: 100%;
text-align: center;
position: relative;
}
.carousel-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
}
.carousel-nav li {
display: inline-block;
}
.carousel-nav {
margin: 1em auto;
clear: both;
margin: auto;
}
.carousel-nav a {
background: #e9e7e7;
margin: 5px;
border: solid 1px #c4c4c4;
border-radius: 14px;
cursor: pointer;
display: block;
text-decoration: none;
color: #000;
width: 14px;
height: 14px;
overflow: hidden;
text-indent: -10em;
}
.carousel-nav a:hover, .carousel-nav a:focus {
background-color: #e3e2e2;
}
.carousel-nav a.active {
background: #fff;
}
.carousel .content {
background: #fff;
padding: 0;
min-width: 100%;
height: auto;
display: inline-block;
overflow: hidden;
}
.carousel .frame {
border: solid 1px #c4c4c4;
position: relative;
white-space: nowrap;
overflow: hidden;
}

JQUERY:
$(document).ready(function(){
$(".carousel-nav ul li a").eq(0).addClass("active").attr("aria-current","location");
$(".carousel .frame .content").eq(0).addClass("expanded");
$(".carousel-nav a").click(function(){
$(".carousel-nav a.active").removeClass("active").removeAttr("aria-current");
$(".carousel .content.expanded").removeClass("expanded");
$(this).addClass("active").attr("aria-current","location");
});
});


Подробнее здесь: https://stackoverflow.com/questions/786 ... ith-jquery