API [DE] | Slides3

Einstieg

Slides3 wird über diese JS und CSS Dateien eingebunden:

<body>
  
  <script src="https://storage.googleapis.com/api.360ty.cloud/slides3/js/slides3.js"></script>
  
</body>

<head>
  
  <link rel="stylesheet" href="https://storage.googleapis.com/api.360ty.cloud/slides3/css/slides3.css">
  <link rel="stylesheet" href="https://storage.googleapis.com/api.360ty.cloud/360ty_styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
  
</head>

Jetzt gibt es eine Klasse "Slides3". Erstelle ein <div> Element und weise ihm eine eindeutige ID zu. Diese ID muss der Parameter in der Klasseninstanziierung sein.

Die Klasse wird dann wiefolgt instanziiert:

var slides3 = new Slides3("myContainer");

var slides3 = new Slides3("containerID");

Der Name der Variable muss nicht "slides3" sein. Ein eigener Namen kann dafür genutzt werden.

Homeslide erstellen

Die Homeslide ist optional!

Die Homeslide wird mit der "createHomeSlide" Methode erstellt:

slides3.createHomeSlide()

Homeslide Hintergrund hinzufügen

Tour als Hinterground

Um eine Tour im Hintergrund hinzuzufügen, füge der Methode "createHomeSlide" einfach einige Parameter hinzu:

slides3.createHomeSlide({
    basepath : String /* -> URL auf der die Tourdateien zu finden sind */,
	node : Number /* -> Die Node ID ohne das "node" davor */,
	fov : Number [~5 - ~90] /* -> Der Zoom Wert des 360° Bildes in ° */,
	tilt : Number [-90 - 90] /* -> Die vertikale Position des 360° Bildes in ° (-90° -> gerade nach unten, 0 -> gerade aus, 90 -> gerade in den Himmel) */,
	pan : [-360 - 360] /* -> Die horizontale Position des 360° Bilder (Das Vorzeichen bestimmt die Richtung -> - = links, + = rechts | -90 -> viertel Drehung nach links, 45 -> achtel Drehung nach rechts)*/
});

//Beispiel:
slides3.createHomeSlide({
    basepath : "https://lechwinter.360ty.cloud/",
	node : 45,
	fov : 60,
	tilt : -10,
	pan : -45,
});

Bild als Hintergrund

Um ein Bild als Hintergrund zu verwenden, wird die "addHomeslideBackgroundImage" Methode benutzt:

slides3.addHomeslideBackgroundImage(url:String)

//Beispiel:
slides3.addHomeslideBackgroundImage("https://wiki.360ty.world/favicon.ico")

Video als Hintergrund

Um ein Video als Hintergrund zu verwenden, wird die "addHomeslideBackgroundVideo" Methode benutzt:

slides3.addHomeslideBackgroundVideo(url:String)

//Beispiel:
slides3.addHomeslideBackgroundVideo("http://techslides.com/demos/sample-videos/small.mp4")

benutzte keine relativen Pfade! (z.B.: ./video.mp4)

Falls du Cloudflare Stream benutzt, um die Videos zu liefern, kannst du die ID des video als URL Parameter angeben

Inhalte zur Homeslide hinzufügen

Überschrift hinzufügen

Um der Homeslide eine Überschrift hinzuzufügen, wird die "addHomeslideHeadline" Methode benutzt:

slides3.addHomeslideHeadline(text:String)

//Beispiel
slides3.addHomeslideHeadline("my Headline")

Texte hinzufügen

Um der Homeslide Texte hinzuzufügen, wird die "addHomeslideParagraph" Methode benutzt:

slides3.addHomeslideParagraph(text:String)

//Beispiel:
slides3.addHomeslideParagraph("Paragrafen-inhalt")

"start" Button hinzufügen

Um der Homeslide einen Button hinzuzufügen, der zur Ersten Mainslide verweist, wird die "addHomeslideStartSlidesButton" Methode benutzt:

slides3.addHomeslideStartSlidesButton(text:String) //Der Text Parameter ist das Label des Buttons

//Beispiel:
slides3.addHomeslideStartSlidesButton("Start Slides")

benutzerdefinierte Elemente hinzufügen EXPERIMENTAL

Um der Homeslide benutzerdefinierte Elemente hinzuzufügen, wird die "addToHomeslideTextContainer" Methode benutzt:

