Slideshow html von idna001, 24.08.2020 21:51

Slideshow html

idna001 24.08.2020 21:51

eigentlich wollte ich das ja von meinem Raspberry aus hosten....

Ich weiß nur noch nicht genau, wie ich das machen soll, da ich dort auch noch andere Programme wie Homebridge am laufen habe :-)

Ich habe trotzdem versucht meine Seite auf bplaced hochzuladen, jedoch habe ich da auch noch Probleme...

@Rolf B

hier https://codepen.io/msteiner/pen/YpRvaw ist die Seite, von der ich mir den Slideshow-teil geholt habe, da kann man sich diese auch anschauen.

Mittlerweile habe ich die slideshow auch zum Laufen gebracht, und zwar nachdem ich dieses Element entfernt habe:


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

        }

Hatte ich es an der falschen Stelle? Oder beißt sich das mit der Slideshow? Weiß vielleicht jemand ob es einen anderen Weg oder einen anderen Platz dafür gibt meine Menüpunkte zu zentrieren?

Hier noch ein aktuelles Bild, wie ich es mir auch vorgestellt hatte :) (bis auf die noch nicht vollständig zentrierten Menüpunkte):

Und mein aktueller Code:

<!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>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>


    <style>
        h1 { font-size: 5.5em; background-color: DeepSkyBlue; text-align: center; }
        h2 {text-align: center;}
        p { font-size: 2.5em; text-align: center; }
        ul { font-size: 2em; }
        li.hm2 {
            /* Textfluss ändern */
            float: left;
            /* Aufzählungspunkte entfernen */
            list-style-type: none;
            /* Abstand */
            margin-right: 15px;
        }



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

        .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: 50;
            width: 100%;
            height: 100%;
            left: 20%;
            top: 50%;
            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: black;
            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>

</head>
<body>

<h1>Andreas and Angelinas Couplesite</h1>
<nav>
<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>
</nav>
<div style="clear:both"></div>
<h2> Hello!</h2>
<p> We are Angelina and Andreas: We enjoy taking pictures to remember great moments, like to do </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">
        <li class="image"><img src="..\home\img\sonne2.jpg" width="1280" height="853" alt="sunset" class="center" /></li>
        <li class="image"><img src="..\home\img\sonne1.jpg\" width="1280" height= "853" alt="secondsunset"  class="center" /></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>

<h1>Pictures of ur Memories</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, …</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>
</html>

@Matthias Scharwies

okay, vielen Dank für die Links, ich werde mich da jetzt mal einlesen.

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