Slider Animado con Efecto Suave para Blogger

Cómo Crear un Slider Animado con Efecto Suave en Blogger

En este tutorial aprenderás a construir un slider animado moderno y fluido utilizando HTML, CSS y JavaScript. Este diseño te permitirá mostrar imágenes, productos o recursos destacados con un efecto de movimiento suave e infinito, totalmente adaptable a dispositivos móviles y pantallas grandes. Es una excelente forma de agregar dinamismo y profesionalismo a tu blog, sin depender de plugins externos.

Ventajas de este diseño

A diferencia de otros sliders tradicionales, este proyecto está optimizado para cargar rápido y mantener un desplazamiento continuo, ideal para la experiencia de usuario. Además, su estructura modular te permitirá personalizar fácilmente la cantidad de imágenes, la velocidad del desplazamiento y los efectos visuales sin romper el diseño principal.

Estructura del proyecto

El slider está compuesto por tres bloques principales: el HTML define la estructura base, el CSS crea las animaciones y estilos, y el JavaScript controla la interacción y movimiento automático. Con este enfoque, podrás integrar el slider en cualquier plantilla de Blogger o página externa sin errores.

💡 Consejo SEO: Usa nombres de archivo descriptivos en tus imágenes (por ejemplo: slider-efecto-suave-blogger.jpg) y completa los atributos alt con palabras clave relevantes. Esto ayuda a que tus recursos aparezcan en Google Imágenes y mejoren el tráfico orgánico de tu blog.

HTML

