slider carousel

  • Guten Tag,

    ich habe mit folgendem Code einen Slider erzeugt.

    <!DOCTYPE html>

    <html>

    <head>

    <title> 3D image slideshow</title>

    <style>

    .slideshow{

    margin:0 auto;

    padding-top:50px;

    height:700px;

    background:skyblue;

    box-sizing:border-box;

    }

    .content{

    margin:auto;

    width:190px;

    perspective:1000px;

    position:relative;

    padding-top:80px;

    }

    .content-carrousel{

    width:100%;

    position:absolute;

    float:right;

    animation:rotar 15s infinite linear;

    transform-style:preserve-3d;

    }

    .content-carrousel:hover{

    animation-play-state:paused;

    cursor:pointer;

    }

    .content-carrousel figure{

    width:100%;

    height:120px;

    border:1px solid #4d444d;

    overflow:hidden;

    position:absolute;

    }

    .content-carrousel figure:nth-child(1){

    transform:rotateY(0deg) translateZ(300px);

    }

    .content-carrousel figure:nth-child(2){

    transform:rotateY(40deg) translateZ(300px);

    }

    .content-carrousel figure:nth-child(3){

    transform:rotateY(80deg) translateZ(300px);

    }


    .content-carrousel figure:nth-child(4){

    transform:rotateY(120deg) translateZ(300px);

    }

    .content-carrousel figure:nth-child(5){

    transform:rotateY(160deg) translateZ(300px);

    }

    .content-carrousel figure:nth-child(6){

    transform:rotateY(200deg) translateZ(300px);

    }


    .content-carrousel figure:nth-child(7){

    transform:rotateY(240deg) translateZ(300px);

    }

    .content-carrousel figure:nth-child(8){

    transform:rotateY(280deg) translateZ(300px);

    }

    .content-carrousel figure:nth-child(9){

    transform:rotateY(320deg) translateZ(300px);

    }

    .shadow{

    position:absolute;

    box-shadow:0px 0px 20px 0px #000;

    border-radius:2px;

    }

    .content-carrousel img{

    image-rendering:auto;

    transition:all 300ms;

    width:100%;

    height:100%;

    }

    .content-carrousel img:hover{

    transform:scale(1.2);

    transition:all 300ms;

    }

    @keyframes rotar{

    from{

    transform:rotate>(0deg);

    } to {

    transform:rotateY(360deg);

    }

    }

    </style>

    </head>

    <body>

    <section class ="slideshow">

    <div class ="content">

    <div class ="content-carrousel">

    <figure class ="shadow"><img src ="image1.jpg"></figure>

    <figure class ="shadow"><img src ="image2.jpg"></figure>

    <figure class ="shadow"><img src ="image3.jpg"></figure>

    <figure class ="shadow"><img src ="image4.jpg"></figure>

    <figure class ="shadow"><img src ="image5.jpg"></figure>

    <figure class ="shadow"><img src ="image6.jpg"></figure>

    <figure class ="shadow"><img src ="image7.jpg"></figure>

    <figure class ="shadow"><img src ="image8.jpg"></figure>

    <figure class ="shadow"><img src ="image9.jpg"></figure>

    </div>

    </div>

    </section>

    </body>

    </html>


    Wie schaffe ich es nun, dass die Bilder manuell ablaufen, d.h. per Maus steuerbar, und statt der Bilder auch Texte oder Seiten als Inhalt sind.

  • ja automatisch ablaufen lassen würde ich Javascript Vorschlagen.

    Hast du eine feste Anzahl an Bilder könnte man das auch mit @keyframes lösen.


    Bei den Texten ist das eigentlich genau so.

    Viele benutzen dazu das neue html5 <figure> und <figcaption> um Schrift in den Bildern anzeigen zu lassen. Wenn die auch ein und ausgeblendet werden soll ,geht das mit @keyframes oder Javascript

  • Was heißt den nur html möglich ????

    Ohne Csss und Javascript würde deine Seite wie ein Textdocument aussehen.

    Kenne mich mit dein Magiix Web Design nicht aus,aber gehe von aus das man da garantiert irgendwo Css und Javascript bearbeiten oder einfügen kann.


    Oder man schreibt es wie du es gepostet hast in den <style> und <script> tags mit rein.


    Wie man das an besten ändert ist für MICH schwer zu erklären.

    1. Bin in erklären sch...- obwohl ich weiß wie es geht .

    2. solltest du überlegen wie es aussehen soll?

    Soll Javascript automatisch die Bilder anzeigen ,die du in einen Ordener gespeichert hast?

    Bei fester Anzahl könnte man auch ohne Javascript arbeiten.

    3. Wie weit kennst du dich den überhaupt mit Html,Css,und Javascript aus.

    Vieleicht solltest du 1-3 Tutorials durchlesen wo zumindest die Grundkenntnisse erklärt werden.

    Fals du wirklich überhaupt gar nix weißt wäre es zu empfehlen.

    Wenn du zumindest etwas ahnung hast ist das natürlich noch besser.

    4.Antworten :)

  • 2. Es soll wie im Bild dargestellt aussehen. Der einzige Unterschied soll sein, dass

    a: die Bilder sich je nach Maus nach links oder rechts drehen

    b: bei dem Klicken auf die Bilder eine Seite lädt/Hyperlink oder das Bild maximiert wird.

    Mit html habe ich nicht viel Kenntnisse. Nur Access, was leider hier nicht sehr hilft.

  • Soich ein Karussell habe ich selber:

    http://ulrichbangert.de

    Es handelt sich um Coding-Jacks 3D-Carousel:

    https://codecanyon.net/item/codingjacks-3d-carousel/2958101

    Kostet ein paar Euro, aber die habe ich ausgegeben, weil ich nichts kostenloses gefunden habe.


    Etwas ähnliches gibt es auch hier:

    http://paio-co-kr.github.io/carousel-3d/

    Wie Du es möchtest, mit Buttons für das Fortschalten. Unterstützt nicht nur Bilder sondern beliebiges HTML, wie Du oben geschrieben hast.

    Hast Du denn mit FTP-Zugriff auf deinen Webspace, so dass Du die benötigten Dateien hoch laden könntest.?

  • Ja, da es meine eigene Domain/Internetseite ich habe ich Vollzugriff auf alles.

    Nun fand ich ein besseres Beispiel:

    https://bkosborne.com/jquery-waterwheel-carousel


    Doch dort brauche ich auch extra Daten. Und da ist das Problem, wie ich diese mit Magix Web Designer kompatibel mache. Die zuerst genannte Funktion klappt über Magix Web Designer. Nur bei dieser muss ich auf Java-Daten zurückgreifen. Und da bleibe ich stehen wie/ob dies mit/trotz Magix Web Desinger geht.

  • Wenn Du style-Tags einfügen kannst, solltest Du auch script-Tags verwenden können.

    Lade die Dateien doch mal herunter und auf deinen Webspace hoch. Und dann versuche, sie so einzubinden, wie es auf der Seite beschrieben ist.

    D. h. das Javascript, das CSS und das Einbinden von jQuery und dem Karussell-Skript auf deiner Seite einfügen.

  • Das Karussell von Sempervivum ist schon ein sehr cooles Ding .


    Ich wollte sowas auch mal auf meine Page machen und habe damals ein gefunden der so in der art aussieht ,aber nicht ganz so cool ist

    * Link entfernt , weil existiert nicht mehr *

    Die anderen ganz unten gehen auf einmal nicht mehr ,aber den du haben willst, den obersten, der läuft ja noch. Wäre nur sinnvoll gleich große Bilder reinzumachen.

  • Danke. Nun beherrsche ich es einigermaßen.

    Nun bleibt meine Frage:

    Bei dem Befehl:

    <a href="http://www.bkosborne.com/jquery-waterwheel-carousel/options"><img src= "image/1" id="BMX" /></a>

    Wie schaffe ich es, dass dann statt einem Bild bei src="..." eine Website angezeigt wird?

  • Wie schaffe ich es, dass dann statt einem Bild bei src="..." eine Website angezeigt wird?

    ???.

    willst du als Bild verschiedene Seiten anzeigen lassen ??

    Auch mal nee idee. Dann mußt du das <img> Löschen und ein <iframe reinsetzen. Da wirst du aber wahrscheinlich noch einige sachen ändern müßen ( CSS datein ). Die meißten css Daten des image lassen sich bestimmt auf den iframe dann anwenden ,aber alle glaube ich nicht.

  • Vielen Dank.

    Leider komme ich da aber nicht weiter.

    <a href="#"><iframe src="http://www.muster.de" id="item-4" /></a>

    es bleibt links oben.

    Wenn mir geholfen würde das zu ändern wäre sehr freundlich

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!