{"id":124657,"date":"2022-11-16T17:27:23","date_gmt":"2022-11-16T16:27:23","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/how-to-create-a-slider\/"},"modified":"2025-02-03T16:44:42","modified_gmt":"2025-02-03T15:44:42","slug":"how-to-create-a-slider","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/como-disenar-un-deslizador","title":{"rendered":"C\u00f3mo dise\u00f1ar un deslizador"},"content":{"rendered":"<p>En este ejemplo, aprender\u00e1s a crear un deslizador.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.justinmind.com\/usernote\/tests\/23518471\/73112233\/73155198\/index.html\" width=\"820px\" height=\"300px\" frameborder=\"0\"><\/iframe><\/p>\n<p>As\u00ed es como se construye:<\/p>\n<h3><strong>Ver<\/strong><\/h3>\n<ul>\n<li>Selecciona \u00abRect\u00e1ngulo\u00bb y dale forma para simular una l\u00ednea gruesa.<\/li>\n<li>Coloca una \u00abElipse\u00bb encima de tu rect\u00e1ngulo y haz coincidir el inicio de ambos elementos.<\/li>\n<li>Haz clic en ambos elementos manteniendo pulsada la tecla May\u00fas para seleccionarlos y haz clic con el bot\u00f3n derecho para mostrar el men\u00fa; sobre la secci\u00f3n \u00abAgrupar\u00bb, selecciona \u00abAgrupar en Panel Din\u00e1mico\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-72301\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/create-a-slider-1.png\" alt=\"deslizador-tem\" width=\"1617\" height=\"997\"><\/li>\n<\/ul>\n<h3><strong>Eventos:<\/strong><\/h3>\n<p><span data-preserver-spaces=\"true\">Con la Elipse seleccionada, ve a la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb.&nbsp;<\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona \u00abal arrastrar\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abMover elemento\u00bb y elige la \u00abElipse\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Para la posici\u00f3n \u00abX\u00bb, selecciona \u00abCon cursor\u00bb y para el men\u00fa \u00abY\u00bb \u00abActual\u00bb, para terminar, haz clic en \u00abImpedir que el elemento se mueva fuera del \u00e1rea de su padre\u00bb. Haz clic en \u00abAceptar\u00bb para terminar de crear el evento. <\/span><\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-72301\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/create-a-slider-2.png\" width=\"1617\" height=\"997\">Simula tu prototipo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este ejemplo, aprender\u00e1s a crear un deslizador. As\u00ed es como se construye: Ver Selecciona \u00abRect\u00e1ngulo\u00bb y dale forma para simular una l\u00ednea gruesa. Coloca una&#8230;<\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8430,8424],"tags":[],"class_list":["post-124657","post","type-post","status-publish","format-standard","hentry","category-componentes-avanzados","category-trucos-avanzados"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124657"}],"collection":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/comments?post=124657"}],"version-history":[{"count":2,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124657\/revisions"}],"predecessor-version":[{"id":126184,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124657\/revisions\/126184"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124657"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124657"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124657"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}