{"id":188254,"date":"2021-03-05T10:22:16","date_gmt":"2021-03-05T09:22:16","guid":{"rendered":"https:\/\/guide.jtl-software.com\/creating-image-sliders-with-the-onpage-composer\/"},"modified":"2023-06-15T15:42:47","modified_gmt":"2023-06-15T13:42:47","slug":"creating-image-sliders-with-the-onpage-composer","status":"publish","type":"page","link":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-image-sliders-with-the-onpage-composer\/","title":{"rendered":"Creating image sliders with the OnPage Composer"},"content":{"rendered":"<div class=\"wpb-content-wrapper\">[vc_row][vc_column width=&#8221;1\/3&#8243; responsive=&#8221;{&#8220;col&#8220;: &#8220;12&#8220;, &#8220;order-md&#8220;: &#8220;1&#8220;, &#8220;col-lg&#8220;: &#8220;4&#8220;, &#8220;order-lg&#8220;: &#8220;12&#8220;}&#8221; advanced=&#8221;{&#8220;class&#8220;: &#8220;&#8220;, &#8220;hash&#8220;: &#8220;&#8220;}&#8221;]<div id=\"toc\">\n\t<div class=\"card border-0 bg-rysywhite mt-0 mt-lg-5 mb-5 w-100\" data-toc-element>\n\t\t<div class=\"d-none d-lg-flex flex-column\">\n\t\t\t<span class=\"fa-layers mx-auto mt--4 fa-fw fa-3x text-shaftblue\">\n\t\t\t\t<span class=\"fas fa-circle\"><\/span>\n\t\t\t\t<span class=\"fas fa-inverse fa-list-ul\" data-fa-transform=\"shrink-8\"><\/span>\n\t\t\t<\/span>\n\t\t\t<span class=\"font-weight-bold text-shaftblue text-center h5 mt-3 mb-0\">Contents<\/span>\n\t\t<\/div>\n\t\t<div class=\"d-block d-lg-none\">\n\t\t\t<a class=\"text-decoration-none card-header-link collapsed\" data-toggle=\"collapse\" href=\"#collapse-toc\" aria-expanded=\"false\" aria-controls=\"collapse-toc\">\n\t\t\t\t<div class=\"card-header d-flex bg-white align-items-center\" role=\"tab\" id=\"heading-toc\">\n\t\t\t\t\t<span class=\"h4 mb-0 d-flex align-items-center\">\n\t\t\t\t\t\t<span class=\"fa-layers fa-fw fa-2x mr-2 text-shaftblue\">\n\t\t\t\t\t\t\t<span class=\"fas fa-circle\"><\/span>\n\t\t\t\t\t\t\t<span class=\"fas fa-inverse fa-list-ul\" data-fa-transform=\"shrink-8\"><\/span>\n\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t<span>Contents<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<span class=\"flex-shrink-0 ml-auto fas fa-caret-down text-gray\"><\/span>\n\t\t\t\t<\/div>\n\t\t\t<\/a>\n\t\t<\/div>\n\t\t<div id=\"collapse-toc\" class=\"collapse show\" data-parent=\"#toc\" role=\"tabpanel\" aria-labelledby=\"heading-toc\">\n\t\t\t<div class=\"card-body p-4 table-of-content\">\n\t\t\t\t<ul data-toc-headings=\"h2, h3, h4\" data-toc class=\"list-shop\"><\/ul>\n\t\t\t<\/div>\n\t    <\/div>\n\t<\/div>\n<\/div>[\/vc_column][vc_column responsive=&#8221;{&#8220;col&#8220;: &#8220;12&#8220;, &#8220;col-md&#8220;: &#8220;8&#8220;, &#8220;order-md&#8220;: &#8220;12&#8220;, &#8220;order-lg&#8220;: &#8220;1&#8220;}&#8221; width=&#8221;2\/3&#8243; advanced=&#8221;{&#8220;class&#8220;: &#8220;&#8220;, &#8220;hash&#8220;: &#8220;&#8220;}&#8221;]<h1 class=\"d-flex align-items-center hl-shop\" id=\"creating-image-sliders-with-the-onpage-composer\">Creating image sliders with the OnPage Composer <span id='anchor-creating-image-sliders-with-the-onpage-composer' data-href='#creating-image-sliders-with-the-onpage-composer' class='far fa-link' data-anchor><\/span><\/h1><div class=\"custom-box\">\n\t<div class=\"d-flex align-items-center mb-4\">\n\t\t\t\t\t\t\t<span class=\"mr-3 fa-stack flex-shrink-0 fa-1x\">\n\t\t\t<span class=\"fas fa-circle fa-stack-2x text-shaftblue\"><\/span>\n\t\t\t\t\t<span class=\"flex-shrink-0 fas fa-clipboard-list text-white fa-stack-1x\"><\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\n\t\t\n\t\t<h3 class=\"mb-0 \" id=\"your-task-initial-situation\">Your task\/initial situation <span id='anchor-your-task-initial-situation' data-href='#your-task-initial-situation' class='far fa-link' data-anchor><\/span><\/h3>\t<\/div>\n\t<div class=\"box-content\">\n\t\tYou would like to add a slider to your online shop. Several images are displayed one after the other in a slider.\t<\/div>\n<\/div>\n<h2 class=\"d-flex align-items-center hl-wawi\" id=\"creating-a-slider\">Creating a slider <span id='anchor-creating-a-slider' data-href='#creating-a-slider' class='far fa-link' data-anchor><\/span><\/h2><ol start=\"1\" class=\"list-reset step mb-5 list-shop normal-step\">\n\t<li >\n\tLog in to the back end of JTL-Shop and switch to the front end of JTL-Shop.<\/li><li >\n\tOpen the page you want to edit and click the OnPage Composer icon at the top left of the page to open the OnPage Composer for that page.<\/li><li >\n\tDrag the <span class=\"highlight\">Image Slider<\/span> portlet&nbsp;in the OnPage Composer to the desired position. The <span class=\"highlight\">Edit Image Slider<\/span> window opens.<\/li><\/ol>\t\t\t\t\t\t<div data-gallery>\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/uploads\/add-slider-portlet-opc-jtl-shop-5-1.png\" itemprop=\"contentUrl\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/guide.jtl-software.com\/uploads\/add-slider-portlet-opc-jtl-shop-5-1-1024x635.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/add-slider-portlet-opc-jtl-shop-5-1.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/add-slider-portlet-opc-jtl-shop-5-1-1024x635.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/add-slider-portlet-opc-jtl-shop-5-1-768x476.png 640w\" width=\"1024\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"635\" alt=\"Dragging the Image Slider portlet onto the page\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/add-slider-portlet-opc-jtl-shop-5-1.png&quot;,&quot;w&quot;:1497,&quot;h&quot;:928}\" class=\"border-defaultgray border-w-1 border img-fluid mb-5\">\n\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t<ol start=\"4\" class=\"list-reset step mb-5 list-shop normal-step\">\n\t<li class=\"media-single-line\">\n\tConfigure the settings on the <span class=\"highlight\">General<\/span> tab (see below).<\/li><li class=\"media-single-line\">\n\tSwitch to the <span class=\"highlight\">Slides<\/span> tab.<\/li><li >\n\tClick on <span class=\"highlight\">Click to upload<\/span>. A dialogue opens in which you will find all media files uploaded for the OPC so far.<\/li><li >\n\tDrag and drop the image file for your slider into the window or right-click in the window and select <span class=\"highlight\">Upload file<\/span>, navigate to the file, and select it.<\/li><li >\n\tThen double-click on your graphic file to apply it to your slider.<\/li><li >\n\tEnter a <span class=\"highlight\">title<\/span> and <span class=\"highlight\">description<\/span>. Both are displayed when you move the cursor over the image. The <span class=\"highlight\">alternative text<\/span> is mainly relevant for search engines and should describe the image as well as possible.<\/li><li >\n\tUnder <span class=\"highlight\">No action<\/span>, select whether a link should be added to the image. You can enter it under <span class=\"highlight\">Link<\/span>.<\/li><li >\n\tClick on the plus icon to add more slides. Then save the slider.<\/li><\/ol>\t\t\t\t\t\t<div data-gallery>\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/uploads\/slides-slider-portlet-opc-jtl-shop-5-1.png\" itemprop=\"contentUrl\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/guide.jtl-software.com\/uploads\/slides-slider-portlet-opc-jtl-shop-5-1-768x681.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/slides-slider-portlet-opc-jtl-shop-5-1.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/slides-slider-portlet-opc-jtl-shop-5-1.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/slides-slider-portlet-opc-jtl-shop-5-1-768x681.png 640w\" width=\"768\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"681\" alt=\"Setting the slides for a slider in the OnPage Composer\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/slides-slider-portlet-opc-jtl-shop-5-1.png&quot;,&quot;w&quot;:885,&quot;h&quot;:785}\" class=\"border-defaultgray border-w-1 border img-fluid mb-5\">\n\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t<ol start=\"12\" class=\"list-reset step mb-5 list-shop normal-step\">\n\t<li >\n\tFollow the further steps to preview and publish an edited page at <span style=\"color: #5cbcf6;\"><a style=\"color: #5cbcf6;\" href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/editing-pages-with-the-onpage-composer\/\">Editing pages with the OnPage Composer<\/a><\/span>.<\/li><\/ol><h2 class=\"d-flex align-items-center hl-wawi\" id=\"general-info-tab\">General info tab <span id='anchor-general-info-tab' data-href='#general-info-tab' class='far fa-link' data-anchor><\/span><\/h2>\t<p>In this tab, you make the settings for the slider.<\/p>\n\t\t\t\t\t\t<div data-gallery>\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/uploads\/general-image-slider-portlet-opc-jtl-shop-1.png\" itemprop=\"contentUrl\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/guide.jtl-software.com\/uploads\/general-image-slider-portlet-opc-jtl-shop-1-768x758.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/general-image-slider-portlet-opc-jtl-shop-1.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/general-image-slider-portlet-opc-jtl-shop-1.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/general-image-slider-portlet-opc-jtl-shop-1-768x758.png 640w\" width=\"768\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"758\" alt=\"General tab for a slider in the OnPage Composer\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/general-image-slider-portlet-opc-jtl-shop-1.png&quot;,&quot;w&quot;:887,&quot;h&quot;:876}\" class=\"border-defaultgray border-w-1 border img-fluid mb-5\">\n\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<p><strong>Theme:<\/strong> Here you can select a theme to be used for the slider.<\/p>\n<hr  \/>\n\t<p><strong>Slider speed (ms):<\/strong> Here you can define how long an animation should last between two slides (in milliseconds).<\/p>\n<hr  \/>\n\t<p><strong>Pause (ms):<\/strong> Here you can define how long a slide is to be displayed before changing to the next slide.<\/p>\n<hr  \/>\n\t<p><strong>Autostart:<\/strong> Here you can specify whether the slider should start automatically when the page is called up.<\/p>\n<hr  \/>\n\t<p><strong>Pause when hovering:<\/strong> Here you can determine whether the slider stops as soon as a customer moves the cursor over it.<\/p>\n<hr  \/>\n\t<p><strong>Dot navigation:<\/strong> Displays a navigation in the form of dots at the bottom edge of the slider.<\/p>\n<hr  \/>\n\t<p><strong>Arrow navigation:<\/strong> Displays navigation in the form of directional arrows on the left and right sides of the slider.<\/p>\n<hr  \/>\n\t<p><strong>Use Ken Burns effect:<\/strong> Activates the so-called Ken Burns effect. This automatically generates slight zooms and image movements in the slider. If you activate this option, the options&nbsp;<span class=\"highlight\">Autostart<\/span>,&nbsp;<span class=\"highlight\">Pause when hovering<\/span>, <span class=\"highlight\">Dot navigation<\/span>, <span class=\"highlight\">Arrow navigation,<\/span>&nbsp;and&nbsp;<span class=\"highlight\">Effects<\/span>&nbsp;are overwritten.<\/p>\n<hr  \/>\n\t<p><strong>Effects:<\/strong> Here you can set which effects are to be used for the transitions between the slides.&nbsp;<span class=\"highlight\">Random effects<\/span>&nbsp;selects randomly from the effects listed below.<\/p>\n\t<p>To activate specific effects, highlight it. You can deactivate selected effects by unchecking them.<\/p>\n<h2 class=\"d-flex align-items-center hl-wawi\" id=\"layout-tab\">Layout tab <span id='anchor-layout-tab' data-href='#layout-tab' class='far fa-link' data-anchor><\/span><\/h2>\t<p>In this tab you can set the layout of the slider.<\/p>\n\t\t\t\t\t\t<div data-gallery>\n\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/uploads\/layout-slider-portlet-opc-jtl-shop-5-1.png\" itemprop=\"contentUrl\">\n\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/guide.jtl-software.com\/uploads\/layout-slider-portlet-opc-jtl-shop-5-1-768x688.png\" srcset=\"https:\/\/guide.jtl-software.com\/uploads\/layout-slider-portlet-opc-jtl-shop-5-1.png 1600w,https:\/\/guide.jtl-software.com\/uploads\/layout-slider-portlet-opc-jtl-shop-5-1.png 1024w,https:\/\/guide.jtl-software.com\/uploads\/layout-slider-portlet-opc-jtl-shop-5-1-768x688.png 640w\" width=\"768\" sizes=\"auto, (max-width: 20em) 30vw, (max-width: 30em) 60vw, (max-width: 40em) 90vw\" height=\"688\" alt=\"Setting the layout for a slider\" data-pswp=\"{&quot;src&quot;:&quot;https:\\\/\\\/guide.jtl-software.com\\\/uploads\\\/layout-slider-portlet-opc-jtl-shop-5-1.png&quot;,&quot;w&quot;:886,&quot;h&quot;:794}\" class=\"border-defaultgray border-w-1 border img-fluid mb-5\">\n\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<p><strong>Background colour:<\/strong> Here you can set a colour to be displayed in the background of the slider. The colour is only visible if you set a padding (see below).<\/p>\n<hr  \/>\n\t<p><strong>Font colour:<\/strong> Here you set the colour of the font that is displayed below the slides.<\/p>\n<hr  \/>\n\t<p><strong>Font size:<\/strong>&nbsp;Here you set the size of the font. Enter a CSS value, e.g&nbsp;<span class=\"TextRun BCX7 SCXW218896037\" lang=\"en-gb\" data-contrast=\"none\"><span class=\"NormalTextRun BCX7 SCXW218896037\">5px, 0.5em, etc.<\/span><\/span><\/p>\n<hr  \/>\n\t<p><strong>Border style\/Border colour:<\/strong> Here you can specify whether the slider should have a border and what colour it should be.<\/p>\n<hr  \/>\n\t<p><strong>Border rounding:<\/strong>&nbsp;Here you can specify whether the border should be rounded. You can specify the distance from the corner at which the rounding will start. You must specify a border style before you can do this. Enter a CSS value, e.g&nbsp;<span class=\"TextRun BCX7 SCXW218896037\" lang=\"en-gb\" data-contrast=\"none\"><span class=\"NormalTextRun BCX7 SCXW218896037\">5px, 0.5em, etc.<\/span><\/span><\/p>\n<hr  \/>\n\t<p><span class=\"TextRun BCX7 SCXW218896037\" lang=\"en-gb\" data-contrast=\"none\"><span class=\"NormalTextRun BCX7 SCXW218896037\"><strong>Custom class names:<\/strong> Enter here the class names to be appended to the class attribute of the portlet. The names you assign here can be, for example, CSS classes that are defined in the theme of the template. For more information, please see the <a href=\"https:\/\/jtl-devguide.readthedocs.io\/projects\/jtl-shop\/de\/latest\/shop_templates\/eigenes_theme.html\">developer documentation<\/a>.<\/span><\/span><\/p>\n<hr  \/>\n\t<p><span class=\"TextRun BCX7 SCXW218896037\" lang=\"en-gb\" data-contrast=\"none\"><span class=\"NormalTextRun BCX7 SCXW218896037\"><strong>Hide portlet:<\/strong> Select here whether the portlet should be hidden when viewed on certain end devices. XS stands for mobile phones, SM for tablets, MD for desktop computers and LG for large desktop computers.<\/span><\/span><\/p>\n<hr  \/>\n\t<p><strong>Margin:<\/strong>&nbsp;Here you can set for each page how much space in pixels should be between the element and the (imaginary) edge. The element is reduced\/moved accordingly.<\/p>\n<hr  \/>\n\t<p><strong>Border:<\/strong>&nbsp;Here you can set the size of the frame in pixels for each page.<\/p>\n<hr  \/>\n\t<p><strong>Padding:<\/strong>&nbsp;Here you can set for each page how much space in pixels should be between the element and the (imaginary) edge.<\/p>\n<div class=\"mt-5 card\">\n\t\t\t<span class=\"fa-layers mx-auto mt--4 fa-fw fa-3x text-shop\">\n\t\t\t<span class=\"fas fa-circle\"><\/span>\n\t\t\t<span data-fa-transform=\"shrink-8\" class=\"fas fa-link fa-inverse\"><\/span>\n\t\t<\/span>\n\t\t\t<div class=\"card-body p-4\">\n\t\t<p class=\"d-flex align-items-center hl-wawi h4\">Related topics<\/p>\n<ul class=\"list-reset list-icons list-custom-square list-shop\">\n\t\t\t\t\t\t<li>\n\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/overview-of-content-portlets\/\" title=\"Overview of content portlets\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tOverview of content portlets\t\t\t\t<\/a>\n\t\t\t<\/li>\n\t\t\t\t\t<li>\n\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-banners-with-the-onpage-composer\/\" title=\"Creating banners with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tCreating banners with the OnPage Composer\t\t\t\t<\/a>\n\t\t\t<\/li>\n\t\t\t\t\t<li>\n\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-buttons-with-the-onpage-composer\/\" title=\"Creating buttons with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tCreating buttons with the OnPage Composer\t\t\t\t<\/a>\n\t\t\t<\/li>\n\t\t\t\t\t<li>\n\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-countdowns-with-the-onpage-composer\/\" title=\"Creating countdowns with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tCreating countdowns with the OnPage Composer\t\t\t\t<\/a>\n\t\t\t<\/li>\n\t\t\t\t\t<li>\n\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-galleries-with-the-onpage-composer\/\" title=\"Creating galleries with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tCreating galleries with the OnPage Composer\t\t\t\t<\/a>\n\t\t\t<\/li>\n\t\t\t\t\t<li>\n\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-headlines-with-the-onpage-composer\/\" title=\"Creating headlines with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tCreating headlines with the OnPage Composer\t\t\t\t<\/a>\n\t\t\t<\/li>\n\t\t\t\t\t<li>\n\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-an-image-with-the-onpage-composer\/\" title=\"Inserting an image with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tInserting an image with the OnPage Composer\t\t\t\t<\/a>\n\t\t\t<\/li>\n\t\t\t\t\t<li>\n\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-product-streams-with-the-onpage-composer\/\" title=\"Creating product streams with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tCreating product streams with the OnPage Composer\t\t\t\t<\/a>\n\t\t\t<\/li>\n\t\t\t\t\t<li>\n\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-texts-with-the-onpage-composer\/\" title=\"Inserting texts with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tInserting texts with the OnPage Composer\t\t\t\t<\/a>\n\t\t\t<\/li>\n\t\t\t\t\t<li>\n\t\t\t\t<a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-videos-with-the-onpage-composer\/\" title=\"Inserting videos with the OnPage Composer\">\n\t\t\t\t\t<span class=\"list-icon fas fa-square\"><\/span>\t\t\t\t\tInserting videos with the OnPage Composer\t\t\t\t<\/a>\n\t\t\t<\/li>\n\t\t\t\t<\/ul>\t<\/div>\n<\/div>[\/vc_column][\/vc_row]<\/div>","protected":false},"excerpt":{"rendered":"Contents Contents Inserting videos with the OnPage Composer Your task\/initial situation You would like to embed a video from YouTube <a href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/inserting-texts-with-the-onpage-composer\/\">[...]<\/a>","protected":false},"author":2,"featured_media":0,"parent":188596,"menu_order":119,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_relevanssi_hide_post":"","_relevanssi_hide_content":"","_relevanssi_pin_for_all":"","_relevanssi_pin_keywords":"","_relevanssi_unpin_keywords":"","_relevanssi_related_keywords":"","_relevanssi_related_include_ids":"","_relevanssi_related_exclude_ids":"","_relevanssi_related_no_append":"","_relevanssi_related_not_related":"","_relevanssi_related_posts":"","_relevanssi_noindex_reason":"","footnotes":""},"tags":[],"class_list":["post-188254","page","type-page","status-publish","hentry","pages_category-opc-content-portlets-en"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Creating image sliders with the OnPage Composer &#8211; JTL-Guide<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-image-sliders-with-the-onpage-composer\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating image sliders with the OnPage Composer &#8211; JTL-Guide\" \/>\n<meta property=\"og:url\" content=\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-image-sliders-with-the-onpage-composer\/\" \/>\n<meta property=\"og:site_name\" content=\"JTL-Guide\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-15T13:42:47+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-image-sliders-with-the-onpage-composer\/\",\"url\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-image-sliders-with-the-onpage-composer\/\",\"name\":\"Creating image sliders with the OnPage Composer &#8211; JTL-Guide\",\"isPartOf\":{\"@id\":\"https:\/\/guide.jtl-software.com\/en\/#website\"},\"datePublished\":\"2021-03-05T09:22:16+00:00\",\"dateModified\":\"2023-06-15T13:42:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-image-sliders-with-the-onpage-composer\/#breadcrumb\"},\"inLanguage\":\"en-en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-image-sliders-with-the-onpage-composer\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-image-sliders-with-the-onpage-composer\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"JTL-Shop\",\"item\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"OnPage Composer\",\"item\":\"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Creating image sliders with the OnPage Composer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/guide.jtl-software.com\/en\/#website\",\"url\":\"https:\/\/guide.jtl-software.com\/en\/\",\"name\":\"JTL-Guide\",\"description\":\"Dokumentation f\u00fcr die gesamte Produktfamilie von JTL\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/guide.jtl-software.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-en\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating image sliders with the OnPage Composer &#8211; JTL-Guide","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:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-image-sliders-with-the-onpage-composer\/","og_locale":"en_US","og_type":"article","og_title":"Creating image sliders with the OnPage Composer &#8211; JTL-Guide","og_url":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-image-sliders-with-the-onpage-composer\/","og_site_name":"JTL-Guide","article_modified_time":"2023-06-15T13:42:47+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-image-sliders-with-the-onpage-composer\/","url":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-image-sliders-with-the-onpage-composer\/","name":"Creating image sliders with the OnPage Composer &#8211; JTL-Guide","isPartOf":{"@id":"https:\/\/guide.jtl-software.com\/en\/#website"},"datePublished":"2021-03-05T09:22:16+00:00","dateModified":"2023-06-15T13:42:47+00:00","breadcrumb":{"@id":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-image-sliders-with-the-onpage-composer\/#breadcrumb"},"inLanguage":"en-en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-image-sliders-with-the-onpage-composer\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/creating-image-sliders-with-the-onpage-composer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"JTL-Shop","item":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/"},{"@type":"ListItem","position":2,"name":"OnPage Composer","item":"https:\/\/guide.jtl-software.com\/en\/jtl-shop\/onpage-composer\/"},{"@type":"ListItem","position":3,"name":"Creating image sliders with the OnPage Composer"}]},{"@type":"WebSite","@id":"https:\/\/guide.jtl-software.com\/en\/#website","url":"https:\/\/guide.jtl-software.com\/en\/","name":"JTL-Guide","description":"Dokumentation f\u00fcr die gesamte Produktfamilie von JTL","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/guide.jtl-software.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-en"}]}},"_links":{"self":[{"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/pages\/188254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/comments?post=188254"}],"version-history":[{"count":5,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/pages\/188254\/revisions"}],"predecessor-version":[{"id":195910,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/pages\/188254\/revisions\/195910"}],"up":[{"embeddable":true,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/pages\/188596"}],"wp:attachment":[{"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/media?parent=188254"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/guide.jtl-software.com\/en\/wp-json\/wp\/v2\/tags?post=188254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}