slides3.addToHomeslideTextContainer(element:HTMLElement) 
//Der element Parameter ist ein HTML elemment. Man kann z.B. "document.getElementById("myId")" benutzen, um ein existentes Element an die Homeslide anzuhängen
//Beispiel:
let paragraph = document.createElement("p");
paragraph.innerText = "Paragrafen-Inhalt";

slides3.addToHomeslideTextContainer(paragraph)

Dies ist eine experimentelle Methode. Benutzte sie auf eigene Gefahr!
Der Container ist eine Flexbox

Logo hinzufügen

Um der Homeslide ein Logo hinzuzufügen, wird die "addHomeslideLogo" Methode benutzt:

slides3.addHomeslideLogo(imgURL:String,link:String) 
//imgURL: Quelle des Bildes
//link: Der Link, der geöffnet wird, wenn auf das Logo geklickt wird

//Beispiel:
slides3.addHomeslideLogo("https://wiki.360ty.world/favicon.ico","https://wiki.360ty.world/")

Mainslides erstellen

Um eine Mainslide/vertikale Slide zu erstellen, wird die "createSlide" Methode benutzt:

var slideIndex1 = slides3.createSlide({
  	basepath : String /* -> URL auf der die Tourdateien zu finden sind */,
	node : Number /* -> Die Node ID ohne das "node" davor */,
	fov : Number [~5 - ~90] /* -> Der Zoom Wert des 360° Bildes in ° */,
	tilt : Number [-90 - 90] /* -> Die vertikale Position des 360° Bildes in ° (-90° -> gerade nach unten, 0 -> gerade aus, 90 -> gerade in den Himmel) */,
	pan : [-360 - 360] /* -> Die horizontale Position des 360° Bilder (Das Vorzeichen bestimmt die Richtung -> - = links, + = rechts | -90 -> viertel Drehung nach links, 45 -> achtel Drehung nach rechts)*/
});

//Beispiel:
var slideIndex1 = slides3.createSlide({
    basepath : "https://lechwinter.360ty.cloud/",
	node : 45,
	fov : 60,
	tilt : -10,
	pan : -45,
});

Die "createSlide" Methode nimmt ein Objekt von Tour Optionen als parameter.
Diese Methode gibt den Slide Index zurück, welches als Parameter für andere Methoden gebraucht wird.

Inhalte zu Mainslides hinzufügen

Um einer Mainslide Inhalte hinzuzufügen, wird immer der Slide Index der Mainslide gebraucht, welches der Rückgabewert der "createSlide" Methode ist

Buttons hinzufügen

Um einer Mainslide einen Button hinzuzufügen, wird die "addToSlideButtonContainer" Methode benutzt:

slides3.addToSlideButtonContainer(slideIndex:Object, element:HTMLElement);

//Beispiel:
slides3.addToSlideButtonContainer(slideIndex1, slides3.addSlideStartButton("Highres 360° Panorama starten"));

In diesem Beispiel verwenden wir die Methode "addSlideStartButton", um einen Button zu erstellen, mit der das Overlay ausgeblendet wird, damit auf die Tour zugegriffen werden kann.
Hier können beliebige Elemente zugefügt werden.
Verwende ein "<a>" - Element und gib dem Element die "Slide-Button" CSS-Klasse, damit der Stil sich den anderen Buttons anpasst.

Überschrift hinzufügen

Um einer Mainslide eine Überschrift hinzuzufügen, wird die "addSlideHeadline" Methode benutzt:

slides3.addSlideHeadline(slideIndex:Object, text:String);

//Beispiel:
slides3.addSlideHeadline(slideIndex1, "meine Überschrift");

Beschreibung hinzufügen

Um einer Mainslide eine Beschreibung hinzuzufügen, wird die "addSlideDescription" Methode benutzt:

slides3.addSlideDescription(slideIndex:Object, text:String);

//Beispiel:
slides3.addSlideDescription(slideIndex1, "Diese Slide wurde von 360ty.world zur Verfügung gestellt");

Fotograf hinzufügen

Um einer Mainslide einen Fotograf hinzuzufügen, wird die "addSlideFotographer" Methode benutzt:

slides3.addSlideFotographer(slideIndex:Object, text:String);

//Beispiel:
slides3.addSlideFotographer(slideIndex1, "Rene");

Location hinzufügen

Um einer Mainslide eine Location hinzuzufügen, wird die "addSlideLocation" Methode benutzt:

