JS css карусель
Здраствуйте! извините пожалуйста что отвлекаю, но мне очень нужна помощ я уже 3 день ломаю голову не могу найти информацию которая мне нужна.
Я вас очень прошу помогите мне завтра нужно здать макет а я не могу сделать нужную карусель! Вот у меня есть https://codepen.io/warwar/pen/WKKpWZ . Но мне нужно ее модернизировать, тоесть добавить навигацию, тоесть точки которые бы показывали на каком слайде я нахожусь, но самое главное мне еще нужно что бы сверху были надписи и они тоже менялись при смене слайда типа: кухня, туалет, комната и что бы они были все видны( я про надписи) как бы две навигации снизу точки а с верху надписи. Помогите пожалуйста. |
Готовый возьмите.
|
пожалуйста подскажите где?
|
Цитата:
|
|
Цитата:
Спасибо за потраченое время, но ето не то что мне нужно, там только одна навигация а мне нужно еще сверху надписи которых нигде нету! я не знаю как привязать их! |
Цитата:
|
Nexus,
:( там навигация не активная и стрелок нету, ладно и на етом спасибо( |
|
Цитата:
во почти то что мне нужно, только мне нужно что бы текст был не частью блока и не пропадал а был как навигация сверху и просто менял свою активность взависимости от того какой блок активный если блок 1 то выделалась надпись 1 если блок 2 то выделялась надпись 2, но что бы надписи не пропадали а были постоянно видны! можете такое реализовать!? буду очень очень очень благодарен вам господин! |
Rezorwar,
https://jsfiddle.net/63jdmsey/ |
Nexus,
Огромное спасибо вам))))))))))))))))))))))))))))))))) |
Nexus,
единственное не могу понять чего навигация идет цифрами а не точками и нету активной как на сайте slick! не подскажите? |
Rezorwar,
у него есть класс slick-active. можно задать любой стиль |
j0hnik,
благодарю! |
Цитата:
slick-active применяеться ко всему активному а как имено задать стили к етим точкам? |
Rezorwar,
.slick-dots .slick-active |
Цитата:
а без вложености никак к ним не обратиться? |
Rezorwar, есть вероятность, что переопределите что-нибудь не то, так что нет.
|
Nexus,
а еще такой вопрос text 1 text 2 text 3 ему вы можете с помощу js какой то клас дать как вы ему дали клас ектив! ато обращаться к li не могу, и блин теперь на слайде видно надписи ети text 1 text 2 text 3 как их убрать? я их удаляю и они везде пропадают! можно так сделать что бы сверху они были а на слайде небыло ничего кроме картинок! спасибо вам за все, я в долгу у вас! |
$('.top_slider h2').addClass('нужный_класс');
или в html укажите |
Цитата:
.top_slider .slide h2{
display:none;
}
|
Спасибо вам ребята! хороший форум
|
j0hnik,
ну мне не h2 нужно клас создать а <li> которые создаються в js коде потому что там и точки те <li> и текст который сверху тоже <li> и когда я к ним обращаюсь они оба применяют стили! а мне нужно им разные стили задать! как ето сделать? |
$('.top_slider ul:first-child li').addClass('нужный_класс');
|
j0hnik,Nexus,
не помогает! мне нужно что бы у текста сверху был один клас а у точек другой что бы я мог к ним обращаться, ато я задаю стили для <li> и их принимают и те и другие! как мне к ним обращаться по одельности, подскажите! |
|
Простейший слайдер делегирование точечная навигация
Rezorwar,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<style type='text/css'>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
#container {
position: relative;
top: 20px;
width: 640px;
height: 480px;
margin: 0 auto;
box-shadow: 0 0 5px 5px rgba(0, 0, 0, .5);
transition: all .6s;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
#previous {
position: absolute;
left: 10px;
top: 50%;
margin-top: -20px;
opacity: .5;
cursor: pointer;
}
#previous:hover, #next:hover {
opacity: 1;
}
#previous:active {
margin-top: -18px;
}
#next:active {
margin-top: -18px;
}
#next {
position: absolute;
right: 10px;
top: 50%;
margin-top: -20px;
opacity: .3;
cursor: pointer;
}
.nav {
position: absolute;
bottom: 0;
left: 50%;
width: 100px;
margin-left: -50px;
}
.nav li {
float: left;
margin-right: 5px;
margin-bottom: 5px;
display: block;
height: 10px;
width: 10px;
border: 2px solid #fff;
border-radius: 50%;
}
.active {
background-color: red;
}
.up{
display: flex;
margin: 4px auto;
text-align: center;
justify-content: center;
background-color: #D3D3D3;
width: 300px;
border-radius: 8px;
}
.up li{
margin: 2px 5px;
cursor: pointer;
font-size: 1.1em;
text-transform: capitalize;
}
.up li.active{
color: #FFFFFF;
border-bottom: solid 1px #FFFFFF;
background-color: transparent;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
(function() {
var container = document.getElementById("container"),
button = document.getElementById("next"),
previous = document.getElementById("previous"),
array = ["http://mebelperemen.ru/image/data/praga%20moduli/2017-07-01_203711.jpg",
"https://remont-otdelka62.ru/wp-content/uploads/2014/06/otdelka_komnat_foto3.jpg",
"http://grazia-mebel.ru/upload/iblock/e9c/e9c73472cfcd3f3c6ffc4478bd07b546.jpg",
"https://domtexnik.com.ua/assets/uploads/store/products/80d7c-polotencesushitel-mario-dzhuno-01.jpg"],
text = ["кухня","комната","прихожая","туалет"],
navUp = document.querySelector(".up"),
sliderRulesUp = document.querySelectorAll(".up li"),
sliderRules = document.querySelectorAll(".nav li"),
old, i = 0,
j = sliderRules.length - 1,
imgSet = function(link) {
container.style.backgroundImage = "url(" + link + ")"
};
container.addEventListener("click", newX, false);
navUp.addEventListener("click", newX, false);
for (; j > -1; j--) {
var link = array[j];
var img = new Image;
img.src = link;
var sliderRule = sliderRules[j];
sliderRule.dataset.indx = j;
var sliderRuleUp =
sliderRulesUp[j];
sliderRuleUp.textContent = text[j];
sliderRuleUp.dataset.indx = j
}
sliderRule.classList.add("active");
sliderRuleUp.classList.add("active");
sliderRule.click();
function newX(e) {
var elem = e.target;
var i = +elem.dataset.indx;
if (isNaN(i)) return;
var next = i + 1;
next == array.length && (next = 0);
var prev = i - 1;
0 > prev && (prev = array.length - 1);
button.dataset.indx = next;
previous.dataset.indx = prev;
document.querySelector(".nav .active").classList.remove("active");
sliderRules[i].classList.add("active");
document.querySelector(".up .active").classList.remove("active");
sliderRulesUp[i].classList.add("active");
var link = array[i];
imgSet(link);
e.preventDefault()
}
})()
});
</script>
</head>
<body>
<ul class="up">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="container">
<img src="https://www.gentec-eo.com/Content/images/home/slider/left-arrow.png" id="previous" width="40" height="40" >
<img src="https://www.gentec-eo.com/Content/images/home/slider/right-arrow.png" id="next" width="40" height="40" >
<ul class="nav">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
|
рони,
Спасибо все очень класно, но я теперь не знаю как мне редактировать тут все! мне нужно стрелочки в низ опустить и в лево что бы ети точки(индикаторы) были между стрелок. |
|
Цитата:
#next {top: 50%; |
рони,
Профессор, а как мне свои фотографии закинуть? у вас тут array = ["http://mebelperemen.ru/image/data/praga%20moduli/2017-07-01_203711.jpg", а мне нужно не с интернета а с папки img? как ето реализовать? |
Цитата:
array = ["img/1.jpg", |
рони,
ну я прописую array = ["img/BG1"] оно не видит ее, белый фон |
рони,
простите был не внимателен, не добавил розширение! а такой вопрос а где изменить что бы они слева направо ездили а не так как у вас? |
Цитата:
|
рони,
жаль! ну и на етом спасибо огромное! |
рони,
скажите, с чего посоветуете начать изучение javascript? |
Rezorwar,
ссылка перед вами в самом верху Учебник |
рони,
я думал вы мне что то особое скажите) |
| Часовой пояс GMT +3, время: 17:56. |