{"id":16871,"date":"2024-05-03T06:30:23","date_gmt":"2024-05-03T06:30:23","guid":{"rendered":"https:\/\/elfsight.com\/de\/?page_id=16871"},"modified":"2025-07-08T10:15:16","modified_gmt":"2025-07-08T10:15:16","slug":"jquery","status":"publish","type":"page","link":"https:\/\/elfsight.com\/de\/before-and-after-slider-widget\/jquery\/","title":{"rendered":"Before and After Slider &#8211; jQuery"},"content":{"rendered":"<div class=\"application-platform-content-item-description application-platform-content-item\" id=\"description\" data-nav-section=\"description\"> <h2>Beschreibung<\/h2> <p> Mit dem Vorher-Nachher-Slider von Elfsight k\u00f6nnen Sie erstaunliche Verkaufsbilder f\u00fcr Ihre Website erstellen. Kunden k\u00f6nnen alle Ver\u00e4nderungen erkunden, die Ihre Waren oder Dienstleistungen mit sich bringen. Laden Sie einfach Vorher- und Nachher-Bilder in den Vorher- und Nachher-Slider f\u00fcr jQuery hoch und sie werden mit einer Trennlinie angezeigt, die verschoben werden kann, um die \u00c4nderung zu erkennen. Sie k\u00f6nnen eine unbegrenzte Anzahl von Folien erstellen, jede mit einer eigenen Beschriftung. Die Teilerausrichtung bietet zwei Optionen: horizontal oder vertikal, und Sie k\u00f6nnen das am besten passende Bildverh\u00e4ltnis ausw\u00e4hlen. Ihre Besucher werden auf jeden Fall kaufen, wenn sie die tats\u00e4chliche Wirksamkeit feststellen Ihrer Angebote! <\/p> <p><b>Vor &amp; einf\u00fcgen nach dem Slider, um Ihre gesch\u00e4ftlichen Herausforderungen schneller zu meistern! <\/b><\/p> <\/div> <div class=\"application-platform-content-item-features application-platform-content-item\" id=\"features\" data-nav-section=\"features\"> <h2>Sehen Sie sich die Liste der wertvollsten Funktionen an: <\/h2> <ul><li>F\u00fcgen Sie eine beliebige Anzahl von Vorher- und Nachher-Sets hinzu von Bildern<\/li> <li>F\u00fcgen Sie Beschriftungen mit Textformatierung zu jedem Bild hinzu<\/li><li>Zwei Layouts: Liste und Karussell<\/li><li>Horizontale oder vertikale Ausrichtung der Trennlinie<\/li><li>Klicken und ziehen oder einfach mit der Maus bewegen, um die Trennlinie zu verschieben<\/li><li>Wischen auf Touchscreens<\/li><\/ul><p><a href=\"#demo\">Sie k\u00f6nnen herausfinden, ob das Widget geeignet ist Sie mit Hilfe der Demo<\/a><\/p> <\/div> <div class=\"application-platform-content-item-installation application-platform-content-item\" id=\"installation\" data-nav-section=\"installation\"> <h2>Wie f\u00fcge ich einen Vergleichsschieberegler auf meiner jQuery-Website hinzu? <\/h2> <p>Befolgen Sie einfach die unten beschriebenen Schritte, um das Widget zu aktivieren. <\/p> <ol><li><b>\u00d6ffnen Sie unseren kostenlosen Editor und beginnen Sie mit der Erstellung Ihres benutzerdefinierten Plugins. <\/b><br> Geben Sie das bevorzugte Layout und die Funktionsmerkmale des Widgets an und \u00fcbernehmen Sie die \u00c4nderungen. <\/li> <li><b>Erhalten Sie den einzigartigen Code, der in der Box auf Elfsight Apps angezeigt wird.<\/b><br> Kopieren Sie unmittelbar nach Abschluss der Installation Ihres Plugins den pers\u00f6nlichen Code im angezeigten Fenster und speichern Sie ihn sp\u00e4terer Anlass. <\/li> <li><b>Beginnen Sie mit der Nutzung des Tools auf Ihrer jQuery-Website<\/b><br> Integrieren Sie den zuvor gespeicherten Code in Ihre Website und \u00fcbernehmen Sie die Korrekturen. <\/li> <li><b>Fertig! Die Integration ist vollst\u00e4ndig abgeschlossen<\/b><br> Gehen Sie auf Ihre Webseite, um die Funktionsweise des Plugins zu \u00fcberpr\u00fcfen. <\/li><\/ol> <p>Wenn Sie Fragen haben oder auf Hindernisse sto\u00dfen, z\u00f6gern Sie nicht, sich bei unserem Support-Team zu bewerben. Unsere Mitarbeiter werden sich freuen, alle Probleme zu l\u00f6sen, die Sie m\u00f6glicherweise mit dem Widget haben. <\/p> <\/div><div class=\"faq\" data-component=\"FAQ\"><div class=\"faq-item\">\n\t\t\t\t\t<div class=\"faq-item-question\">\n\t\t\t\t\t\t<h3 class=\"faq-item-question-text\">Wie bette ich einen Vorher-Nachher-Slider in meine jQuery-Site ein?<\/h3>\n\n\t\t\t\t\t\t<div class=\"faq-item-question-icon\"><\/div>\n\t\t\t\t\t<\/div>\n\n\t\t\t\t\t<div class=\"faq-item-answer\">\n\t\t\t\t\t\t<div class=\"faq-item-answer-text\"><p>Die Grundlage des Das Tool wird innerhalb des Elfsight-Dienstes ausgef\u00fchrt und Sie m\u00fcssen nicht lernen, wie man programmiert. Nutzen Sie die aktive Demo, um Ihr Tool zu gestalten, den Code zu erwerben und ihn in Ihre Website zu integrieren. <\/p><\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div><div class=\"faq-item\">\n\t\t\t\t\t<div class=\"faq-item-question\">\n\t\t\t\t\t\t<h3 class=\"faq-item-question-text\">Die besten Anwendungsbeispiele f\u00fcr die Integration von Bildvergleichen<\/h3>\n\n\t\t\t\t\t\t<div class=\"faq-item-question-icon\"><\/div>\n\t\t\t\t\t<\/div>\n\n\t\t\t\t\t<div class=\"faq-item-answer\">\n\t\t\t\t\t\t<div class=\"faq-item-answer-text\"><p>Wir stellen Ihnen viele Anpassungsm\u00f6glichkeiten zur Verf\u00fcgung: vollwertige Widgets zum Einbetten in die Inhaltsbereich, schwebende Plugins f\u00fcr die Scrollfunktion, Layouts f\u00fcr Fu\u00dfzeile, Kopfzeile und alle m\u00f6glichen vertikalen M\u00f6glichkeiten f\u00fcr Seitenleisten und Men\u00fcs. <\/p><\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div><div class=\"faq-item\">\n\t\t\t\t\t<div class=\"faq-item-question\">\n\t\t\t\t\t\t<h3 class=\"faq-item-question-text\">Gibt es eine M\u00f6glichkeit, einen Produktvergleich oder einen Werkslisten-Slider \u00fcber die Vermittlung Ihres Redakteurs zu erstellen?<\/h3>\n\n\t\t\t\t\t\t<div class=\"faq-item-question-icon\"><\/div>\n\t\t\t\t\t<\/div>\n\n\t\t\t\t\t<div class=\"faq-item-answer\">\n\t\t\t\t\t\t<div class=\"faq-item-answer-text\"><p>Sie k\u00f6nnen gerne welche erstellen \u00c4nderungen des Widgets. Im Editor stehen viele Layouts zur Verf\u00fcgung, und alle k\u00f6nnen problemlos ganz nach Ihren W\u00fcnschen personalisiert werden. <\/p><\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"parent":1269,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/template-application-platform.php","meta":{"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","footnotes":""},"class_list":["post-16871","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Responsiver Vorher-Nachher-Bild-Slider f\u00fcr die jQuery-Website<\/title>\n<meta name=\"description\" content=\"Konfigurieren Sie das Vorher- und Nachher-Slider-Widget auf Ihrer jQuery-Website. Sehen Sie sich die voll funktionsf\u00e4hige Elfsight-Demo an und erstellen Sie Ihr individuelles Plugin mit nur 2 Klicks.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elfsight.com\/de\/before-and-after-slider-widget\/jquery\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsiver Vorher-Nachher-Bild-Slider f\u00fcr die jQuery-Website\" \/>\n<meta property=\"og:description\" content=\"Konfigurieren Sie das Vorher- und Nachher-Slider-Widget auf Ihrer jQuery-Website. Sehen Sie sich die voll funktionsf\u00e4hige Elfsight-Demo an und erstellen Sie Ihr individuelles Plugin mit nur 2 Klicks.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elfsight.com\/de\/before-and-after-slider-widget\/jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Elfsight DE\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-08T10:15:16+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"3\u00a0Minuten\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Responsiver Vorher-Nachher-Bild-Slider f\u00fcr die jQuery-Website","description":"Konfigurieren Sie das Vorher- und Nachher-Slider-Widget auf Ihrer jQuery-Website. Sehen Sie sich die voll funktionsf\u00e4hige Elfsight-Demo an und erstellen Sie Ihr individuelles Plugin mit nur 2 Klicks.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elfsight.com\/de\/before-and-after-slider-widget\/jquery\/","og_locale":"de_DE","og_type":"article","og_title":"Responsiver Vorher-Nachher-Bild-Slider f\u00fcr die jQuery-Website","og_description":"Konfigurieren Sie das Vorher- und Nachher-Slider-Widget auf Ihrer jQuery-Website. Sehen Sie sich die voll funktionsf\u00e4hige Elfsight-Demo an und erstellen Sie Ihr individuelles Plugin mit nur 2 Klicks.","og_url":"https:\/\/elfsight.com\/de\/before-and-after-slider-widget\/jquery\/","og_site_name":"Elfsight DE","article_modified_time":"2025-07-08T10:15:16+00:00","twitter_card":"summary_large_image","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"3\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/elfsight.com\/de\/before-and-after-slider-widget\/jquery\/","url":"https:\/\/elfsight.com\/de\/before-and-after-slider-widget\/jquery\/","name":"Responsiver Vorher-Nachher-Bild-Slider f\u00fcr die jQuery-Website","isPartOf":{"@id":"https:\/\/elfsight.com\/de\/#website"},"datePublished":"2024-05-03T06:30:23+00:00","dateModified":"2025-07-08T10:15:16+00:00","description":"Konfigurieren Sie das Vorher- und Nachher-Slider-Widget auf Ihrer jQuery-Website. Sehen Sie sich die voll funktionsf\u00e4hige Elfsight-Demo an und erstellen Sie Ihr individuelles Plugin mit nur 2 Klicks.","breadcrumb":{"@id":"https:\/\/elfsight.com\/de\/before-and-after-slider-widget\/jquery\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elfsight.com\/de\/before-and-after-slider-widget\/jquery\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/elfsight.com\/de\/before-and-after-slider-widget\/jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/elfsight.com\/de\/"},{"@type":"ListItem","position":2,"name":"Before and After Slider","item":"https:\/\/elfsight.com\/de\/before-and-after-slider-widget\/"},{"@type":"ListItem","position":3,"name":"Before and After Slider &#8211; jQuery"}]},{"@type":"WebSite","@id":"https:\/\/elfsight.com\/de\/#website","url":"https:\/\/elfsight.com\/de\/","name":"Elfsight DE","description":"Just another Elfsight Sites site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elfsight.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"}]}},"meta_box":{"industry":"","seo_heading":"","heading":"","description":"","cta_heading":"","cta_description":"","application":"504","h1":"Vorher-Nachher-Slider f\u00fcr jQuery","h1_caption":"Pr\u00e4sentieren Sie Vergleiche zwischen zwei Bildern, ideal, um Transformationen hervorzuheben oder Produktvorteile m\u00fchelos auf Ihrer jQuery-Website zu pr\u00e4sentieren.","application_category":[],"applications_title":"","applications_request_title":"","applications_request_button_text":"","hero_text":"","hero_video":"","hero_video_schema_markup":"","selling_points_title":"","selling_points_caption":"","selling_points":[],"selling_points_cta_text":"","features_title":"","features":"","ed_cta_examples_text":"","ed_cta_examples_hidden":"","ed_cta_demo_text":"","ed_cta_demo_hidden":"","why_caption":"","why_editor_title":"","why_editor_text":"","why_team_title":"","why_team_text":"","why_service_title":"","why_service_text":"","template_catalog_visible":"","template_catalog_title":"","template_catalog_text":"","template_catalog_categories_visible":"","demo_title":"Erstellen Sie Ihr Vorher-Nachher-Slider-Plugin","demo_caption":"Konfigurieren Sie Ihren Vorher-Nachher-Slider und f\u00fcgen Sie ihn kostenlos zu Ihrer jQuery-Website hinzu!","default_faq_hidden":"","app_template_category":[],"platform":"258","template_public_id":"","codecanyon_url":"","codecanyon_item_id":"","codecanyon_price":"","pricing_caption":"","pricing_elfsight_apps_hide_column":"","pricing_elfsight_apps_url":"","pricing_codecanyon_price_caption":"","integration_category":[],"integration_request_title":"","integration_request_cta":"","integration_platform":"","integrations":[],"platform_category":[],"video_schema_markup":"","price":"ab 0 $ \/ Monat","trial":"","benefits":[{"text":"Kostenlose Installationsunterst\u00fctzung"},{"text":"Professioneller Kundenservice"},{"text":"14-t\u00e4gige R\u00fcckerstattungsgarantie"},{"text":"Lebenslange kostenlose Updates"}],"button_url":"#demo","button_target_blank":"","button_nofollow":"","attributes":[{"name":"Installiert","content":"10,000 - 100,000"},{"name":"Reaktionsfreudig","content":"Ja"},{"name":"Kompatible Browser","content":"Firefox, Safari, Opera, Chrome, Edge"}],"tags":[],"tags_disable_links":"","hide_more_platforms":"","video_object":"","demo_hide_cta":"","demo_hide_cloud_options":"","pricing_title":"","pricing":[{"pricing_icon":"platform","pricing_title":"Elfsight Apps","pricing_title_caption":"Multiplattform-Software, die f\u00fcr jede Website geeignet ist","pricing_price":"ab 0 $ \/ Monat","pricing_price_caption":"Beginnen Sie mit einem kostenlosen Plan","pricing_benefits":[{"text":"Unbegrenzte Domains"},{"text":"Support rund um die Uhr"},{"text":"Kostenlose Installationsunterst\u00fctzung"},{"text":"Vollst\u00e4ndig anpassbar"}],"pricing_button_text":"Zur Website hinzuf\u00fcgen","pricing_button_url":"#demo"}],"related_apps_title":"","related_apps_hidden":"","author":"","image":[],"title":"","job":"","social_networks":[]},"_links":{"self":[{"href":"https:\/\/elfsight.com\/de\/wp-json\/wp\/v2\/pages\/16871","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elfsight.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/elfsight.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/elfsight.com\/de\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/elfsight.com\/de\/wp-json\/wp\/v2\/comments?post=16871"}],"version-history":[{"count":2,"href":"https:\/\/elfsight.com\/de\/wp-json\/wp\/v2\/pages\/16871\/revisions"}],"predecessor-version":[{"id":21337,"href":"https:\/\/elfsight.com\/de\/wp-json\/wp\/v2\/pages\/16871\/revisions\/21337"}],"up":[{"embeddable":true,"href":"https:\/\/elfsight.com\/de\/wp-json\/wp\/v2\/pages\/1269"}],"wp:attachment":[{"href":"https:\/\/elfsight.com\/de\/wp-json\/wp\/v2\/media?parent=16871"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}