slides3.addSlideLocation(slideIndex:Object, text:String);

//Beispiel:
slides3.addSlideLocation(slideIndex1, "Altach, Vorarlberg");

Facebook share Button hinzufügen

Um einer Mainslide den Facebook share Button hinzuzufügen, wird die "addSlideFacebookButton" Methode benutzt:

slides3.addSlideFacebookButton(slideIndex:Object, link:String);

//Beispiel:
slides3.addSlideFacebookButton(slideIndex1, "https://www.facebook.com/360ty.world/photos/4481435151872107");

Subslides erstellen

Um eine Subslide/horizontale Slide zu erstellen, wird die "createSubSlide" Methode benutzt:

var slideIndex1_1 = slides3.createSubSlide(mainSlideIndex:Object,{
  	basepath : String /* -> URL auf der die Tourdateien zu finden sind */,
	node : Number /* -> Die Node ID ohne das "node" davor */,
	fov : Number [~5 - ~90] /* -> Der Zoom Wert des 360° Bildes in ° */,
	tilt : Number [-90 - 90] /* -> Die vertikale Position des 360° Bildes in ° (-90° -> gerade nach unten, 0 -> gerade aus, 90 -> gerade in den Himmel) */,
	pan : [-360 - 360] /* -> Die horizontale Position des 360° Bilder (Das Vorzeichen bestimmt die Richtung -> - = links, + = rechts | -90 -> viertel Drehung nach links, 45 -> achtel Drehung nach rechts)*/
});

//Example:
var slideIndex1_1 = slides3.createSubSlide(slideIndex1,{
    basepath : "https://lechwinter.360ty.cloud/",
	node : 45,
	fov : 60,
	tilt : -10,
	pan : -45,
});

Die Methode verwendet den Slide-Index der Mainslide, deren Kind-Element die Subslide sein soll, als ersten Parameter. Der Index wird von der Methode "createSlide" zurückgegeben.
Die Methode verwendet ein Objekt mit Touroptionen als zweiten Parameter.
Die Methode gibt den Index der Subslide zurück, der als Parameter für andere Methoden verwendet wird.

Inhalte zu Subslides hinzufügen

Um Inhalte zu Subslides hinzuzufügen, werden dieselben Methoden verwendet wie zum Hinzufügen von Inhalten zu Mainslides.
Anstatt den Mainslide-Index zu übergeben, wird der Subslide-Index übergeben.

//anstatt:
slides3.addSlideHeadline(slideIndex1, "meine Überschrift");
//verwende:
slides3.addSlideHeadline(slideIndex1_1, "meine Überschrift");

slides3.createNav();

"Über uns" hinzufügen

Um die Buttons "Über uns" und "Partner" in der Navbar hinzuzufügen, werden die Methoden "createAboutUsContainer" und "setShowAboutUs" verwendet.
setze den Parameter der "setShowAboutUs" Methode auf auf "true":

slides3.setShowAboutUs(show:Boolean);
slides3.createAboutUsContainer();
//Beispiel
slides3.setShowAboutUs(true);
slides3.createAboutUsContainer();

Inhalte zu "Über uns" hinzufügen

Überschrift hinzufügen

Um dem "Über uns" Panel eine Überschrift hinzuzufügen, wird die "addAboutUsHeadline" Methode benutzt:

slides3.addAboutUsHeadline(text:String);

//Beispiel
slides3.addAboutUsHeadline("Über 360ty");

Unterüberschrift hinzufügen

Um dem "Über uns" Panel eine Unterüberschrift hinzuzufügen, wird die "addAboutUsSubHeadline" Methode benutzt:

slides3.addAboutUsSubHeadline(text:String);

//Beispiel
slides3.addAboutUsSubHeadline("Bilder die du bewegst und dich bewegen");

Bild hinzufügen

Um dem "Über uns" Panel ein Bild hinzuzufügen, wird die "addAboutUsImage" Methode benutzt:

slides3.addAboutUsImage(src:String);

//Beispiel
slides3.addAboutUsImage("https://wiki.360ty.world/favicon.ico");

Beschreibung hinzufügen

Um dem "Über uns" Panel eine Beschreibung hinzuzufügen, wird die "addAboutUsDescription" Methode benutzt:

slides3.addAboutUsDescription(text:String);

//Beispiel
slides3.addAboutUsDescription(`Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,
molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium
optio, eaque rerum! Provident similique accusantium nemo autem. Veritatis
obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam
nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,
tenetur error, harum nesciunt ipsum debitis quas aliquid.`);

