Testimonial-Slider

Lupus_III · 28. Oktober 2023

Hallo zusammen,

ich baue mir gerade zum Üben ein Testimonial "Was sagen unsere Kunden über uns"! Leider funktioniert irgendwie das JS nicht, wie ich es will. Kann mal jemand drüberschauen und mir auf die Sprünge helfen?

Hier kommt der Code:

HTML

HTML
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Font awesome cnd link-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    
    <!-- custom css file link-->
    <link rel="stylesheet" href="testi.css/testimonial.css">

    <title>Testimonial Slider Using HTML  CSS  Vanilla Javascript</title>

    
</head>
<body>
    <div class="container">
        <div class="slide-container active">
           <div class="slide">
                <i class="fa-solid fa-quote-right icon"></i>
                <div class="user">
                    <img src="img/mann.jpg" alt="">
                    <div class="user-info">
                        <h3>John Doe</h3>
                        <div class="stars">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="far fa-star"></i>   
                        </div>
                    </div>
                </div>
                    <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa voluptatem assumenda ab ipsam suscipit totam cumque laudantium maxime velit tenetur labore, nobis, temporibus exercitationem repudiandae esse officiis ad quaerat harum?
                    </p>
           </div>
        <div class="slide-container">
           <div class="slide">
                <i class="fa-solid fa-quote-right icon"></i>
                <div class="user">
                    <img src="img/frau.jpg" alt="">
                    <div class="user-info">
                        <h3>Jean Doe</h3>
                        <div class="stars">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="far fa-star"></i>   
                        </div>
                    </div>
                </div>
                    <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa voluptatem assumenda ab ipsam suscipit totam cumque laudantium maxime velit tenetur labore, nobis, temporibus exercitationem repudiandae esse officiis ad quaerat harum?
                    </p>
            </div> 
        </div>
        <div class="slide-container">
            <div class="slide">
                <i class="fa-solid fa-quote-right icon"></i>
                <div class="user">
                    <img src="img/mann.jpg" alt="">
                    <div class="user-info">
                        <h3>Martin Doe</h3>
                        <div class="stars">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="far fa-star"></i>   
                        </div>
                    </div>
                </div>
                    <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa voluptatem assumenda ab ipsam suscipit totam cumque laudantium maxime velit tenetur labore, nobis, temporibus exercitationem repudiandae esse officiis ad quaerat harum?
                    </p>
            </div> 
        </div>
        <div class="slide-container">
            <div class="slide">
                <i class="fa-solid fa-quote-right icon"></i>
                <div class="user">
                    <img src="img/frau.jpg" alt="">
                    <div class="user-info">
                        <h3>Valentina Doe</h3>
                        <div class="stars">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="far fa-star"></i>   
                        </div>
                    </div>
                </div>
                    <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa voluptatem assumenda ab ipsam suscipit totam cumque laudantium maxime velit tenetur labore, nobis, temporibus exercitationem repudiandae esse officiis ad quaerat harum?
                    </p>
            </div> 
        </div>
        <div id="next" class="fas fa-chevron-right" onclick="next()"></div>
        <div id="prev" class="fas fa-chevron-left" onclick="prev()"></div>
    </div>

   <script src="js/testi.js"></script>
</body>
</html>

Alles anzeigen

Code

CSS
*{
    font-family: Arial, Helvetica, sans-serif;
    margin: 0; 
    padding: 0;
    box-sizing: border-box;
    text-transform: capitalize;
}
body{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 70px;
    background-color: #3498db;
}
.container{
    position: relative;
    perspective: 1000px;
}
.container .slide-container .slide{
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 5px 10px #333 ;
    width: 450px;
    padding: 20px;
    margin: 10px;
    position: relative;
    transform-style: preserve-3d;
}
.container .slide-container .slide .icon{
    position: absolute;
    top: 10px; right: 15px;
    font-size: 90px;
    color: #3498db;
}
.container .slide-container .slide .user{
    display: flex;
    align-items: center;
}
.container .slide-container .slide img{
    height: 100px;
    width: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}
.container .slide-container .slide .user .user-info h3{
    color: #333;
    font-size: 20px;
}
.container .slide-container .slide .user .user-info .stars i{
    color: #3498db;
    font-size: 15px;
}
.container .slide-container .slide .text{
    color: #333;
    font-size: 14px;
    padding-top: 15px;
    font-style: italic;
}
.container .slide-container{
    display: none;
}
.container .slide-container.active{
    display: block;
}
.container #next,
.container #prev{
    position: absolute;
    top: 50%;
    transform: translateX(-50%);
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 5px 10px #3337;
}
.container #next{
    right: -90px;
}
.container #prev{
    left: -60px;
}
.container #next:hover,
.container #prev:hover{
    background-color: #333;
    color: #fff;
}

Alles anzeigen

Code

JS
let slides = document.querySelectorAll('.slide-container');
let index = 0;

function next(){
    slides[index].classList.remove('active');
    index (index + 1) % slides.length;
    slides[index].classList.add('active');
}

function prev(){
    slides[index].classList.remove('active');
    index (index - 1 + slides.length) % slides.length;
    slides[index].classList.add('active');
}

