Hello friends, this time I will tell about How to Create Automatic Slideshow Images in Blogger Posts with the script code provided in this article.
By making a photo slideshow on the post it will beautify the appearance of the article, the image is not messy everywhere. Anyway, very pleasing to the eye and easy to understand the end.
There are several reasons for making Slideshow Images in Posts such as not using too much page space in article postings in a more concise sense and very comfortable to understand the contents of the article.
Now you know the uses and benefits of making slideshow images on blog posts. If you are interested in making the image slideshow method in the post, please refer to the steps below.
How to Create Slideshow Images in Blogger Posts
.carousel-cell {
width: 100%;
height: 200px;
margin-right: 10px;
background: #8C8;
border-radius: 5px;
counter-increment: carousel-cell;
}
.carousel-cell img{
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
}
.caraousel-cell iframe{
width: 100%;
height: 200px;
padding: 0px;
margin: 0px;
}
.carousel-cell.is-selected iframe {
width: 100%;
height: 200px;
}
.flickity-viewport {
overflow: hidden;
position: relative;
height: 200px!Important;
}
.flickity-page-dots {
bottom: -22px;
}
.flickity-page-dots .dot {
height: 4px;
width: 40px;
margin: 0;
border-radius: 0;
}
.flickity-button {
background: #333;
color: white;
}
.flickity-button:hover {
background: #F90;
}
.flickity-prev-next-button {
width: 30px;
height: 30px;
border-radius: 5px;
}
@media screen and(max-width:640px){
.flickity-viewport {
overflow: hidden;
position: relative;
max-height: 200px!Important;
}
.carousel-cell{
height: 200px!Important;
}
iframe.slider{
width:100%;
height:100%;
}
.carousel-cell img {
height: 200px;
}}
<link href='https://unpkg.com/flickity@2/dist/flickity.min.css' rel='stylesheet'/>
<script src='https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js'/>
<div class="carousel" data-flickity="">
<div class="carousel-cell">
<img
alt="slideshow1"
src="#"
title="slideshow1"
/>
</div>
<div class="carousel-cell">
<img
alt="slideshow2"
src="#"
title="slideshow"
/>
</div>
<div class="carousel-cell">
<iframe
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen=""
class="slider"
frameborder="0"
src="https://www.youtube.com/embed/BHiMYGRBhhs"
></iframe>
</div>
</div>
Note:-
1. Red color hash mark fill with image URL.
2. Change the YouTube URL according to your wishes.
Post a Comment
Post a Comment