Partner hinzufügen

Um dem "Über uns" Panel Partner hinzuzufügen, wird die "addPartners" Methode benutzt:

slides3.addPartners(partners:Array
[{
	imgURL: String /* Die URL des Bildes des Partners */,
    link: String /* Die URL, die geöffnet wird, wenn das Partner Bild angeklickt wird */,
}]);

//Beispiel
slides3.addPartners(
[
  {
    imgURL:"https://storage.googleapis.com/logos.360ty.cloud/360ty_world_extern.png",
    link:"https://360ty.world/",
  },
  {
    imgURL:"https://multimedia-fabrik.com/wp-content/uploads/2019/02/cropped-Logo_MMF_300.png",
    link:"https://multimedia-fabrik.com",
  }
]
);

slides3.addNavbarSocialButton(social:String,link:String)

//Beispiel:
slides3.addNavbarSocialButton("facebook",link:"facebook.com/360ty.world");
slides3.addNavbarSocialButton("instagram",link:"https://www.instagram.com/360ty.world_mmf")

Die icons sind Font Awesome Icons. Diese benutzen den "social" parameter als CSS fa - Klasse ("fa-${social}")

Allgemeine Einstellungen

Screenshot Studio Button

Um neben dem "zurück" Button, wenn die Tour aktiv ist, einen Button zu erstellen, der das 360ty Screenshot Studio auf der jetztigen Position öffnet, zu erstellen, wird die "setShowScreenshotButton" Methode verwendet:
Setzte den Parameter dieser Methode auf "true":

slides3.setShowScreenshotButton(show:Boolean)

//example:
slides3.setShowScreenshotButton(true);

Tour laden

setting Tour loading to "false", will prevent the tour from loading. To set this variable, use the "setTourLoad" method:

Das setzen von "Tour laden" auf "false" verhindert das laden der Tour. Um diese variable zu setzen, wird die "setTourLoad" Methode benutzt:

slides3.setTourLoad(load:Boolean)

//Beispiel:
slides3.setTourLoad(false);

Dies wird hauptsächlich für Debugging-Zwecke oder für Frameworks verwendet, die die Tour bei Eingabeänderungen erneut rendert, wie z. B. Elementor. Wenn die Tour zu oft erneut rendert, wird der WebGL-Kontext überlastet und der Browser wird erheblich verlangsamt oder stürzt sogar ab.

Slides Initialisieren

after setting the options and creating the slides, you can initialise the Slides with the "init" method:
Nach dem die Einstellungen getroffen sind und die Slides erstellt wurden, können die Slides mit der "init" Methode initialisiert werden:

slides3.init()

Styling

Primäre und Sekundäre Farben

Manche Elemente der Slides benutzen primäre und sekundäre Farben, die mit Hilfe von CSS gesetzt werden können:

Primäre Farben setzen

/*Ändere die Farbwerte nach deinen Wünschen*/
.color-primary{
  color:#f40000 !important;
}
.background-primary{
  background-color:#f40000 !important;
}
.border-primary{
  border-color:#f40000 !important; 
}

Sekundäre Farben setzen

/*Ändere die Farbwerte nach deinen Wünschen*/
.color-secondary{
  color:#22264b !important;
}
.background-secondary{
  background-color:#22264b !important;
}
.border-secondary{
  border-color:#22264b !important;
}

Beispiel

<html>
<head>
  <meta charset="UTF-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" href="https://storage.googleapis.com/api.360ty.cloud/360ty_styles.css">
  <link rel="stylesheet" href="https://storage.googleapis.com/api.360ty.cloud/slides3/css/slides3.css">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
  <style>
    body{
      min-height: -webkit-fill-available;
      min-height: 100vh;
      margin:0;
    }
    #slides_container{
      height:100%;
      width:100%;
    }
    /* Primäre und Sekundäre Farben setzen */
    .color-primary{
      color:#f40000 !important;
    }
    .background-primary{
      background-color:#f40000 !important;
    }
    .border-primary{
      border-color:#f40000 !important;
    }
    .color-secondary{
      color:#22264b !important;
    }
    .background-secondary{
      background-color:#22264b !important;
    }
    .border-secondary{
      border-color:#22264b !important;
    }
  </style>
