Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Karussell mit mehreren sichtbaren Bildern?
#1
Morgen!
haben wird irgendwo eine Komponente von einem Karussell, wo man mehrere Bilder/Produkte gleichzeitig sehen kann?
Ich finde nur welche mit einem.

Frank
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
Moin,

ich hatte hier mal so was in NOF erstellt:

http://www.nof-tutorials.com/CSS-Transit...olygon.php

... oder auch das:

http://www.nof-tutorials.com/CSS-Transit...alerie.php

... das ist so aber nicht responsive.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Hier wäre was Gutes, nur ich bekomme es nicht eingebaut
https://www.jqueryscript.net/slider/Flex...ousel.html
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
Moin,

... gibt es nicht solche Slider auch ganz ähnlich in einigen Mobirise-Themen ?


Ich habe diese externe jQuery-Anwendung jetzt auf einer meiner Testseiten mal ausprobiert:

http://www.mobirise-tutorials.com/Testse...ousel.html

Ich habe die vorletzte Demo vom Download eingebaut (an den Mobirise-Buttons könnte man noch fummeln).


1) CSS und JS Dateien in die neu angelegten Verzeichnisse:

carousel/css/
carousel/js/


kopiert.


2) in die Seiteneinstellungen "Inside <head> code" die Verlinkung zur CSS-Datei und diese Style-Anweisung:

Code:
  <link href="carousel/css/resCarousel.css" rel="stylesheet" type="text/css">

  <style>
    body {
        font-family: 'Trirong', serif;
        background: #eee;
    }
   
    .p0 {
        padding: 0;
    }
   
    .resCarousel-inner .item {
        /*border: 4px solid #eee;*/
        /*vertical-align: top;*/
        text-align: center;
    }
   
    .resCarousel-inner .item .tile div,
    .banner .item div {
        display: table;
        width: 100%;
        min-height: 250px;
        text-align: center;
        /*box-shadow: 0 1px 1px rgba(0, 0, 0, .1);*/
    }
   
    .resCarousel-inner .item h1 {
        display: table-cell;
        vertical-align: middle;
        color: white;
    }
   
    .banner .item div {
        background: url('demoImg.jpg') center top no-repeat;
        background-size: cover;
        min-height: 550px;
    }
   
    .item .tile div {
        background: url('demoImg.jpg') center center no-repeat;
        background-size: cover;
        height: 200px;
        color: white;
    }
   
    .item div h1 {
        background: rgba(0, 0, 0, .4);
    }
  </style>


3) In die Seiteneinstellungen "End of <body> code" diese Verlinkung zur JS-Datei:

Code:
  <script src="carousel/js/resCarousel.js"></script>


4) In den "Code Editor" eines einfachen Textblocks die Anzeige vom Carousel-Slider:

Code:
                <!-- Beginn Carousel-Slider -->               
                <div class="container p8">
                    <div class="resCarousel" data-items="2-4-4-4" data-interval="2000" data-slide="1" data-animator="lazy">
                        <div class="resCarousel-inner">

                            <div class="item">
                                <div class="tile">
                                    <div>
                                        <h1>1</h1>
                                    </div>
                                    <h3>Title</h3>
                                    <p>content</p>
                                </div>
                            </div>

                            <div class="item">
                                <div class="tile">
                                    <div>
                                        <h1>2</h1>
                                    </div>
                                    <h3>Title</h3>
                                    <p>content</p>
                                </div>
                            </div>

                            <div class="item">
                                <div class="tile">
                                    <div>
                                        <h1>3</h1>
                                    </div>
                                    <h3>Title</h3>
                                    <p>content</p>
                                </div>
                            </div>

                            <div class="item">
                                <div class="tile">
                                    <div>
                                        <h1>4</h1>
                                    </div>
                                    <h3>Title</h3>
                                    <p>content</p>
                                </div>
                            </div>

                            <div class="item">
                                <div class="tile">
                                    <div>
                                        <h1>5</h1>
                                    </div>
                                    <h3>Title</h3>
                                    <p>content</p>
                                </div>
                            </div>

                            <div class="item">
                                <div class="tile">
                                    <div>
                                        <h1>6</h1>
                                    </div>
                                    <h3>Title</h3>
                                    <p>content</p>
                                </div>
                            </div>

                            <div class="item">
                                <div class="tile">
                                    <div>
                                        <h1>7</h1>
                                    </div>
                                    <h3>Title</h3>
                                    <p>content</p>
                                </div>
                            </div>

                            <div class="item">
                                <div class="tile">
                                    <div>
                                        <h1>8</h1>
                                    </div>
                                    <h3>Title</h3>
                                    <p>content</p>
                                </div>
                            </div>

                            <div class="item">
                                <div class="tile">
                                    <div>
                                        <h1>9</h1>
                                    </div>
                                    <h3>Title</h3>
                                    <p>content</p>
                                </div>
                            </div>

                            <div class="item">
                                <div class="tile">
                                    <div>
                                        <h1>10</h1>
                                    </div>
                                    <h3>Title</h3>
                                    <p>content</p>
                                </div>
                            </div>

                            <div class="item">
                                <div class="tile">
                                    <div>
                                        <h1>11</h1>
                                    </div>
                                    <h3>Title</h3>
                                    <p>content</p>
                                </div>
                            </div>

                            <div class="item">
                                <div class="tile">
                                    <div>
                                        <h1>12</h1>
                                    </div>
                                    <h3>Title</h3>
                                    <p>content</p>
                                </div>
                            </div>

                            <div class="item">
                                <div class="tile">
                                    <div>
                                        <h1>13</h1>
                                    </div>
                                    <h3>Title</h3>
                                    <p>content</p>
                                </div>
                            </div>

                            <div class="item">
                                <div class="tile">
                                    <div>
                                        <h1>14</h1>
                                    </div>
                                    <h3>Title</h3>
                                    <p>content</p>
                                </div>
                            </div>

                        </div>
                        <button class="btn-sm btn-white-outline leftRs">‹</button>
                        <button class="btn-sm btn-white-outline rightRs">›</button>
                    </div>
                </div>
                <!-- Ende Carousel-Slider -->