Alles anzeigen

Sempervivum · 28. Oktober 2023

Ohne das groß getestet zu haben würde ich sagen, dass hier ein Gleichheitszeichen fehlt:

index (index + 1) % slides.length;

Ebenso in prev.

Lupus_III · 29. Oktober 2023

Ich habe das Zeichen % gegen = getauscht. Es funktioniert nicht!

m.scatello · 29. Oktober 2023

Zitat von Lupus_III

getauscht

Sempervivum hat aber geschrieben

Zitat von Sempervivum

fehlt

Sempervivum · 29. Oktober 2023

So hatte ich das nicht gemeint, versuche dies:

index = (index + 1) % slides.length;

Lupus_III · 29. Oktober 2023

Das tut auch nicht. Ein Klick auf den Pfeil und der Bildschirm ist leer.

Lupus_III · 29. Oktober 2023

Zitat von m.scatello

Sempervivum hat aber geschrieben

Sh....t!

Sempervivum · 29. Oktober 2023

Jetzt getestet und Visual-Studio-Code sowie der Seiteninspektor haben es an den Tag gebracht: Für den ersten Container fehlt ein schließendes </div>:

Code

<body>
    <div class="container">
        <div class="slide-container active">
            <div class="slide">
                <i class="fa-solid fa-quote-right icon"></i>
                <div class="user">
                    <img src="img/mann.jpg" alt="">
                    <div class="user-info">
                        <h3>John Doe</h3>
                        <div class="stars">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="far fa-star"></i>
                        </div>
                    </div>
                </div>
                <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa voluptatem assumenda ab
                    ipsam suscipit totam cumque laudantium maxime velit tenetur labore, nobis, temporibus exercitationem
                    repudiandae esse officiis ad quaerat harum?
                </p>
            </div>
        </div> <!-- dies fehlte -->
        <div class="slide-container">

Alles anzeigen

Lupus_III · 29. Oktober 2023

OMG! Vielen Dank!

Sempervivum · 30. Oktober 2023

Dein Layout für die Slides kannst Du übrigens ein wenig vereinfachen und ganz ohne abs. Positionierung umsetzen:

Code

    <div class="container">
        <div class="slide-container active">
            <div class="user">
                <img src="images/dia0.jpg" alt="">
                <div class="user-info">
                    <h3>John Doe</h3>
                    <div class="stars">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="far fa-star"></i>
                    </div>
                </div>
                <i class="fa-solid fa-quote-right icon"></i>
            </div>
            <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa voluptatem assumenda ab
                ipsam suscipit totam cumque laudantium maxime velit tenetur labore, nobis, temporibus exercitationem
                repudiandae esse officiis ad quaerat harum?
            </p>
        </div>
        <div class="slide-container">

Alles anzeigen

Code

        * {
            font-family: Arial, Helvetica, sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            text-transform: capitalize;
        }

        body {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-bottom: 70px;
            background-color: #3498db;
        }

        .container {
            position: relative;
            perspective: 1000px;
        }

        .container .slide-container {
            border-radius: 5px;
            background-color: #fff;
            box-shadow: 0 5px 10px #333;
            width: 450px;
            padding: 20px;
            margin: 10px;
            transform-style: preserve-3d;
        }

        .container .slide-container .icon {
            margin-left: auto;
            align-self: flex-start;
            font-size: 90px;
            color: #3498db;
        }

        .container .slide-container .user {
            display: flex;
            align-items: center;
        }

        .container .slide-container img {
            height: 100px;
            width: 100px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 10px;
        }

        .container .slide-container .user .user-info h3 {
            color: #333;
            font-size: 20px;
        }

        .container .slide-container .user .user-info .stars i {
            color: #3498db;
            font-size: 15px;
        }

        .container .slide-container .text {
            color: #333;
            font-size: 14px;
            padding-top: 15px;
            font-style: italic;
        }

        .container .slide-container {
            display: none;
        }

        .container .slide-container.active {
            display: block;
        }

        .container #next,
        .container #prev {
            position: absolute;
            top: 50%;
            transform: translateX(-50%);
            height: 50px;
            width: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
            background-color: #fff;
            color: #333;
            cursor: pointer;
            border-radius: 50%;
            box-shadow: 5px 10px #3337;
        }

        .container #next {
            right: -90px;
        }

        .container #prev {
            left: -60px;
        }

        .container #next:hover,
        .container #prev:hover {
            background-color: #333;
            color: #fff;
        }

Alles anzeigen

Sempervivum · 30. Oktober 2023

Und für die next- und prev-Buttons wolltest Du wahrscheinlich translateY verwenden, damit sie vertikal richtig zentriert sind:

Code

        .container #next,
        .container #prev {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            height: 50px;
            width: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
            background-color: #fff;
            color: #333;
            cursor: pointer;
            border-radius: 50%;
            box-shadow: 5px 10px #3337;
        }

        .container #next {
            right: -60px;
        }

        .container #prev {
            left: -60px;
        }

Alles anzeigen

Lupus_III · 30. Oktober 2023

Vielen Dank. Habs probiert, funktionier gut!!

Testimonial-Slider

Jetzt mitmachen!

Teilen

Tags