</head>
<body>
  <!-- Slides container erstellen -->
  <div id="slides_container"></div>
  <script src="https://storage.googleapis.com/api.360ty.cloud/slides3/js/slides3.js"></script>

  <!-- Slides erstellen -->
  <script>

    var slides3 = new Slides3("slides_container"); //instanziieren
    //allgemeine Einstellungen
    slides3.setShowScreenshotButton(true);
    
    //Über uns
    slides3.createAboutContainer();
    slides3.setShowAboutUs(true);
    slides3.addAboutUsHeadline("Über 360ty");
    slides3.addAboutUsSubHeadline("360ty-fy your world");
    slides3.addAboutUsImage("https://lh3.googleusercontent.com/proxy/SlN1AQHX3sGjA5Ue25vFOaPdMpV2lNZIQkeofUxtZa5-dlwuX_UwEwISAX1uS_BwjSY4CmMlbmMJGjV_v5MDStxV_5PW7omlFqa1t909-J0")
    slides3.addAboutUsDescription(`Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum
numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentiumoptio, eaque rerum! Provident similique accusantium nemo autem. Veritatisobcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam
nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit,tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit,quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdamrecusandae alias error harum maxime adipisci amet laborum. Perspiciatis 
minima nesciunt dolorem! Officiis iure rerum voluptates a cumque velit quibusdam sed amet tempora. Sit laborum ab, eius fugit doloribus tenetur fugiat, temporibus enim commodi iusto libero magni deleniti quod quam consequuntur! Commodi minima excepturi repudiandae velit hic maxime
doloremque. Quaerat provident commodi consectetur veniam similique ad earum omnis ipsum saepe, voluptas, hic voluptates pariatur est explicabo fugiat, dolorum eligendi quam cupiditate excepturi mollitia maiores labore suscipit quas? Nulla, placeat. Voluptatem quaerat non architecto ab laudantium
modi minima sunt esse temporibus sint culpa, recusandae aliquam numquam totam ratione voluptas quod exercitationem fuga. Possimus quis earum veniam quasi aliquam eligendi, placeat qui corporis!`);
    slides3.addPartners([
      {
        imgURL:"https://multimedia-fabrik.com/wp-content/uploads/2019/02/cropped-Logo_MMF_300.png",
        link:"https://multimedia-fabrik.com"
      },
      {
        imgURL:"https://storage.googleapis.com/logos.360ty.cloud/360ty_world_extern.png",
        link:"https://360ty.world"
      },
    ])
    //Navbar
    slides3.createNav();
	  slides3.addNavbarSocialButton("facebook", "https://www.facebook.com/360ty.world");
    slides3.addNavbarSocialButton("flickr", "https://www.pinterest.de/360ty_world");
    slides3.addNavbarSocialButton("instagram", "https://www.instagram.com/360ty.world_mmf/");
    slides3.addNavbarSocialButton("youtube", "https://www.youtube.com/channel/UCCiyXizlQQQc_-XC9KcEYiw");
    //Homeslide
    slides3.createHomeSlide({
    	basepath:"https://altach.360ty.world/",
    	node:1,
    	fov:20,
      	tilt:-20,
      	pan:21
    });
    slides3.addHomeslideHeadline("360ty");
    slides3.addHomeslideParagraph("Fühle 360° Fotographie");
    slides3.addHomeslideStartSlidesButton("Sliding erlebnis starten");
    slides3.addHomeslideLogo("https://storage.googleapis.com/logos.360ty.cloud/360ty_world_extern.png", "https://360ty.world/");
    //Mainslide 1
    let slideIndex1 = slides3.createSlide({
        basepath: "https://lechwinter.360ty.cloud/",
        node: 1,
        fov: 60,
        tilt: 20,
        pan: -10
      });
    slides3.addToSlideButtonContainer(slideIndex1, slides3.addSlideStartButton("starte die 360° tour"));
    slides3.addSlideFacebookButton(slideIndex1, "https://www.facebook.com/lechzuers/photos/a.10157076246188447/10157076247643447/?type=3&theater");
    slides3.addSlideHeadline(slideIndex1, `Mainprojekt: Lech`);
    slides3.addSlideDescription(slideIndex1, `Lech - Winter`);
    slides3.addSlideFotograf(slideIndex1, "Rene");
    slides3.addSlideLocation(slideIndex1, "Lech am Arlberg | 47°13'N 10°08'");
   
    //Subslide 1_1
    let slideIndex1_1 = slides3.createSubSlide(slideIndex1, {
        basepath: "https://lechsommer.360ty.cloud/",
        node: 1,
        fov: 60,
        tilt: 20,
       	pan: -10
      });
    	slides3.addToSlideButtonContainer(slideIndex1_1, slides3.addSlideStartButton("starte die 360° tour"));
      	slides3.addSlideHeadline(slideIndex1_1, `Mainprojekt: Lech`);
      	slides3.addSlideDescription(slideIndex1_1, `Lech - Sommer`);
      	slides3.addSlideFotograf(slideIndex1_1, "Rene");
      	slides3.addSlideLocation(slideIndex1_1, "Lech am Arlberg | 47°13'N 10°08'");
    let slideIndex1_2 = slides3.createSubSlide(slideIndex1, {
        basepath: "https://lechbynight.360ty.cloud/",
        node: 1,
        fov: 60,
        tilt: 20,
       	pan: -10
      });
    	slides3.addToSlideButtonContainer(slideIndex1_2, slides3.addSlideStartButton("starte die 360° tour"));
      	slides3.addSlideHeadline(slideIndex1_2, `Mainprojekt: Lech`);
      	slides3.addSlideDescription(slideIndex1_2, `Lech - Nacht`);
      	slides3.addSlideFotograf(slideIndex1_2, "Rene");
      	slides3.addSlideLocation(slideIndex1_2, "Lech am Arlberg | 47°13'N 10°08'");
    //Mainslide 2
    let slideIndex2 = slides3.createSlide({
        basepath: "https://burgiswinter.360ty.cloud/",
        node: 1,
        fov: 60,
        tilt: 20,
        pan: -10
      });
    slides3.addToSlideButtonContainer(slideIndex2, slides3.addSlideStartButton("starte die 360° tour"));
    slides3.addSlideHeadline(slideIndex2, `Kundenprojekt: Burgis`);
    slides3.addSlideDescription(slideIndex2, `Burgis - Winter`);
    slides3.addSlideFotograf(slideIndex2, "Rene");
   
    //Subslide 2_1
    let slideIndex2_1 = slides3.createSubSlide(slideIndex2, {
        basepath: "https://burgissommer.360ty.cloud/",
        node: 1,
        fov: 60,
        tilt: 20,
       	pan: -10
      });
    slides3.addToSlideButtonContainer(slideIndex2_1, slides3.addSlideStartButton("starte die 360° tour"));
    slides3.addSlideHeadline(slideIndex2_1, `Kundenrojekt: Burgis`);
    slides3.addSlideDescription(slideIndex2_1, `Burgis - Sommer`);
    slides3.addSlideFotograf(slideIndex2_1, "Rene");
    //slides3 initialisieren
    slides3.init()
  </script>
