• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Nie działa slider

0 głosów
67 wizyt
pytanie zadane 23 maja w HTML i CSS przez tgv Początkujący (400 p.)

Witajcie, tworzę stronę, aktualnie zatrzymałem się na etapie tworzenia slidera. Jest problem polegający na tym, że slider nie działa do końca jak powinien. Nie wyświetlają się zdjęcia. Nie ma też okrągłych dotów do przełączania między slajdami...Gdzie może leżeć problem? Wygląda to tak...

var slideIndex, slides, dots, captionText
function initGallery() {
    slideIndex=0;
    slides=document.getElementsByClassName("imageHolder");
    slides[slideIndex].style.opacity=1;

    captionText-document.querySelector(".captionTextHolder .captionText");
    captionText.innerText-slides[slideIndex].querySelector(".captionText").innerText;

    dots=[];
    var dotsContainer=document.getElementById("dotsContainer");

    for (var i=0;i<slides.length;i++) {
        var dot=document.createElement("span");
        dot.classList.add("dots");
        dotsContainer.append(dot);
        dots.push(dot);
    }
    dots[slideIndex].classList.add("active")

}
initGallery();
<!DOCTYPE html>
<body lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Solar solutions</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<header>
    <a href="#" class="logo">Logo</a>
    <div class="menu-toggle"></div>
    <nav>
        <ul>
            <li><a href="#" class="active">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Team</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <div class="clearfix"></div>
</header>
<br>
<div class="galleryContainer">
    <div class="slideShowContainer">
        <div id="playPauseBtn"></div>
        <div class="leftArrow"><span class="arrow arrowLeft"></span></div>
        <div class="rightArrow"><span class="arrow arrowRight"></span></div>
        <div class="captionHolder"><p class="captionText">Caption Text</p>
            <div class="imageHolder">
                <img src="img/solar1.jpg">
                <p class="captionText">Caption Text 01</p>
            </div>
            <div class="imageHolder">
                <img src="img/solar2.jpg">
                <p class="captionText">Caption Text 01</p>
            </div>
        </div>
        <div id="dotsContainer"></div>
    </div>
</div>
<script src="slide.js"></script>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Poppins');
html, body
{
    margin: 0;
    font-family: 'Poppins', sans-serif;
    padding: 10px 2px 5px 2px;
}

