How to create an image slider with owl carousel slide in blogger or wordpress website? Blog slider HTML CSS, Blogger slider HTML code, Peak Fiction
Creating a Responsive Image Slider Carousel in Blogger - Enhance your Blogger website with a sleek and responsive image slider carousel using Peak Fiction's comprehensive guide.
Hello fellow bloggers, Welcome to Peak Fiction. It's been a while since I've shared tutorials to help you proactively enhance your blog independently. Due to my commitment to redesign services and customizing blogger templates, I haven't had the chance. Today, I'm gonna make a tutorial on creating an owl carousel slide in blogger.
How to create an image slider in blogger website
For those familiar with owl carousel, you know it offers a range of features, from mouse-controlled sliding to intuitive navigation buttons and slide indicators.
If you're looking to showcase small slider images on a blog with ample vertical space, this widget might be your solution. It elegantly displays compact images while hinting at the adjacent ones.
Moreover, this tutorial is designed to be versatile and accessible to bloggers using various platforms, including both Blogger and Wordpress. However, before proceeding with the installation process, it's essential to ensure that your blog is equipped with jQuery, as the owl carousel relies on this framework for its functionality.
Blogger image slider code
To integrate the owl carousel into your Blogger layout, follow these step-by-step instructions:
Step 1. Navigate to Blogger > Theme > Edit HTML.
Step 2. Insert the provided CSS above the closing code ]]></b:skin>. Blog slider HTML CSS
/* Owl Carousel Slide Design by peakfiction.top */
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{background:#fff;display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}
.owl-carousel .owl-stage:after{content:'.';display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;width:100%;transform:scale(1.7);padding:80px 0}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}
.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none;transition:all .4s ease-in-out}.owl-carousel .owl-item img{background:#eee;display:block;width:100%;border-radius:5px;height:240px;object-fit:cover}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}
.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^='']{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}
.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}.owl-item .blanter-owl-image{opacity:0;transition:all .3s ease-in-out}.owl-item.active .blanter-owl-image{transform:scale(1);opacity:1}.owl-item .blanter-desc{transform:translate(0,40px);opacity:0}.owl-item.active .blanter-desc{transform:translate(0,0);opacity:1}.owl-dots{text-align:center;position:relative;bottom:0;left:0;right:0}.blanter-owl-image{z-index:1}.owl-carousel .owl-dots button{background:#ddd;width:11px;height:11px;border-radius:10px;margin:0 5px}.owl-carousel .owl-dots button.active{background:#2b69e2;width:20px}
.sliderbanner.container{position:relative;max-width:1200px;margin:0 auto;padding:20px 0;overflow:hidden}.owl-item.active{opacity:.5}.owl-item.active.center{opacity:1}
.owl-nav{position:absolute;z-index:1;width:100%;font-size:40px;top:40%}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev{box-shadow:0 5px 8px rgb(0 0 0 / 15%);background:#fff;height:50px;line-height:0;width:50px;border-radius:100%;position:absolute}
.owl-carousel .owl-nav button.owl-next{right:18%}.owl-carousel .owl-nav button.owl-prev{left:18%}
@media screen and (max-width:980px){.owl-carousel .owl-stage-outer{transform:scale(1.5)}}
@media screen and (max-width:768px){.owl-carousel .owl-stage-outer{transform:scale(1);padding:10px 0}.owl-nav{display:none}}
Step 3. Place the JavaScript snippet above the closing </body> tag.
<script src="https://cdn.jsdelivr.net/gh/blanter/design@master/blanter-owlcarousel.js"></script>
<script>
//<![CDATA[
// Enable Owl Carousel
$('.owl-carousel').owlCarousel({
loop: true,
center: true,
items: 3,
margin: 15,
autoplay: true,
dots:true,
nav:true,
autoplayTimeout: 8500,
smartSpeed: 450,
responsive: {
0: {
items: 1
},
768: {
items: 2
},
1170: {
items: 3
}
}
});
//]]>
</script> Step 4. Finally, insert the widget code where you want it to appear in your layout. You can add this in page, posts or in layout. You can edit the marked options. Blogger slider HTML code:
<!-- SLIDER -->
<div class='sliderbanner container'>
<div class='owl-carousel owl-theme' id='blanter-carousel'>
<!-- START -->
<div class='blanter-owl-image'>
<a href='#link' title='Slider'>
<img alt='Slider' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBTU7fK7n3WZ7Jgl11NYq1fqKjvEYCetnvZcg99BFhzjaFtKX-khr-QM5LkH6NncIMIkF0rON2m230w1bBE46MX7lAgF4pDiB2VITjjBWVvIB8AixaNazX-JakWMMnZc834fxStxMoKdo/s1000/Orbit+Working+%25284%2529-min.jpg'/>
</a>
</div>
<div class='blanter-owl-image'>
<a href='#link' title='Slider'>
<img alt='Slider' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGNKUsxO7fNkP7v8RuN0HonIINf1wtjW_7bZ6Sq2XY34V3sazu54cT_QnofpNEu-gFMnPrK8GCNoajS08NfUgjvKN-dBc8sZCR0ON9aGBPZLrKdQfYDr73Pp_y8zsb_9V7XD41EGHPWx4/s1000/Orbit+Working+%25282%2529-min.jpg'/>
</a>
</div>
<div class='blanter-owl-image'>
<a href='#link' title='Slider'>
<img alt='Slider' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ju3TdBj9RKET_tNMaMAO2uaJ4bGI0fJ_RpGovuvxahwoLFip1jSJTlYrMqQ1NuaFdQb1sC91l5Pq8jYYhqlSVaTu8iuCvAClcfyeCn5d0CvAmyk_WRPYU8sYDs9PF_8tU27ocjCZKWM/s1000/Orbit+Working+%25283%2529-min.jpg'/>
</a>
</div>
<div class='blanter-owl-image'>
<a href='#link' title='Slider'>
<img alt='Slider' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih2nooSBxICuRLWNO9UEsk56wPbzZLCRYXdPI4d-jWyF5fzqEY8f5ItOMlhCFh81L3S2fBpHkwEwE2omCk3VFHlI8kbJcsBw8yAKo6c0SZ7C8e2Ahcbc8gAwVn3XPDwuqZpWO-pvqTL44/s1000/Orbit+Working+%25285%2529-min.jpg'/>
</a>
</div>
<!-- END -->
</div>
</div>
<!-- END SLIDER -->
That wraps up this tutorial on how you can add a slider with images in blogger. For questions, requests, or further assistance, drop a comment below. Thank you for reading!
)_20230918_170316_0000%20(1)%20(2).webp)
)_20230924_004113_0000.webp)
.webp)
.webp)