</body>
</html>

Terminology [EN] | Slides3

API [EN] | Slides3

360ty Elementor Addon - Wordpress Plugin [EN] | Slides3

Begriffe [DE] | Slides3

API [DE] | Slides3

360ty Elementor Addon - WordPress Plugin [DE] | Slides3

API [DE] | Slides3

Einstieg

Homeslide erstellen

Homeslide Hintergrund hinzufügen

Tour als Hinterground

Bild als Hintergrund

Video als Hintergrund

Inhalte zur Homeslide hinzufügen

Überschrift hinzufügen

Texte hinzufügen

"start" Button hinzufügen

benutzerdefinierte Elemente hinzufügen *EXPERIMENTAL*

Logo hinzufügen

Mainslides erstellen

Inhalte zu Mainslides hinzufügen

Buttons hinzufügen

Überschrift hinzufügen

Beschreibung hinzufügen

Fotograf hinzufügen

Location hinzufügen

Facebook share Button hinzufügen

Subslides erstellen

Inhalte zu Subslides hinzufügen

Navbar

"Über uns" hinzufügen

Inhalte zu "Über uns" hinzufügen

Überschrift hinzufügen

Unterüberschrift hinzufügen

Bild hinzufügen

Beschreibung hinzufügen

Partner hinzufügen

Social Media Buttons hinzufügen

Allgemeine Einstellungen

Screenshot Studio Button

Tour laden

Slides Initialisieren

Styling

Primäre und Sekundäre Farben

Primäre Farben setzen

Sekundäre Farben setzen

Beispiel

No Comments

benutzerdefinierte Elemente hinzufügen EXPERIMENTAL