Slideshow html von idna001, 15.08.2020 19:49

Slideshow html

idna001 Homepage des Autors 15.08.2020 19:49 (Versionen)

Hallo,

ich habe versucht eine Sildeshow mit Pfeilen rechts und links zu basteln.

Im Internet habe ich ein Beispiel gefunden welches html, CSS und Javascript benutzt: https://codepen.io/msteiner/pen/YpRvaw

Irgendwie ist das Beispiel etwas unübersichtlich.

Oder gibt es vielleicht einen einfacheren eleganteren Weg eine Slideshow zu machen?

Hier ist mein Code, indem irgendwo Fehler sind, die ich noch nicht erkennen kann:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AaA Couplesite</title>
</head>
<body>
<h1 align="center">Andreas and Angelinas Couplesite</h1>
<style>
    h1 { font-size: 5.5em; background-color: DeepSkyBlue; text-align: center; }
    p { font-size: 2.5em; }
    ul { font-size: 2em; }
    li.hm2 {
        /* Textfluss ändern */
        float: left;
        /* Aufzählungspunkte entfernen */
        list-style-type: none;
        /* Abstand */
        margin-right: 15px;
    }


    ul {
        text-align: left;
        width: 70%;
        position:relative;
        left: 25%;
    }

    .center {
        display: block;
        margin-left: 20%;
        margin-right: auto;
    }

    /* Clear floats after image containers */
    .row::after {
        content: "";
        clear: both;
        display: table;
    }

    /* Three image containers (use 25% for four, and 50% for two, etc) */
    .column {
        float: left;
        width: 50%;
    }

    .main-screen {
        z-index: 98;
        padding: 0;
        height: 100%;
        width: 100%;
    }

    .slideshow{
        display: block;
        width: 100%;
        padding: 0;
        margin: 0;
        z-index: 99;
        list-style: none;
    }

    .image {
        position: absolute;
        z-index: 0;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        overflow: hidden;
        display: block;
        transition:opacity 1s ease-in-out;
        -moz-transition:opacity 1s ease-in-out;
        -webkit-transition:opacity 1s ease-in-out;
    }

    .image{
        opacity: 0;
    }

    .active{
        opacity: 1;
    }

    .nav-arrows a {
        width: 42px;
        height: 42px;
        background: #fff;
        position: absolute;
        top: 51%;
        left: 30px;
        text-indent: -9000px;
        cursor: pointer;
        margin-top: -21px;
        opacity: 0.9;
        z-index: 99999;
    }

    .nav-arrows a:first-child{
        left: auto;
        right: 30px;
        background-position: top right;
    }

    .nav-arrows a:hover {
        opacity: 1;
    }

</style>

<ul>

<li class="hm2">ABOUT US</li>
    <li class="hm2">DESTINATION TRIPS</li>
    <li class="hm2">PICTURES</li>
    <li class="hm2">CONTACT US</li>
</ul>
<div style="clear:both"></div>

<h3 align="center"> Hello!</h3>
<p align="center"> We are Angelina and Andreas: We enjoy taking pictures to remember great moments, like to do </p>
</body>
</html>

<body>
<h1>Pictures of our Memories</h1>
<p>Lorem ipsum dolor sit amet, …</p>
<p>
<div id="nav-arrows" class="nav-arrows">
    <a href="#" class="forward">Weiter</a>
    <a href="#" class="backward">Zurück</a>
</div>
<div class="main-screen">
    <ul class="slideshow">
        <div class="column">
    <li class="image"><img src="..\home\img\sonne2.jpg\" width="1280" height="853" alt="sunset" class="center" class="row"/></li>
</div>
<li class="image"><img src="..\home\img\sonne1.jpg\" width="1280" height= "853" alt="secondsunset"  class="center" class="row"/></li>
<li class="image"><img src="..\home\img\tik1.jpg\" width="1280" height= "853" alt="us" class="center"/></li>
<li class="image"><img src="..\home\img\tik2.jpg\" width="1280" height= "853" alt="us again" class="center"/></li>
    </ul>
</div>

</p>


</body>

<script>


$(document).ready(function() {

var time = 10000,
timer;
$('.slideshow li:first-child').addClass('active');

function play() {
timer = setInterval(function(){
var next = $(".slideshow .active").removeClass("active").next(".image");
if (!next.length) {
next = $(".slideshow .image:first");
}
next.addClass("active");
}, time);
}
play();

/*Start of function for next button  */
function forward() {
$('.forward').click(function() {
clearInterval(timer);
play();
var go = $(".slideshow .active").removeClass("active").next(".image").addClass("active");
if (!go.length) {
go = $(".slideshow .image:first");
}
go.addClass("active");
});
}

forward();

/*Start of function for prev button  */
function previous() {
$('.backward').click(function() {
clearInterval(timer);
play();
var go = $(".slideshow .active").removeClass("active").prev(".image").addClass("active");
if (!go.length) {
go = $(".slideshow .image:last");
}
go.addClass("active");
});
}

previous();

});

/*Blendet Weiter und Zurück button aus/ein  */
var timer;
$(document).mousemove(function() {
if (timer) {
clearTimeout(timer);
timer = 0;
}

$('.backward, .forward').fadeIn();
timer = setTimeout(function() {
$('.backward, .forward').fadeOut()
}, 3000)
})


</script>

Vielen dank für jeden Tipp

Grüße idna

Beitrag melden

– Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

idna001: Slideshow html

Beitrag lesen

Slideshow html

Slideshow html