Перед тем, как поместить html и css, у меня есть 2 проблемы, пожалуйста, держите в себе, что я почти полный любитель в html и css, и понятия не имею, что означает javascript.Javascript Content Slider
Проблема:
Моя первая проблема, что Sider содержания, оленья кожа слайд достаточно далеко до следующего содержания, но вместо того, чтобы при нажатии кнопки только приносит содержимое на полпути (вы увидите, что Я имею в виду, когда вы вставляете html и css в страницу).
Моя вторая проблема заключается в том, что кнопки предназначены для горизонтальной с Афоризм, и я также хочу, чтобы добавить больше в будущем
так что если кто-то может сказать мне, как это сделать в разработке с проблема с javascript, которая была бы замечательной!
здесь рабочая демо jsfiddle пожалуйста отъезда
Благодарственное заранее .. !!
// just querying the DOM...like a boss!
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");
// the activeLink provides a pointer to the currently displayed item
var activeLink = 0;
// setup the event listeners
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click', setClickedItem, false);
// identify the item for the activeLink
link.itemID = i;
}
// set first item as active
links[activeLink].classList.add("active");
function setClickedItem(e) {
removeActiveLinks();
var clickedLink = e.target;
activeLink = clickedLink.itemID;
changePosition(clickedLink);
}
function removeActiveLinks() {
for (var i = 0; i < links.length; i++) {
links[i].classList.remove("active");
}
}
// Handle changing the slider position as well as ensure
// the correct link is highlighted as being active
function changePosition(link) {
link.classList.add("active");
var position = link.getAttribute("data-pos");
wrapper.style.left = position;
}#wrapper {
width: 5000px;
position: relative;
left: 0px;
transition: left .5s ease-in-out;
}
.content {
float: left;
width: 1250px;
height: 600px;
white-space: normal;
background-repeat: no-repeat;
}
#itemOne {
background-color: #ADFF2F;
background-image: url("http://www.kirupa.com/images/blueSquare.png");
}
#itemTwo {
background-color: #FF7F50;
background-image: url("http://www.kirupa.com/images/yellowSquare.png");
}
#itemThree {
background-color: #1E90FF;
background-image: url("http://www.kirupa.com/images/pinkSquare.png");
}
#itemFour {
background-color: #DC143C;
background-image: url("http://www.kirupa.com/images/graySquare.png");
}
#contentContainer {
width: 98%;
height: 600px;
border: 5px black solid;
overflow: hidden;
margin-left: 1%;
margin-right: 1%;
}
#navLinks {
text-align: center;
width: 22.5%;
}
#navLinks ul {
margin: 0px;
padding: 0px;
display: inline-block;
margin-top: 6px;
}
#navLinks ul li {
float: left;
text-align: center;
margin: 10px;
list-style: none;
cursor: pointer;
background-color: #CCCCCC;
padding: 100px;
border-radius: 10%;
border: white 5px solid;
}
#navLinks ul li:hover {
background-color: #FFFF00;
}
#navLinks ul li.active {
background-color: #333333;
color: #FFFFFF;
outline-width: 7px;
}
#navLinks ul li.active:hover {
background-color: #484848;
color: #FFFFFF;
}
#navLinks ul li.active {
background-color: #333333;
color: #FFFFFF;
outline-width: 7px;
}
#navLinks ul li.active:hover {
background-color: #484848;
color: #FFFFFF;
}<body bgcolor='black'>
<div id="contentContainer">
<div id="wrapper">
<div id="itemOne" class="content">
</div>
<div id="itemTwo" class="content">
</div>
<div id="itemThree" class="content">
</div>
<div id="itemFour" class="content">
</div>
</div>
</div>
<div id="navLinks">
<ul>
<li class="itemLinks" data-pos="0px"></li>
<li class="itemLinks" data-pos="-550px"></li>
<li class="itemLinks" data-pos="-1100px"></li>
<li class="itemLinks" data-pos="-1650px"></li>
</ul>
</div>
</body>
Вы можете разместить его на jsfiddle и указать ссылку? –
Вы используете некоторые удивительно огромные divs в этой штуке! Проблема в том, что у вас есть размеры, которые указаны плохо, а используемые вами смещения не соответствуют ширине div в вашем слайдере. Вот скрипка - https://jsfiddle.net/9gpyL6o1/ – Matt
Привет всем благодарю за помощь! Но теперь я только что узнал, в чем проблема с полями, у меня есть 6 навигационных ссылок, но они, похоже, останавливаются примерно на 15% справа от страницы. Также для ползунка контента какой код будет использоваться для его центрирования? – Connor