.jpg  Carousel-Code.JPG (Größe: 147 KB / Downloads: 7)
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
Witzig, das gleiche habe ich gestern abend auch noch reingebaut (ganz unten)
https://www.afripix.de/holzspanstein/

Beißt sich bei mir aber mit einem anderen Script, muss mir Deine Lösung nochmal genauer anschauen.

Ich hatte auch im Kopf, dass es sowas von Mobi irgendwo gab. Aber ich habe nichts mit mehreren Item gefunden, dabei sieht man doch was an jeder Ecke....sonderbar.

Also Tommy; VIELEN DANK !
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
... irgendwo gibt es so einen Slider mit Icons und auch für Instagram von Mobirise.

Egal, der ist ganz schön und ich baue den nochmals mit unterschiedlichen Bildern und Tutorial dazu ein Smiling
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
habe das Mobi-eigene Ding dazu gefunden.
Es ist im Theme Mobirise4 der Kundenblock.
Ist natürlich einfacher zu bedienen, habe aber die Bildgröße noch nicht anpassen können
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
Habe diesen Karussell-Slider nun nochmals hier mit Tutorial eingebaut:

http://www.mobirise-tutorials.com/Busine...ousel.html
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
Toll Tommy,

gefällt mir. Würde mir noch besser gefallen, wenn man wählen könnte,
Slider autoamtik ein, aus.

Wäre prima, wenn du das noch mit einbauen könntes, damit ich das gleich umsetzen kann, wenn ich aus der Folterkammer (Hüft-Reha) zurück bin.

Danke mein Bester
Mit freundlichen Grüßen
Claus aus dem hohen Norden

(Berge sind ja ganz schön, nur platt müssen sie sein!)
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
Wer den Slider nicht automatisch laufen lassen will, der lässt die Option (in meinem Beispiel) ...

data-intervall="5000"

... einfach weg.

Ich habe es mit in mein Tutorial geschrieben.


P.S.:

Hüft-Reha habe ich (nach meiner OP) weggelassen - gehe lieber Fahrradfahren (40-70km täglich) :D
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#11
Habe ich ja gerade gemacht, leider im Studio, es regnet hier.

5 Km auf dem Laufband mit 3% Steigung und dann noch 15 Km auf dem Rad
Mit freundlichen Grüßen
Claus aus dem hohen Norden

(Berge sind ja ganz schön, nur platt müssen sie sein!)
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#12
5km Laufband - da wäre ich mausetot :eek:
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#13
Moin Tommy,

ich laufe nicht auf dem Laufband. Das kann ich gar nicht. Ich gehe nur, große weite Schritte muss ich machen,
alles bei Stufe 4.5 - 5.5 und etwas Steigung. Dabei muss ich mich immer mit einer Hand festhalten, ohne verliere ich das Gleichgewicht. Dauer ca. 90 -100 Minuten, mit leichten Pausen zwischendurch, Stufe 3,2-3,8

Angefangen bin ich nach der OP mit 100 Metern pro Sitzung. Jetzt sind 5 KM kein Problem mehr für mich.
Als Auslauf, Abkühlung geh ich noch aufs Rad, diesen doofen Heimtrainer eben, leicht und locker, no Stress dann, aber auch 15 KM, dafür brauche ca. 1h 15 Min.

Das ist so mein Pensum, 2x die Woche ist Pflicht. Hab ja Zeit, bin ja Rentner :winken2:
Mit freundlichen Grüßen
Claus aus dem hohen Norden

(Berge sind ja ganz schön, nur platt müssen sie sein!)
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#14
(15.08.2019, 11:22)stobi_de schrieb: habe das Mobi-eigene Ding dazu gefunden.
Es ist im Theme Mobirise4 der Kundenblock.
Ist natürlich einfacher zu bedienen, habe aber die Bildgröße noch nicht anpassen können


Hallo Stobi,

ich bin mal wieder zu doof ich finde den nicht in dem Theme mobirise4 oder muß ich den updaten
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#15
ich glaube, das war schon immer dabei.
Es ist unter Clients, dieses blau-weiß-verlaufenden Ding mit den grauen Firmen-Symbolen drin
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Mobirise-Timeline mit Bildern gesucht Thomas Saake 5 182 16.07.2019, 10:15
Letzter Beitrag: Thomas Saake
  Akkordeon mit Bildern? stobi_de 9 481 15.09.2018, 09:20
Letzter Beitrag: stobi_de
  Installation von mehreren Versionen ? GeBo 9 652 01.06.2018, 14:24
Letzter Beitrag: Tommy Herrmann
  Mobirise-Positionierung von Bildern Martin73 10 1.193 03.06.2017, 14:10
Letzter Beitrag: Martin73



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!