<div class="shop-wrapper">

 <!-- Fila 1 -->
  <div class="shop-carousel top">
    <div class="shop-track">
      <div class="shop-item"><img alt='Recursos' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimU4KZHboMqeJGJF8pLIPLaMsCy_dq_IlWymCicx6zxUCdyWmFB71UWrYP4NrMu-HK3GCFuvmvOjH7_tnPCQZWV7MAFajAjVw4kMKZG3jwnteSgi9FJna_ZJDWoD4KbNK_EHJHJYKwHY7KuI5lZYg3gG3UoAOefKt30BWxlhiMIxw8E_zkjQiD1Xrhoomz/s1600/01-01.jpg" alt="" /></div>
      <div class="shop-item"><img alt='Recursos' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnoZY8WlXk_478GRLjVaWmzZXDn56cZzEw5bMZhknfJJP_BsskFvlfwl8nqWDPfTugJ_yZsBHEPolY6RPabhGawd6AFqoEihgdcHYUq1P_zOGsHKuTfy-QKUhP1E3vwA0YrmyuTAkXJr1G1opgtsQ5YDAmYY92n3FS-MbtR6mCapciDfSOa97jJHXgBf2F/s1600/01-02.jpg" alt="" /></div>
      <div class="shop-item"><img alt='Recursos' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBObUBnkHkvkQgI4vKBWWwwacI7nTntCoSyN2ed9iOSrwTP_HsCYJ2IufJYYGaFCxPjgd9j7Nevs97_GTq0ogXwYZfPxmEIezOs3PMlRO81QHiOeD7f1ShgXqgT-a79d1beyKN2KMaLUPt9F7J5153nNK3Ac6gqg5fvg6vxNjzrsr1hk6UXoc9KMCdi6ul/s1600/01-03.jpg" alt="" /></div>
      <div class="shop-item"><img alt='Recursos' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVX1ASAqkHNP-pN-8tMkd5rtFWXoBioSwzRnCW0u675CGc1FtHgKhxoCa3a6N1a3n4mIQi67JwQYsW2IhxXZyBrSIvtrQXPGh4qDLzYXFM1sN5NopTv2Aap7wjFHtIEE4iqSKvIWuVcXndHLmIZQLRZvVSsvvyLMt7rtrfeath-ZkGbV9kaQo8U9MZ-X1j/s1600/01-04.png" alt="" /></div>
      <div class="shop-item"><img alt='Recursos' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVrPnpFwhzNcaXs38C_139RtDadXL4XaSnAZCngKFIHykwAm8-mhMNrF0heDk7yqHscYqwiMjAQ4qsHiX026_uNnPYJZQ_GfVntysfYrCEQANmZ_nwRzCWhaGdEfMLcxcmxdyYdYshPC9dOiQjo-gjNx1rjEdaa0zoUccXK9LlMd0uOHl0nHi3rNbscciZ/s1600/01-05.jpg" alt="" /></div>
    </div>
  </div>

  <!-- Fila 2 -->
  <div class="shop-carousel middle">
    <div class="shop-track">
      <div class="shop-item"><img alt='Recursos' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDr9gBQzJunWfKOcRQtSfH1VNEoJWG0pwmb740opy7F4EjeV92fXioyf2Z1ftATPRrWEo2PtDhyphenhyphen0heveM8JM22ThOUDsMHSdVbdnQdDQGONNIn_b73EAv_T66zKXKWaQOvUap2-57rzySfiiF9ZaiwK7pQExme9MmRLeKBc2oIiGn-v4QYxWIE-DjRX8sv/s1600/01.jpg" alt="" /></div>
      <div class="shop-item"><img alt='Recursos' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBilJk0PCCXKea2Aburx7BkW94yF6dflTppw75uDLn-Vp6iGi8FKOpAAi8k-aEdHHYHiaSUFy1HhIAkR6pZlZLM3vPnw2lFamsHd-GmamzQmMuRw_Kk78pylY-m3IEfpk_JUhYnmF3VuBa-mdVmXp9x6du34Wif0klnnRdlFLFNspLJNlqWOycRVEhNaba/s1600/02.jpg" alt="" /></div>
      <div class="shop-item"><img alt='Recursos' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjhnX0byqyYK8T_eVek4x3hj5U9Yr2Ebz73pznOYngZHn5uHtBsFhIstZ6CNVr6XEeSWrlAVYYERw9FaQCMX_Au7i_8929Ss1NzgvIDSelqClhCpCZmm3cNM5ppy6PBKiipK1bTYhuAZxSwIhZixg14zcI3e748j-ekkBAGvIdm29U91E3b1dKJ2xLFEBy/s1600/03.jpg" alt="" /></div>
      <div class="shop-item"><img alt='Recursos' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQmmZaiDyIsvkRcMI_ZhpirhmFbyH2jZxnQZ0Ky7azDxpMmmOXVIJoovkOOsDlnVzEODnZ2WBNu20x9GeK_KWO8xUhX5MMdJ2lVM3bcpN33YkdsBP_EOdcPXRcON8ot1d-D8Y5-IDP7sAG_onD2aJuQDOrDnk537QbkSrVnFlvF6gmisUszMK44SEnRWxQ/s1600/04.jpg" alt="" /></div>
      <div class="shop-item"><img alt='Recursos' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqyW0W0xvK50DCFDeZJltUH-S6Yg8Eq4P3FFqCiq3mA7NS50sWQbl3RLoiJ2RdtT1ipJaDsmN_vp2G1dFku8YoEm23xqmSu69OQJnzA9q_E8t0wCvKTpXE7BgkAQNQNHlCnLHmMTTnMgulrW6pXsHSEXnfPelBUmvbRIgdjcUdna9-z92B3naBGgkhXsDt/s1600/05.jpg" alt="" /></div>
    </div>
  </div>

