Coming back again, I’ll share a guide on a mini slider that supports both videos and images. This slider functions like a standard slider but is much lighter, using only minimal jQuery.
This slider is lightweight because it relies solely on left/right button clicks and scroll-based navigation. That’s why it includes a scroll bar at the bottom, making it easy for users to navigate either by clicking buttons or scrolling.
Despite its lightweight design, it remains user-friendly on responsive layouts—users can swipe left/right without needing arrow buttons. It also supports multiple image orientations (landscape or portrait) without issues
Need to combine videos and images in a single slider? No problem! Everything works smoothly on this mini slider. (By the way, the videos and images in this article aren't advertisements - they're just examples.)
Please note: You should at least be familiar with opening and closing tags in HTML, and try to avoid copying text directly from Microsoft Word or other websites.
Please follow these instructions to install the Mini Slider on your blog post:
1- Go to Blogger → Theme → Edit HTML
2- Place the following CSS code above the ]]></b:skin> tag
/* CSS Blanter Mini Slider */
.slide-wrap{margin:30px 0;overflow:hidden;position:relative}
.slide-wrap ul li a img{height:309px;width:100%}
.blanter-wrap{overflow:hidden;overflow-x:scroll;position:relative;width:100%;height:330px}
.slide-wrap ul{position:absolute;list-style:none;padding:0;margin:0}
.slide-wrap li{white-space:nowrap;list-style:none;padding:0;margin:0}
.slide-wrap iframe{width:100%;height:87%;background:#000}
.slide-wrap ul li a{cursor:auto;padding-right:0!important;margin-right:5px;display:inline-block;vertical-align:middle;position:relative;max-width:550px;height:355px;background-position:center;background-repeat:no-repeat;background-size:cover;-moz-background-size:cover;-webkit-background-size:cover}
.slide-wrap ul li a.youtube-iframe{width:550px}
.slide-wrap ul li a:last-child{margin-right:0}
a.right-b{right:0}
a.left-b svg,a.right-b svg{width:15px;margin:10px 0 0}
a.left-b,a.right-b{position:absolute;top:35%;width:40px;line-height:50px;height:50px;text-align:center;color:#fff;background:#000;opacity:.7;transition:all 0 ease-in-out}
a.left-b:hover,a.right-b:hover{opacity:1}
.blanter-wrap::-webkit-scrollbar{width:8px;height:8px;border-radius:10px}
.blanter-wrap::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);border-radius:10px}
.blanter-wrap::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}
.blanter-wrap::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(0,0,0,.4);transition:all 400ms ease-in-out;border-radius:10px}
Code JavaScript
<script type='text/javascript'>
//<![CDATA[
// Scroll
$('a.right-b').click(function() {
$('.blanter-wrap').animate({
scrollLeft: "+=500px"
}, "normal");
});
$('a.left-b').click(function() {
$('.blanter-wrap').animate({
scrollLeft: "-=500px"
}, "normal");
});
//]]>
</script>
4. Save your Theme (Template).
5. Then go to Edit Post >> HTML mode >> insert the following code where you want it to appear.
Code HTML
<div class="slide-wrap"> <div class="blanter-wrap"> <ul> <li> <a class="youtube-iframe" href="javascript:void(0)"> <iframe allow="autoplay; encrypted-media" allowfullscreen="false" frameborder="0" src="https://www.youtube.com/embed/03qDL0Xp2Lw?rel=0&showinfo=1"></iframe> </a> <a href="javascript:void(0)"> <img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivR4czQPTKryhPWIjG6j_z4Kmw20atWHnira8uEahX__wkO5zEbZWxPS9656edgXJkF8QRVxNRomDcKgBqP14GM2wD2anE_wrLkWmsQ-q2AvWhg7JQ3tRGuAQs7nSjfaVx_sFw23W4OT0/s1600/RoC.jpg" title="Judul Gambar" /> </a> <a href="javascript:void(0)"> <img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI3pZCkL9_aOJICM23grc8WbVo6bL_VnwNi98wY2XtyVPQgzmTfl5vHOHw8Tdj7X-MhstBonsSm7aOnWGGwJHUexKWsSeLAlK8g65AbZHP8qT-RHR9dc8DyKQK8iQ9oevK5SFExWl8GiY/s1600/RoC2.jpg" title="Judul Gambar" /> </a> <a href="javascript:void(0)"> <img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic1ZnAIberYxu4ITquzpI17Klw_AxrNtrCzgeWNy-j3HBE-B8zXCfMRjN-LTEVhDb44FseOQqCuMYOa1WfAkWFMyaGAWR2enDdhA6baqHOjC3QhT7FGJ4-ERoKwMPifBawqw9J0aYxh_o/s1600/RoC3.jpg" title="Judul Gambar" /> </a> <a href="javascript:void(0)"> <img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEBfo_CfK3PgQeSzxVOFJ475wv3ECpXz-Vzb-6uGSaQeL_04RfCmlx55MuNHJbRgRenkZqjNDga4D-p7CX5cEMOgdZRnrVne00OZEgOQ8ksAWx6MjalWDcCemPO2nbUKw9daIOA_wr4Wo/s1600/RoC4.jpg" title="Judul Gambar" /> </a> <a href="javascript:void(0)"> <img alt="Judul Gambar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj63MSrv49vKAzZ89RBcbQK4YV78U-cBo09GL3b6x3fPrwkWb2rko3c-phbXp4iRgsFnOwxzbrLosnSqU34eti3d4xb5fhnAPAAVBWkVUJHuX3AUHHGr62eB1R43dbuDCRQpvyAGHhimqA/s1600/RoC5.jpg" title="Judul Gambar" /> </a> </li> </ul> </div> <a class="left-b" href="javascript:void(0);"> <svg aria-hidden="true" data-prefix="fas" data-icon="angle-left" class="svg-inline--fa fa-angle-left fa-w-8" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"></path></svg></a> <a class="right-b" href="javascript:void(0);"> <svg aria-hidden="true" data-prefix="fas" data-icon="angle-right" class="svg-inline--fa fa-angle-right fa-w-8" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></a> </div>
This is a guide to creating a lightweight and responsive Mini Slider for blog posts. Don't forget to leave a comment and share this blog to receive future updates!