{"id":6585,"date":"2015-03-13T18:23:04","date_gmt":"2015-03-13T18:23:04","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=6585"},"modified":"2015-03-13T18:23:04","modified_gmt":"2015-03-13T18:23:04","slug":"jquery-slidertabs","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/jquery-slidertabs\/","title":{"rendered":"jQuery SliderTabs"},"content":{"rendered":"<p>SliderTabs es un plugin jQuery personalizable que te permite crear un slider de contenido que configurando sus opciones podemos conseguir un efecto con pesta\u00f1as bastante atractivo.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2015\/03\/sliderTabs.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6586\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2015\/03\/sliderTabs.png\" alt=\"sliderTabs\" width=\"987\" height=\"199\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2015\/03\/sliderTabs.png 987w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2015\/03\/sliderTabs-300x60.png 300w\" sizes=\"auto, (max-width: 987px) 100vw, 987px\" \/><\/a><\/p>\n<p><strong>Algunas de sus caracter\u00edsticas m\u00e1s destacadas<\/strong><\/p>\n<ul>\n<li>F\u00e1cil de configurar y personalizar<\/li>\n<li>M\u00faltiples controles deslizantes<\/li>\n<li>Reproducci\u00f3n autom\u00e1tica<\/li>\n<li>Creaci\u00f3n ilimitada de pesta\u00f1as<\/li>\n<li>Soporte multi navegador<\/li>\n<li>Se adapta a todos los dispositivos<\/li>\n<\/ul>\n<p>Instalar en tu p\u00e1gina Web es tan sencillo como <a href=\"http:\/\/lopatin.github.io\/sliderTabs\/sliderTabs-1.1.zip\" target=\"_blank\">descargar jQuery SliderTabs<\/a> y a\u00f1adir los estilos necesarios y plugin que vienen en la descarga en la cabecera de tu p\u00e1gina, dentro de la etiqueta &lt;head&gt;. Por ejemplo:<\/p>\n<div id=\"wpshdo_1\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_1\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_1\"><\/a><a id=\"wpshat_1\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_1\"  onClick=\"javascript:wpsh_toggleBlock(1)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_1\" onClick=\"javascript:wpsh_code(1)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_1\" onClick=\"javascript:wpsh_print(1)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_1\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"html4strict\" style=\"font-family:monospace;\"><span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/link.html\"><span class=\"kw2\">link<\/span><\/a> <span class=\"kw3\">rel<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;stylesheet&quot;<\/span> <span class=\"kw3\">href<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;styles\/jquery.sliderTabs.min.css&quot;<\/span>&gt;<\/span>\n<span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/script.html\"><span class=\"kw2\">script<\/span><\/a> <span class=\"kw3\">src<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.3\/jquery.min.js&quot;<\/span>&gt;&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/script.html\"><span class=\"kw2\">script<\/span><\/a>&gt;<\/span>\n<span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/script.html\"><span class=\"kw2\">script<\/span><\/a> <span class=\"kw3\">src<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;jquery.sliderTabs.min.js&quot;<\/span>&gt;&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/script.html\"><span class=\"kw2\">script<\/span><\/a>&gt;<\/span><\/pre><\/div><\/div>\n<p>En el &lt;body&gt; all\u00ed donde queramos meteremos los contenedores que formar\u00e1n las pesta\u00f1as y su contenido:<\/p>\n<div id=\"wpshdo_2\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_2\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_2\"><\/a><a id=\"wpshat_2\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_2\"  onClick=\"javascript:wpsh_toggleBlock(2)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_2\" onClick=\"javascript:wpsh_code(2)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_2\" onClick=\"javascript:wpsh_print(2)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_2\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"html4strict\" style=\"font-family:monospace;\"><span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;mySliderTabs&quot;<\/span>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/ul.html\"><span class=\"kw2\">ul<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/li.html\"><span class=\"kw2\">li<\/span><\/a>&gt;&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/a.html\"><span class=\"kw2\">a<\/span><\/a> <span class=\"kw3\">href<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;#tab-1&quot;<\/span>&gt;<\/span>Information<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/a.html\"><span class=\"kw2\">a<\/span><\/a>&gt;&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/li.html\"><span class=\"kw2\">li<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/li.html\"><span class=\"kw2\">li<\/span><\/a>&gt;&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/a.html\"><span class=\"kw2\">a<\/span><\/a> <span class=\"kw3\">href<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;#tab-2&quot;<\/span>&gt;<\/span>Features<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/a.html\"><span class=\"kw2\">a<\/span><\/a>&gt;&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/li.html\"><span class=\"kw2\">li<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/li.html\"><span class=\"kw2\">li<\/span><\/a>&gt;&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/a.html\"><span class=\"kw2\">a<\/span><\/a> <span class=\"kw3\">href<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;#tab-3&quot;<\/span>&gt;<\/span>Comments<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/a.html\"><span class=\"kw2\">a<\/span><\/a>&gt;&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/li.html\"><span class=\"kw2\">li<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/ul.html\"><span class=\"kw2\">ul<\/span><\/a>&gt;<\/span>\n&nbsp;\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;tab-1&quot;<\/span>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/h3.html\"><span class=\"kw2\">h3<\/span><\/a>&gt;<\/span>Information<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/h3.html\"><span class=\"kw2\">h3<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/p.html\"><span class=\"kw2\">p<\/span><\/a>&gt;<\/span>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno est\u00e1ndar de las industrias desde el a\u00f1o 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido us\u00f3 una galer\u00eda de textos y los mezcl\u00f3 de tal manera que logr\u00f3 hacer un libro de textos especimen. No s\u00f3lo sobrevivi\u00f3 500 a\u00f1os, sino que tambien ingres\u00f3 como texto de relleno en documentos electr\u00f3nicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creaci\u00f3n de las hojas &quot;Letraset&quot;, las cuales contenian pasajes de Lorem Ipsum, y m\u00e1s recientemente con software de autoedici\u00f3n, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/p.html\"><span class=\"kw2\">p<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/p.html\"><span class=\"kw2\">p<\/span><\/a>&gt;<\/span>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno est\u00e1ndar de las industrias desde el a\u00f1o 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido us\u00f3 una galer\u00eda de textos y los mezcl\u00f3 de tal manera que logr\u00f3 hacer un libro de textos especimen. No s\u00f3lo sobrevivi\u00f3 500 a\u00f1os, sino que tambien ingres\u00f3 como texto de relleno en documentos electr\u00f3nicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creaci\u00f3n de las hojas &quot;Letraset&quot;, las cuales contenian pasajes de Lorem Ipsum, y m\u00e1s recientemente con software de autoedici\u00f3n, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/p.html\"><span class=\"kw2\">p<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/p.html\"><span class=\"kw2\">p<\/span><\/a>&gt;<\/span>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno est\u00e1ndar de las industrias desde el a\u00f1o 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido us\u00f3 una galer\u00eda de textos y los mezcl\u00f3 de tal manera que logr\u00f3 hacer un libro de textos especimen. No s\u00f3lo sobrevivi\u00f3 500 a\u00f1os, sino que tambien ingres\u00f3 como texto de relleno en documentos electr\u00f3nicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creaci\u00f3n de las hojas &quot;Letraset&quot;, las cuales contenian pasajes de Lorem Ipsum, y m\u00e1s recientemente con software de autoedici\u00f3n, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/p.html\"><span class=\"kw2\">p<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;tab-2&quot;<\/span>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/h3.html\"><span class=\"kw2\">h3<\/span><\/a>&gt;<\/span>Features<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/h3.html\"><span class=\"kw2\">h3<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/ul.html\"><span class=\"kw2\">ul<\/span><\/a>&gt;<\/span>\n            <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/li.html\"><span class=\"kw2\">li<\/span><\/a>&gt;<\/span>Feature 1<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/li.html\"><span class=\"kw2\">li<\/span><\/a>&gt;<\/span>\n            <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/li.html\"><span class=\"kw2\">li<\/span><\/a>&gt;<\/span>Feature 2<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/li.html\"><span class=\"kw2\">li<\/span><\/a>&gt;<\/span>\n            <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/li.html\"><span class=\"kw2\">li<\/span><\/a>&gt;<\/span>Feature 3<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/li.html\"><span class=\"kw2\">li<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/ul.html\"><span class=\"kw2\">ul<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a> <span class=\"kw3\">id<\/span><span class=\"sy0\">=<\/span><span class=\"st0\">&quot;tab-3&quot;<\/span>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/h3.html\"><span class=\"kw2\">h3<\/span><\/a>&gt;<\/span>Comments<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/h3.html\"><span class=\"kw2\">h3<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/ul.html\"><span class=\"kw2\">ul<\/span><\/a>&gt;<\/span>\n            <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/li.html\"><span class=\"kw2\">li<\/span><\/a>&gt;<\/span>Comment 1<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/li.html\"><span class=\"kw2\">li<\/span><\/a>&gt;<\/span>\n            <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/li.html\"><span class=\"kw2\">li<\/span><\/a>&gt;<\/span>Comment 2<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/li.html\"><span class=\"kw2\">li<\/span><\/a>&gt;<\/span>\n            <span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/li.html\"><span class=\"kw2\">li<\/span><\/a>&gt;<\/span>Comment 3<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/li.html\"><span class=\"kw2\">li<\/span><\/a>&gt;<\/span>\n        <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/ul.html\"><span class=\"kw2\">ul<\/span><\/a>&gt;<\/span>\n    <span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span>\n<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/div.html\"><span class=\"kw2\">div<\/span><\/a>&gt;<\/span><\/pre><\/div><\/div>\n<p>Y finalmente, justo despu\u00e9s de este &lt;div&gt; a\u00f1adiremos la llamada al plugin:<\/p>\n<div id=\"wpshdo_3\" class=\"wp-synhighlighter-outer\"><div id=\"wpshdt_3\" class=\"wp-synhighlighter-expanded\"><table border=\"0\" width=\"100%\"><tr><td align=\"left\" width=\"80%\"><a name=\"#codesyntax_3\"><\/a><a id=\"wpshat_3\" class=\"wp-synhighlighter-title\" href=\"#codesyntax_3\"  onClick=\"javascript:wpsh_toggleBlock(3)\" title=\"Click to show\/hide code block\">Source code<\/a><\/td><td align=\"right\"><a href=\"#codesyntax_3\" onClick=\"javascript:wpsh_code(3)\" title=\"Show code only\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/code.png\" \/><\/a>&nbsp;<a href=\"#codesyntax_3\" onClick=\"javascript:wpsh_print(3)\" title=\"Print code\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/printer.png\" \/><\/a>&nbsp;<a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/About.html\" target=\"_blank\" title=\"Show plugin information\"><img decoding=\"async\" border=\"0\" style=\"border: 0 none\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/plugins\/wp-synhighlight\/themes\/default\/images\/info.gif\" \/><\/a>&nbsp;<\/td><\/tr><\/table><\/div><div id=\"wpshdi_3\" class=\"wp-synhighlighter-inner\" style=\"display: block;\"><pre class=\"html4strict\" style=\"font-family:monospace;\"><span class=\"sc2\">&lt;<a href=\"http:\/\/december.com\/html\/4\/element\/script.html\"><span class=\"kw2\">script<\/span><\/a>&gt;<\/span>\n$(document).ready(function(){\n    var slider = $(&quot;div#mySliderTabs&quot;).sliderTabs();\n});\n<span class=\"sc2\">&lt;<span class=\"sy0\">\/<\/span><a href=\"http:\/\/december.com\/html\/4\/element\/script.html\"><span class=\"kw2\">script<\/span><\/a>&gt;<\/span><\/pre><\/div><\/div>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/sliderTabs\/\" target=\"_blank\">Ver ejemplo en funcionamiento<\/a><\/p>\n<p><a href=\"http:\/\/lopatin.github.io\/sliderTabs\/#options\" target=\"_blank\">Ver las opciones del plugin<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>SliderTabs es un plugin jQuery personalizable que te permite crear un slider de contenido que configurando sus opciones podemos conseguir un efecto con pesta\u00f1as bastante atractivo. Algunas de sus caracter\u00edsticas m\u00e1s destacadas F\u00e1cil de configurar y personalizar M\u00faltiples controles deslizantes Reproducci\u00f3n autom\u00e1tica Creaci\u00f3n ilimitada de pesta\u00f1as Soporte multi navegador Se adapta a todos los dispositivos [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5459,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[52,88],"class_list":["post-6585","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-sliders","tag-tabs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>jQuery SliderTabs - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery SliderTabs - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"SliderTabs es un plugin jQuery personalizable que te permite crear un slider de contenido que configurando sus opciones podemos conseguir un efecto con pesta\u00f1as bastante atractivo. Algunas de sus caracter\u00edsticas m\u00e1s destacadas F\u00e1cil de configurar y personalizar M\u00faltiples controles deslizantes Reproducci\u00f3n autom\u00e1tica Creaci\u00f3n ilimitada de pesta\u00f1as Soporte multi navegador Se adapta a todos los dispositivos [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/jquery-slidertabs\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2015-03-13T18:23:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"200\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/jquery-slidertabs\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/jquery-slidertabs\/\",\"name\":\"jQuery SliderTabs - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/jquery-slidertabs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/jquery-slidertabs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery1.png\",\"datePublished\":\"2015-03-13T18:23:04+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/jquery-slidertabs\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/jquery-slidertabs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/jquery-slidertabs\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery1.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery1.png\",\"width\":200,\"height\":200},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/jquery-slidertabs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"jQuery SliderTabs\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jQuery SliderTabs - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"jQuery SliderTabs - Jose Aguilar Blog","og_description":"SliderTabs es un plugin jQuery personalizable que te permite crear un slider de contenido que configurando sus opciones podemos conseguir un efecto con pesta\u00f1as bastante atractivo. Algunas de sus caracter\u00edsticas m\u00e1s destacadas F\u00e1cil de configurar y personalizar M\u00faltiples controles deslizantes Reproducci\u00f3n autom\u00e1tica Creaci\u00f3n ilimitada de pesta\u00f1as Soporte multi navegador Se adapta a todos los dispositivos [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/jquery-slidertabs\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2015-03-13T18:23:04+00:00","og_image":[{"width":200,"height":200,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery1.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/jquery-slidertabs\/","url":"https:\/\/www.jose-aguilar.com\/blog\/jquery-slidertabs\/","name":"jQuery SliderTabs - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/jquery-slidertabs\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/jquery-slidertabs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery1.png","datePublished":"2015-03-13T18:23:04+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/jquery-slidertabs\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/jquery-slidertabs\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/jquery-slidertabs\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery1.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery1.png","width":200,"height":200},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/jquery-slidertabs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"jQuery SliderTabs"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6585","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=6585"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/6585\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/5459"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=6585"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=6585"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=6585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}