<!-- Fila 3 -->
  <div class="shop-carousel bottom">
    <div class="shop-track">
      <div class="shop-item"><img alt='Recursos' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZAE7nCPi4UeIbTl8OjkPQlhO72CbOMoV8ga-hIh_Wp2kGDWcpYFb2orxSG_GpfojiIUInODQHzIspOtPzDc-O7ecSylsf2Q7lYfmVuE2Dq0gdaNNmmdpgYsbTklkRrDAKP-7zIx40zQfJgpI17ZXsM_QgGq3SsrOSSrdMAiUS0KWrYH6RSZOypyiToEjs/s1600/01.jpg" alt="" /></div>
      <div class="shop-item"><img alt='Recursos' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyaM23BwHs9NBxNXL7BlHhnxcC94GdzxE5jDRqf8tNynaVsNCBhsZoGE-QD58duDUzxU_TM6NxVHZFmeB-jD_aad6D6-5ZXtBACCaVsAsch-FAlQ4BWk3C-4hCoP5dC049S50Mi1ESwjUzPglaaIFqbbTgAcW0ZPLDho6augj1byJWq1hEK6oCsAi1w6TX/s1600/02.jpg" alt="" /></div>
      <div class="shop-item"><img alt='Recursos' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLqJysxOzHJNsbd0-39ydiBDjgdEPZ987U2Zigcb1oU7yG73luWSbpucv7V_VKoc1GiFGzO6TlmmmNKGyANQBV_-hODKBSHFkDGoM59BmywRcyS8hrJWuzyKSi1TU5xWRBEz1GW6BZgTnYttrQfSRbuyNPfzPs46hHxzgH5MquJDu8RKFxV9zM1YnICyDS/s1600/03.jpg"" /></div>
      <div class="shop-item"><img alt='Recursos' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN5lb48Q1WVPY0_1LQp5AlOvB_NUC6-giG6HN449Hco70vX-p5UMdlqyM5td-SlNe0lsZHRRuEO6vS1zaWMBeU_sDp8nkE7rjmJgGZnum0Ev9ZQWi9L2Xh0qlo8jE61jxj9UVD88ej8etqsS-IM60Ihx6j1t-zZpq_eQyW8FFnCAJLe678s4uxzGCAUl7D/s1600/04.jpg" alt="" /></div>
      <div class="shop-item"><img alt='Recursos' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYR72PBMmhINsFbs_z7mHCxu910zojnTRSyvH5XkCxmLAbRC2ARlxyU7eof6u_LA6yrxyxwipIjdju0K986e_VTKj_2yaUPM589Qya_0eowgSd_Gqoj8L1XgWxmWqG0JOjB0krsR5fjum_iYw5QOO1q-SPnW8qNMLxlThbH6GzPv_-DZFl-iOP_gTUbAmL/s1600/05.jpg" alt="" /></div>
    </div>
  </div>

  <div class="shop-center">
    <div class="shop-glow-large"></div>
    <input type="text" placeholder="Buscar..." class="shop-search" />
  </div>
</div>
  

CSS

.shop-glow-large{position:absolute;top:50%;left:50%;width:622px;height:250px;background:radial-gradient(circle at center,rgba(255,255,255,1) 55%,rgba(255,255,255,0) 100%);filter:blur(22px);border-radius:50%;transform:translate(-50%,-50%);z-index:0;}
.shop-wrapper{position:relative;overflow:hidden;width:100%;height:600px;}
/* Carruseles */
.shop-carousel{position:absolute;display:flex;width:400%;overflow:hidden;z-index:1;}
.shop-carousel.top{top:3%;transform:translateX(-8%);}
.shop-carousel.middle{top:34%;}
.shop-carousel.bottom{top:65%;transform:translateX(-14%);}
/* Imágenes */
.shop-track{display:flex;gap:25px;}
.shop-item img{width:340px;height:170px;border-radius:24px;object-fit:cover;}
/* Animaciones infinitas suaves */
@keyframes scrollLeft{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
@keyframes scrollRight{0%{transform:translateX(-50%);}100%{transform:translateX(0);}}
.shop-carousel.top .shop-track{animation:scrollRight 225s linear infinite;}
.shop-carousel.middle .shop-track{animation:scrollLeft 205s linear infinite;}
.shop-carousel.bottom .shop-track{animation:scrollRight 175s linear infinite;}
/* Centro */
.shop-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:2;}
.shop-center h1{position:relative;font-size:80px;font-weight:800;color:#b00058;margin-bottom:25px;}
.shop-search{padding:16px 26px;border-radius:35px;border:1px solid #ccc;font-size:18px;outline:none;width:460px;background:rgba(255,255,255,0.7);backdrop-filter:blur(8px);box-shadow:0 2px 8px rgba(0,0,0,0.08);transition:0.3s;}
.shop-search:focus{border-color:#000;}
@media screen and (max-width:768px){.shop-glow-large{width:455px;height:400px;filter:blur(40px);}.shop-search{width:326px;}.shop-item img{border-radius:11px;}.shop-wrapper{height:86vh;}.shop-center{top:45%;left:50%;}.shop-carousel.top .shop-track{animation:scrollRight 145s linear infinite;}.shop-carousel.middle .shop-track{animation:scrollLeft 125s linear infinite;}.shop-carousel.bottom .shop-track{animation:scrollRight 105s linear infinite;}}
  

SCRIPT

document.querySelectorAll('.shop-track').forEach(track => {
  track.innerHTML += track.innerHTML + track.innerHTML;
});
  

Descargar Proyecto

Obtén el archivo index.html listo para ver el demo en tu PC o celular.