header {
    position: relative;
    max-width: 100%;
    margin: 20px auto;
    padding: 10px;
    background: #fff;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
}
.logo {
    color: #069370;
    height: 60px;
    font-size: 36px;
    line-height: 60px;
    padding: 0 20px;
    text-align: center;
    box-sizing: border-box;
    float: left;
    font-weight: 700;
    text-decoration: none;
}
nav {
    float: right;
}
.clearfix {
    clear: both;
}
nav ul {
    padding: 0;
    margin: 0;
    display: flex;
}
nav ul li {
    list-style: none;
}
nav ul li a {
    display: block;
    margin: 10px 0;
    padding: 10px 20px;
    text-decoration: none;
    color: #262626;
}
nav ul li a.active,
nav ul li a:hover
{
    background: #069370;
    color: #fff;
    transition: 0.5s;
}
@media (max-width: 1200px)
{
    header
    {
        margin: 20px;
    }
}
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
        width: 40px;
        height: 40px;
        margin: 10px;
        float: right;
        text-align: center;
        font-size: 30px;
        color: #069370;
    }

    .menu-toggle:before {
        content: '\f0c9';
        font-family: fontAwesome, cursive;
        line-height: 40px;
    }

    .menu-toggle.active:before {
        content: '\f00d';
    }

    nav {
        display: none;
    }

    nav.active {
        display: block;
        width: 100%;
    }

    nav.active ul {
        display: block;
    }

    nav.active ul li {
        margin: 0;
    }
    .cont {
        width:80%;
        margin:0 auto 0 auto;
    }

    .box-container {
        width:100%;
        padding:5px;
    }

    .icon-box {
        margin-left: 45px;
        width:33%;
        display:inline;
        float:left;
    }
    .box{
        width:100px;
        height:100px;
    }

    .red{
        background:#f00;
    }
    .green{
        background:#0f0;
    }
    .blue{
        background:#00f;
    }
}
.galleryContainer {
    width: 100%;
    height: 500px;
    max-width: 1200px;
    user-select: none;
    box-shadow: 0px 0px 3px 1px #00000078;
    padding: 5px;
    box-sizing: border-box;
    margin: 0 auto;
}
.galleryContainer .slideShowContainer {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: gainsboro;
}
.galleryContainer .slideShowContainer .imageHolder {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
}
.galleryContainer .slideShowContainer .imageHolder img {
    width: 100%;
    height: 100%;
}
.galleryContainer .slideShowContainer .imageHolder .captionText {
    display: none;
}
.galleryContainer .slideShowContainer .leftArrow,
.galleryContainer .slideShowContainer .rightArrow {
    width: 50px;
    background: #00000036;
    position: absolute;
    left: 6%;
    z-index: 1;
    transition: background 0.5s;
    height: 72px;
    top: 65%;
    transform: translateY(-50%);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.galleryContainer .slideShowContainer .rightArrow {
    left: auto;
    right: 6%;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.galleryContainer .slideShowContainer .leftArrow:hover,
.galleryContainer .slideShowContainer .rightArrow:hover
{
    background: #000000a8;
    cursor: pointer;
}
.galleryContainer .slideShowContainer .arrow {
    display: inline-block;
    border: 3px solid white;
    width: 10px;
    height: 10px;
    border-left: none;
    border-bottom: none;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.galleryContainer .slideShowContainer .arrow.arrowLeft {
    transform: rotateZ(-135deg);
}
.galleryContainer .slideShowContainer .arrow.arrowRight {
    transform: rotateZ(45deg);
}
.galleryContainer .slideShowContainer>.captionHolder {
    position: absolute;
    bottom: -40px;
    z-index: 1;
    color: white;
    font-family: Montserrat, sans-serif;
    font-size: 20px;
    text-align: center;
    width: 1190px;
    background: #00000047;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
}
.galleryContainer .slideShowContainer>.captionHolder>.captionText {
    margin: 0;
}
.galleryContainer .slideShowContainer #playPauseBtn {
    width: 32px;
    height: 32px;
    position: absolute;
    z-index: 5;
    margin: 5px;
    cursor: pointer;
    background-image: url(img/play.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.galleryContainer #dotsContainer {
    width: 100%;
    height: 10%;
    text-align: center;
    padding-top: 20px;
    box-sizing: border-box;
}
.galleryContainer #dotsContainer .dots {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-left: 10px;
    background-color: #bbb;
    cursor: pointer;
    transition: background-color 0.5s;
}
.galleryContainer #dotsContainer .dots:hover,
.galleryContainer #dotsContainer .dots:hover {
    background-color: #717171;
}
.galleryContainer #dotsContainer .dots:first-child {
    margin-left: 0;
}







 

komentarz 26 maja przez mrspock1 Mądrala (5,140 p.)
Pamiętaj o tym, że użytkownikowi powinno się pozwolić na wyłączenie całej animacji na stronie. Slidery są bardzo nieprzyjemne w oglądaniu.

1 odpowiedź

0 głosów
odpowiedź 25 maja przez dawid6512 Gaduła (3,630 p.)
Odpal konsole, tam masz błędy JS.

Podobne pytania

0 głosów
1 odpowiedź 284 wizyt
pytanie zadane 28 stycznia 2016 w HTML i CSS przez ShadoWs Bywalec (2,360 p.)
0 głosów
0 odpowiedzi 55 wizyt
0 głosów
1 odpowiedź 135 wizyt
Porady nie od parady
Wynikowy wygląd pytania, odpowiedzi czy komentarza, różni się od tego zaprezentowanego w edytorze postów. Stosuj więc funkcję Podgląd posta znajdującą się pod edytorem, aby upewnić się, czy na pewno ostateczny rezultat ci odpowiada.Podgląd posta

65,727 zapytań

112,367 odpowiedzi

237,225 komentarzy

46,687 pasjonatów

Przeglądających: 133
Pasjonatów: 0 Gości: 133

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...