{"id":17489,"date":"2025-05-28T22:05:21","date_gmt":"2025-05-28T22:05:21","guid":{"rendered":"https:\/\/kickoffadvertising.com\/?p=17489"},"modified":"2025-08-14T19:22:26","modified_gmt":"2025-08-14T19:22:26","slug":"create-wordpress-image-slider-without-plugin","status":"publish","type":"post","link":"https:\/\/kickoffadvertising.com\/es\/create-wordpress-image-slider-without-plugin\/","title":{"rendered":"C\u00f3mo Crear un Slider de im\u00e1genes en WordPress sin un plugin"},"content":{"rendered":"<p data-sourcepos=\"7:1-7:445\">\u00bfBuscas darle un toque especial a tu web WordPress con un slider din\u00e1mico de im\u00e1genes o contenido? Quiz\u00e1s quieres mostrar testimonios, productos destacados o un portafolio sin ralentizar tu sitio con otro plugin. \u00a1Est\u00e1s en el lugar correcto! En este art\u00edculo, te guiaremos por un m\u00e9todo simple y eficaz para <strong>crear un slider de im\u00e1genes en WordPress sin un plugin.<\/strong>\u00a1Di adi\u00f3s al c\u00f3digo inflado y hola a un carrusel ligero y de carga r\u00e1pida!<\/p>\n<p data-sourcepos=\"9:1-9:457\">En el mundo de WordPress, los plugins suelen ser la soluci\u00f3n m\u00e1s com\u00fan para a\u00f1adir funciones extra. Aunque muchos son fant\u00e1sticos, un exceso de ellos puede causar problemas de rendimiento, vulnerabilidades de seguridad e incluso conflictos con tu tema. Por eso, a veces, volver a lo b\u00e1sico y usar las funciones integradas de WordPress puede ser una estrategia m\u00e1s inteligente. Hoy, nos centraremos en crear un <strong>slider de im\u00e1genes b\u00e1sico pero funcional directamente en WordPress, sin un plugin.<\/strong>.<\/p>\n<hr data-sourcepos=\"11:1-11:5\" \/>\n<h2 data-sourcepos=\"13:1-13:44\">\u00bfPor qu\u00e9 evitar plugins de Slider adicionales a veces?<\/h2>\n<p data-sourcepos=\"15:1-15:134\">Antes de sumergirnos en el \"c\u00f3mo hacerlo\", veamos r\u00e1pidamente por qu\u00e9 querr\u00edas evitar plugins de slider dedicados en ciertas situaciones:<\/p>\n<ul data-sourcepos=\"17:3-22:0\">\n<li data-sourcepos=\"17:3-17:266\"><strong>Rendimiento:<\/strong> Cada plugin a\u00f1ade c\u00f3digo extra a tu web. Demasiados, especialmente los plugins de slider pesados con muchas funciones que quiz\u00e1s ni uses, pueden ralentizar significativamente los tiempos de carga de tu p\u00e1gina. Una carga m\u00e1s r\u00e1pida es crucial para la experiencia de usuario y el SEO.<\/li>\n<li data-sourcepos=\"18:3-18:126\"><strong>Complejidad:<\/strong> Algunos plugins de slider vienen con una gran cantidad de ajustes y opciones, lo que puede ser abrumador para principiantes.<\/li>\n<li data-sourcepos=\"19:3-19:132\"><strong>Compatibilidad:<\/strong> Conflictos entre diferentes plugins o entre un plugin y tu tema pueden hacer que tu sitio web funcione mal.<\/li>\n<li data-sourcepos=\"20:3-20:108\"><strong>Mantenimiento:<\/strong> M\u00e1s plugins significan m\u00e1s actualizaciones que gestionar, aumentando el potencial de fallos.<\/li>\n<li data-sourcepos=\"21:3-22:0\"><strong>Simplicidad:<\/strong> Para necesidades b\u00e1sicas de slider, una soluci\u00f3n ligera basada en c\u00f3digo para <strong>crear un slider de im\u00e1genes en WordPress sin un plugin.<\/strong> podr\u00eda ser todo lo que necesitas, sin el \"equipaje\" extra de un plugin completo.<\/li>\n<\/ul>\n<hr data-sourcepos=\"23:1-23:5\" \/>\n<h2 data-sourcepos=\"25:1-25:55\">El m\u00e9todo simple: Usando el bloque de galer\u00eda de WordPress<\/h2>\n<p data-sourcepos=\"27:1-27:192\">WordPress tiene un bloque de \"Galer\u00eda\" integrado que, con un peque\u00f1o ajuste, puede funcionar como un carrusel de im\u00e1genes b\u00e1sico. Este m\u00e9todo es sorprendentemente efectivo para sliders de im\u00e1genes sencillos. As\u00ed es como se hace:<\/p>\n<h3 data-sourcepos=\"29:1-29:63\">Paso 1: Sube Tus Im\u00e1genes a la Biblioteca de Medios (2 minutos)<\/h3>\n<p data-sourcepos=\"31:1-31:162\">Primero, aseg\u00farate de que todas las im\u00e1genes que quieres incluir en tu slider est\u00e9n subidas a tu Biblioteca de Medios de WordPress. Ve a <strong>Medios &gt; A\u00f1adir nuevo<\/strong> y sube tus archivos.<\/p>\n<h3 data-sourcepos=\"33:1-33:47\">Paso 2: Inserta el Bloque de Galer\u00eda (1 minuto)<\/h3>\n<ol data-sourcepos=\"35:1-37:0\">\n<li data-sourcepos=\"35:1-35:73\">Ve a la entrada o p\u00e1gina de WordPress donde quieras incrustar tu slider.<\/li>\n<li data-sourcepos=\"36:1-37:0\">Haz clic en el icono <strong>&#8220;+&#8221;<\/strong> para a\u00f1adir un nuevo bloque y busca <strong>&#8220;Gallery.&#8221;<\/strong> Selecciona el bloque de Galer\u00eda.<\/li>\n<\/ol>\n<h3 data-sourcepos=\"38:1-38:57\">Paso 3: Selecciona Tus Im\u00e1genes para la Galer\u00eda (1 minuto)<\/h3>\n<p data-sourcepos=\"40:1-40:317\">Una vez insertado el bloque de Galer\u00eda, se te pedir\u00e1 que subas nuevas im\u00e1genes o que selecciones las existentes de tu Biblioteca de Medios. Elige las im\u00e1genes que quieres en tu slider y haz clic en <strong>\"Crear una nueva galer\u00eda\".<\/strong> Luego, puedes reorganizar el orden de las im\u00e1genes arrastr\u00e1ndolas y solt\u00e1ndolas. Haz clic en <strong>\"Insertar galer\u00eda\".<\/strong><\/p>\n<h3 data-sourcepos=\"42:1-42:53\">Paso 4: Personaliza la Configuraci\u00f3n de la Galer\u00eda (1 minuto)<\/h3>\n<p data-sourcepos=\"44:1-44:92\">En la configuraci\u00f3n del bloque de Galer\u00eda (normalmente en la barra lateral derecha), encontrar\u00e1s opciones como:<\/p>\n<ul data-sourcepos=\"46:3-49:0\">\n<li data-sourcepos=\"46:3-46:69\"><strong>Columnas:<\/strong> Establece esto en \"1\" para mostrar solo una imagen a la vez.<\/li>\n<li data-sourcepos=\"47:3-47:188\"><strong>Recortar im\u00e1genes:<\/strong> Decide si quieres que WordPress recorte autom\u00e1ticamente tus im\u00e1genes a un tama\u00f1o uniforme. Desmarcar esta opci\u00f3n suele ser mejor para mantener la relaci\u00f3n de aspecto original de tus im\u00e1genes.<\/li>\n<li data-sourcepos=\"48:3-49:0\"><strong>Enlazar a:<\/strong> Puedes elegir enlazar las im\u00e1genes a la p\u00e1gina de adjuntos, al archivo multimedia o no enlazarlas en absoluto. Para un slider simple, \"Ninguno\" suele ser la mejor opci\u00f3n.<\/li>\n<\/ul>\n<h3 data-sourcepos=\"50:1-50:61\">Paso 5: A\u00f1ade CSS Personalizado para el Efecto Deslizante (3 minutos)<\/h3>\n<p data-sourcepos=\"52:1-52:107\">Aqu\u00ed es donde ocurre la magia. Usaremos un peque\u00f1o fragmento de CSS para que la galer\u00eda se comporte como un slider.<\/p>\n<ol data-sourcepos=\"54:1-83:0\">\n<li data-sourcepos=\"54:1-55:0\">\n<p data-sourcepos=\"54:5-54:178\"><strong>A\u00f1ade una Clase CSS a Tu Bloque de Galer\u00eda:<\/strong> En la configuraci\u00f3n \"Avanzado\" de la barra lateral derecha, a\u00f1ade una clase CSS personalizada. Llam\u00e9mosla <code>simple-carousel<\/code>.<\/p>\n<\/li>\n<li data-sourcepos=\"56:1-83:0\">\n<p data-sourcepos=\"56:5-56:65\"><strong>A\u00f1ade el CSS Personalizado a Tu Tema o al Personalizador de WordPress:<\/strong><\/p>\n<ul data-sourcepos=\"58:7-83:0\">\n<li data-sourcepos=\"58:7-81:0\">\n<p data-sourcepos=\"58:9-58:175\"><strong>Opci\u00f3n 1 (Recomendada para Temas Hijo):<\/strong> Si usas un tema hijo (\u00a1y deber\u00edas!), puedes a\u00f1adir el siguiente CSS al archivo <code>style.css<\/code> de tu tema hijo:<\/p>\n<div class=\"code-block ng-tns-c2780030781-131 ng-trigger ng-trigger-codeBlockRevealAnimation\">\n<div class=\"code-block-decoration header-formatted gds-title-s ng-tns-c2780030781-131 ng-star-inserted\">\n<p><span class=\"ng-tns-c2780030781-131\">CSS<\/span><\/p>\n<div class=\"buttons ng-tns-c2780030781-131 ng-star-inserted\"><\/div>\n<\/div>\n<div class=\"formatted-code-block-internal-container ng-tns-c2780030781-131\">\n<div class=\"animated-opacity ng-tns-c2780030781-131\">\n<pre class=\"ng-tns-c2780030781-131\"><code class=\"code-container formatted ng-tns-c2780030781-131\" role=\"text\" data-test-id=\"code-content\" data-sourcepos=\"60:9-80:9\"><span class=\"hljs-selector-class\">.simple-carousel<\/span> {\r\n    <span class=\"hljs-attribute\">display<\/span>: flex;\r\n    <span class=\"hljs-attribute\">overflow-x<\/span>: auto;\r\n    scroll-snap-type: x mandatory;\r\n    -webkit-<span class=\"hljs-attribute\">overflow<\/span>-scrolling: touch; <span class=\"hljs-comment\">\/* For smooth scrolling on iOS *\/<\/span>\r\n}\r\n\r\n<span class=\"hljs-selector-class\">.simple-carousel<\/span> <span class=\"hljs-selector-tag\">figure<\/span> {\r\n    scroll-snap-align: start;\r\n    <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">0<\/span>; <span class=\"hljs-comment\">\/* Remove default figure margins *\/<\/span>\r\n    <span class=\"hljs-attribute\">margin-right<\/span>: <span class=\"hljs-number\">10px<\/span>; <span class=\"hljs-comment\">\/* Add some spacing between images if desired *\/<\/span>\r\n    <span class=\"hljs-attribute\">flex<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span> auto; <span class=\"hljs-comment\">\/* Prevent images from shrinking or growing unexpectedly *\/<\/span>\r\n}\r\n\r\n<span class=\"hljs-selector-class\">.simple-carousel<\/span> <span class=\"hljs-selector-tag\">img<\/span> {\r\n    <span class=\"hljs-attribute\">display<\/span>: block; <span class=\"hljs-comment\">\/* Remove extra space below images *\/<\/span>\r\n    <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">100%<\/span>; <span class=\"hljs-comment\">\/* Ensure images don't overflow their container *\/<\/span>\r\n    <span class=\"hljs-attribute\">height<\/span>: auto;\r\n}\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/li>\n<li data-sourcepos=\"82:7-83:0\">\n<p data-sourcepos=\"82:9-82:229\"><strong>Opci\u00f3n 2 (Personalizador de WordPress):<\/strong> Si no tienes un tema hijo o quieres una soluci\u00f3n r\u00e1pida, puedes a\u00f1adir el CSS en el Personalizador de WordPress. Ve a <strong>Apariencia &gt; Personalizar &gt; CSS Adicional<\/strong> y pega el c\u00f3digo ah\u00ed.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3 data-sourcepos=\"84:1-84:42\">Paso 6: Previsualiza y Ajusta (2 minutos)<\/h3>\n<p data-sourcepos=\"86:1-86:321\">Guarda tu entrada o p\u00e1gina y previsual\u00edzala. Deber\u00edas ver tus im\u00e1genes dispuestas horizontalmente, y podr\u00e1s desplazarte por ellas. En dispositivos t\u00e1ctiles, el desplazamiento deber\u00eda ser suave. Ajusta el CSS (por ejemplo, el valor de <code>margin-right<\/code> ) a tu gusto. Este es tu eficaz <strong>slider de im\u00e1genes en WordPress sin un plugin<\/strong>.<\/p>\n<hr data-sourcepos=\"88:1-88:5\" \/>\n<h2 data-sourcepos=\"90:1-90:34\">Mejoras y Consideraciones<\/h2>\n<p data-sourcepos=\"92:1-92:131\">Este m\u00e9todo proporciona un carrusel de im\u00e1genes con desplazamiento horizontal b\u00e1sico. Aqu\u00ed hay algunas cosas a tener en cuenta y posibles mejoras:<\/p>\n<ul data-sourcepos=\"94:3-98:0\">\n<li data-sourcepos=\"94:3-94:132\"><strong>Subt\u00edtulos:<\/strong> Si a\u00f1adiste subt\u00edtulos a tus im\u00e1genes en la Biblioteca de Medios, se mostrar\u00e1n debajo de cada imagen en la galer\u00eda.<\/li>\n<li data-sourcepos=\"95:3-95:198\"><strong>Responsividad:<\/strong> El CSS que proporcionamos asegura que el slider sea desplazable horizontalmente en pantallas m\u00e1s peque\u00f1as. Aseg\u00farate de que tus im\u00e1genes tengan el tama\u00f1o adecuado para diferentes dispositivos para evitar problemas de dise\u00f1o.<\/li>\n<li data-sourcepos=\"96:3-96:361\"><strong>Reproducci\u00f3n Autom\u00e1tica y Flechas\/Puntos de Navegaci\u00f3n:<\/strong> Este m\u00e9todo b\u00e1sico no incluye reproducci\u00f3n autom\u00e1tica ni elementos de navegaci\u00f3n. Para funciones m\u00e1s avanzadas, normalmente necesitar\u00edas un plugin de slider dedicado o una codificaci\u00f3n personalizada m\u00e1s compleja con JavaScript. Sin embargo, para un <strong>slider de im\u00e1genes en WordPress sin un plugin<\/strong>simple y ligero, este enfoque solo con CSS suele ser suficiente.<\/li>\n<li data-sourcepos=\"97:3-98:0\"><strong>Sliders de Contenido:<\/strong> Este m\u00e9todo funciona mejor para im\u00e1genes. Para crear sliders con texto y otros elementos de contenido, podr\u00edas necesitar explorar otras opciones sin plugins que impliquen un uso m\u00e1s avanzado de los bloques de WordPress y, posiblemente, algo de JavaScript. Puedes aprender m\u00e1s sobre c\u00f3mo usar diferentes bloques de WordPress de forma efectiva en recursos como las <a class=\"ng-star-inserted\" href=\"https:\/\/www.google.com\/search?q=https:\/\/wordpress.org\/support\/article\/wordpress-block-editor\/\" target=\"_blank\" rel=\"noopener\">p\u00e1ginas de soporte de WordPress.org.<\/a>.<\/li>\n<\/ul>\n<hr data-sourcepos=\"99:1-99:5\" \/>\n<h2 data-sourcepos=\"101:1-101:47\">Optimizaci\u00f3n SEO para tu slider sin plugins<\/h2>\n<p data-sourcepos=\"103:1-103:95\">Incluso sin un plugin de slider dedicado, puedes optimizar tu contenido para los motores de b\u00fasqueda:<\/p>\n<ul data-sourcepos=\"105:3-108:0\">\n<li data-sourcepos=\"105:3-105:375\"><strong>Optimizaci\u00f3n de Im\u00e1genes:<\/strong> Aseg\u00farate de que tus im\u00e1genes est\u00e9n correctamente optimizadas para la web (formato de archivo correcto, tama\u00f1o comprimido) antes de subirlas a la Biblioteca de Medios. Usa nombres de archivo descriptivos y a\u00f1ade <strong>texto alternativo (alt text)<\/strong> relevante a cada imagen. Para este art\u00edculo, el alt text de tu imagen principal deber\u00eda ser<strong>\"WordPress image slider without plugin\".<\/strong>Esto es crucial para SEO y accesibilidad.<\/li>\n<li data-sourcepos=\"106:3-106:401\"><strong>Palabras Clave Relevantes:<\/strong> Aunque el slider en s\u00ed mismo no contenga mucho texto, aseg\u00farate de que el contenido circundante en tu p\u00e1gina o entrada est\u00e9 bien optimizado con palabras clave relevantes como<strong>\"WordPress image slider without plugin\".<\/strong>,&#8221; &#8220;<strong>create WordPress carousel no plugin<\/strong>,\u201d y \u201c<strong>embed slider WordPress built-in<\/strong>Nos hemos esforzado espec\u00edficamente para que la palabra clave principal aparezca de forma natural en todo el texto.<\/li>\n<li data-sourcepos=\"107:3-108:0\"><strong>Velocidad de Carga de la P\u00e1gina:<\/strong> Al evitar plugins voluminosos, ya est\u00e1s contribuyendo a tiempos de carga de p\u00e1gina m\u00e1s r\u00e1pidos, lo cual es un factor de ranking significativo para Google. Puedes mejorar a\u00fan m\u00e1s la velocidad usando un tema ligero y optimizando tu instalaci\u00f3n general de WordPress. Para m\u00e1s consejos sobre el rendimiento de WordPress, considera revisar recursos como el <a class=\"ng-star-inserted\" href=\"https:\/\/wp-rocket.me\/blog\/\" target=\"_blank\" rel=\"noopener\">blog de WP Rocket.<\/a>.<\/li>\n<\/ul>\n<hr data-sourcepos=\"109:1-109:5\" \/>\n<h2 data-sourcepos=\"111:1-111:13\">Conclusion<\/h2>\n<p data-sourcepos=\"113:1-113:402\">No siempre necesitas una gran cantidad de plugins para lograr elementos visualmente atractivos y funcionales en tu sitio web WordPress. Al aprovechar el bloque de Galer\u00eda integrado y un toque de CSS personalizado, puedes <strong>insertar f\u00e1cilmente un slider de im\u00e1genes en WordPress sin un plugin.<\/strong>Este m\u00e9todo es ligero, r\u00e1pido y perfecto para carruseles de im\u00e1genes sencillos. \u00a1Pru\u00e9balo y disfruta de un sitio WordPress m\u00e1s limpio y eficiente!<\/p>\n<p data-sourcepos=\"115:1-115:204\">For more tips and tricks on optimizing your WordPress website without relying heavily on plugins, be sure to explore our other articles on the <a class=\"\" href=\"https:\/\/kickoffadvertising.com\/es\/landing-seo-state\/seo-agency-miami\/\" target=\"_new\" rel=\"noopener\" data-start=\"219\" data-end=\"308\">SEO agency in Miami<\/a> Kickoff Advertising Blog.<\/p>\n<p data-sourcepos=\"115:1-115:204\"><span data-sheets-root=\"1\">Looking to enhance your website\u2019s visual appeal without slowing it down? Building a WordPress picture slider manually is the smart way to boost engagement while keeping performance optimized. By creating an image slider in WordPress without plugin, you avoid bloated code and gain full control over the design\u2014resulting in faster load times and a better user experience. At Kickoff Advertising, we specialize in clean, custom-coded solutions that convert. Ready to level up your site\u2019s visuals without compromising speed? Partner with our expert <a class=\"in-cell-link\" href=\"https:\/\/kickoffadvertising.com\/es\/web-design\/\" target=\"_blank\" rel=\"noopener\">web design service<\/a> and turn your website into a high-performing sales tool.<\/span><\/p>\n<p data-sourcepos=\"115:1-115:204\"><span data-sheets-root=\"1\">Looking to enhance your website\u2019s visual appeal without slowing it down? Building a WordPress picture slider manually is the smart way to boost engagement while keeping performance optimized. By creating an image slider in WordPress without plugin, you avoid bloated code and gain full control over the design resulting in faster load times and a better user experience. At Kickoff Advertising, we specialize in clean, custom-coded solutions that convert. Ready to level up your site\u2019s visuals without compromising speed? Partner with our expert <a class=\"in-cell-link\" href=\"https:\/\/kickoffadvertising.com\/es\/web-design\/\" target=\"_blank\" rel=\"noopener\">web design service<\/a> and turn your website into a high-performing sales tool.\u00a0<\/span><\/p>","protected":false},"excerpt":{"rendered":"<p>Looking to spice up your WordPress site with a dynamic image or content slider? Maybe you want to showcase testimonials, featured products, or a portfolio without slowing down your site with yet another plugin. You&#8217;re in the right place! In this article, we&#8217;ll walk you through a simple and effective method to create a WordPress image slider without a plugin. Say goodbye to bloated code and hello to a lightweight, fast-loading carousel! In the world of WordPress, plugins are often the go-to solution for adding extra functionality. While many are fantastic, too many can lead to performance issues, security vulnerabilities, and even conflicts with your theme. That&#8217;s why sometimes, going back to basics and utilizing the built-in features of WordPress can be a smarter approach. Today, we&#8217;re focusing on creating a basic yet functional image slider directly in WordPress without a plugin. Why Avoid Extra Slider Plugins Sometimes? Before we dive into the &#8220;how-to,&#8221; let&#8217;s quickly touch upon why you might want to avoid dedicated slider plugins in certain situations: Performance: Every plugin adds extra code to your website. Too many, especially heavy slider plugins with lots of features you might not even use, can significantly slow down your page load times. Faster loading times are crucial for user experience and SEO. Complexity: Some slider plugins come with a plethora of settings and options, which can be overwhelming for beginners. Compatibility: Conflicts between different plugins or between a plugin and your theme can cause your website to malfunction. Maintenance: More plugins mean more updates to manage, increasing the potential for things to break. Simplicity: For basic slider needs, a lightweight, code-based solution to create a WordPress image slider without a plugin might be all you need without the extra baggage of a full-fledged plugin. The Simple Method: Using the WordPress Gallery Block WordPress has a built-in &#8220;Gallery&#8221; block that, with a little tweak, can function as a basic image carousel. This method is surprisingly effective for simple image sliders. Here&#8217;s how to do it: Step 1: Upload Your Images to the Media Library (2 minutes) First, make sure all the images you want to include in your slider are uploaded to your WordPress Media Library. Go to Media &gt; Add New and upload your files. Step 2: Insert the Gallery Block (1 minute) Go to the WordPress post or page where you want to embed your slider. Click the &#8220;+&#8221; icon to add a new block and search for &#8220;Gallery.&#8221; Select the Gallery block. Step 3: Select Your Images for the Gallery (1 minute) Once the Gallery block is inserted, you&#8217;ll be prompted to either upload new images or select existing ones from your Media Library. Choose the images you want in your slider and click &#8220;Create a new gallery.&#8221; You can then rearrange the order of the images by dragging and dropping them. Click &#8220;Insert gallery.&#8221; Step 4: Customize the Gallery Settings (1 minute) In the Gallery block settings (usually in the right-hand sidebar), you&#8217;ll find options like: Columns: Set this to &#8220;1&#8221; to display only one image at a time. Crop images: Decide if you want WordPress to automatically crop your images to a uniform size. Unchecking this is often better to maintain the original aspect ratio of your images. Link to: You can choose to link the images to the attachment page, media file, or not link them at all. For a simple slider, &#8220;None&#8221; is usually the best option. Step 5: Add Custom CSS for the Sliding Effect (3 minutes) This is where the magic happens. We&#8217;ll use a small snippet of CSS to make the gallery behave like a slider. Add a CSS Class to Your Gallery Block: Select the Gallery block. In the &#8220;Advanced&#8221; settings in the right sidebar, add a custom CSS class. Let&#8217;s call it simple-carousel. Add the Custom CSS to Your Theme or WordPress Customizer: Option 1 (Recommended for Child Themes): If you&#8217;re using a child theme (and you should be!), you can add the following CSS to your child theme&#8217;s style.css file: CSS .simple-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; \/* For smooth scrolling on iOS *\/ } .simple-carousel figure { scroll-snap-align: start; margin: 0; \/* Remove default figure margins *\/ margin-right: 10px; \/* Add some spacing between images if desired *\/ flex: 0 0 auto; \/* Prevent images from shrinking or growing unexpectedly *\/ } .simple-carousel img { display: block; \/* Remove extra space below images *\/ max-width: 100%; \/* Ensure images don&#8217;t overflow their container *\/ height: auto; } Option 2 (WordPress Customizer): If you don&#8217;t have a child theme or want a quick solution, you can add the CSS in the WordPress Customizer. Go to Appearance &gt; Customize &gt; Additional CSS and paste the code there. Step 6: Preview and Adjust (2 minutes) Save your post or page and preview it. You should now see your images arranged horizontally, and you should be able to scroll through them. On touch devices, the scrolling should be smooth. Adjust the CSS (e.g., the margin-right value) to your liking. This is your effective WordPress image slider without a plugin. Enhancements and Considerations This method provides a basic horizontal scrolling image carousel. Here are a few things to keep in mind and potential enhancements: Captions: If you added captions to your images in the Media Library, they will be displayed below each image in the gallery. Responsiveness: The CSS we provided ensures the slider is horizontally scrollable on smaller screens. Ensure your images are appropriately sized for different devices to avoid layout issues. Autoplay and Navigation Arrows\/Dots: This basic method doesn&#8217;t include autoplay or navigation elements. For more advanced features, you would typically need a dedicated slider plugin or more complex custom coding with JavaScript. However, for a simple, lightweight WordPress image slider without a plugin, this CSS-only approach is often sufficient. Content Sliders: This method primarily works best for images. For creating sliders with text and other content elements, you might need to explore other<\/p>","protected":false},"author":7,"featured_media":17490,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","footnotes":""},"categories":[18,72],"tags":[],"class_list":["post-17489","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-marketing","category-web-design"],"acf":[],"_links":{"self":[{"href":"https:\/\/kickoffadvertising.com\/es\/wp-json\/wp\/v2\/posts\/17489","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kickoffadvertising.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kickoffadvertising.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kickoffadvertising.com\/es\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/kickoffadvertising.com\/es\/wp-json\/wp\/v2\/comments?post=17489"}],"version-history":[{"count":0,"href":"https:\/\/kickoffadvertising.com\/es\/wp-json\/wp\/v2\/posts\/17489\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kickoffadvertising.com\/es\/wp-json\/wp\/v2\/media\/17490"}],"wp:attachment":[{"href":"https:\/\/kickoffadvertising.com\/es\/wp-json\/wp\/v2\/media?parent=17489"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kickoffadvertising.com\/es\/wp-json\/wp\/v2\/categories?post=17489"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kickoffadvertising.com\/es\/wp-json\/wp\/v2\/tags?post=17489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}