Pure CSS 3 Image Slider for Blogspot (Cycle Style)

November 06, 2021 Post a Comment

Then I came up with a swish and hot image slider for blogger that's just using pure CSS3. No Javascript or jQuery is used. So this slider is more easy to customize for newbies, just need a introductory HTML and little good CSS3 knowledge. No garçon side coding is used then, so each is on your hand. Take a look on their runner for further about it. I created a bogarized interpretation from theirs, it's now just need to follow many easy way to installing this slider on blogspot blog.

#Demo

Lets follow the simple 4 steps to add this "CSS3 image slider to Blogger blog"
1. Go to Blogger Dashboard > Layout >
2. Add a HTML/Javascript Gadget
3. Copy the code below and paste on it.

#content-slider {
    height: 335px;
    width: 100%;
}

#slider {
    background: none repeat scroll 0 0 #000000;
    border: 5px solid #FFFFFF;
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
       -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
            box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
    height: 320px;
    margin: 10px auto;
    overflow: visible;
    position: relative;
    width: 680px;
}

#mask {
    height: 320px;
    overflow: hidden;
}

#slider ul {
    margin: 0;
    padding: 0;
    position: relative;
}

#slider li {
    width: 680px;
    height: 320px;
    position: absolute;
    top: -325px;
    list-style: none;
}

#slider li.firstanimation {
    -moz-animation: cycle 25s linear infinite;
    -webkit-animation: cycle 25s linear infinite;
}

#slider li.secondanimation {
    -moz-animation: cycletwo 25s linear infinite;
    -webkit-animation: cycletwo 25s linear infinite;
}

#slider li.thirdanimation {
    -moz-animation: cyclethree 25s linear infinite;
    -webkit-animation: cyclethree 25s linear infinite;
}

#slider li.fourthanimation {
    -moz-animation: cyclefour 25s linear infinite;
    -webkit-animation: cyclefour 25s linear infinite;
}

#slider li.fifthanimation {
    -moz-animation: cyclefive 25s linear infinite;
    -webkit-animation: cyclefive 25s linear infinite;
}

#slider .tooltip {
    background: rgba(0, 0, 0, 0.7);
    width: 300px;
    height: 60px;
    position: relative;
    bottom: 75px;
    left: -320px;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}

#slider .tooltip h1 {
    color: #fff;
    font-size: 24px;
    font-weight: 300;
    line-height: 60px;
    padding: 0 0 0 20px;
}

#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {
    left: 0px;
}

/* PROGRESS BAR */

.progress-bar {
    position: relative;
    top: -5px;
    width: 680px;
    height: 5px;
    background: #000;
    -moz-animation: fullexpand 25s ease-out infinite;
    -webkit-animation: fullexpand 25s ease-out infinite;
}

/* ANIMATION */

@-moz-keyframes cycle {
    0% {
        top: 0px;
    }
    4% {
        top: 0px;
    }
    16% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    20% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    21% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    92% {
        top: -325px;
        opacity: 0;
        z-index: 0;
    }
    96% {
        top: -325px;
        opacity: 0;
    }
    100% {
        top: 0px;
        opacity: 1;
    }
}

@-moz-keyframes cycletwo {
    0% {
        top: -325px;
        opacity: 0;
    }
    16% {
        top: -325px;
        opacity: 0;
    }
    20% {
        top: 0px;
        opacity: 1;
    }
    24% {
        top: 0px;
        opacity: 1;
    }
    36% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    40% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    41% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    100% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
}

@-moz-keyframes cyclethree {
    0% {
        top: -325px;
        opacity: 0;
    }
    36% {
        top: -325px;
        opacity: 0;
    }
    40% {
        top: 0px;
        opacity: 1;
    }
    44% {
        top: 0px;
        opacity: 1;
    }
    56% {
        top: 0px;
        opacity: 1;
    }
    60% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    61% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    100% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
}

@-moz-keyframes cyclefour {
    0% {
        top: -325px;
        opacity: 0;
    }
    56% {
        top: -325px;
        opacity: 0;
    }
    60% {
        top: 0px;
        opacity: 1;
    }
    64% {
        top: 0px;
        opacity: 1;
    }
    76% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    80% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    81% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    100% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
}

@-moz-keyframes cyclefive {
    0% {
        top: -325px;
        opacity: 0;
    }
    76% {
        top: -325px;
        opacity: 0;
    }
    80% {
        top: 0px;
        opacity: 1;
    }
    84% {
        top: 0px;
        opacity: 1;
    }
    96% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    100% {
        top: 325px;
        opacity: 0;
        z-index: 0;
        
    }
}

@-webkit-keyframes cycle {
    0% {
        top: 0px;
    }
    4% {
        top: 0px;
    }
    16% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    20% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    21% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    50% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    92% {
        top: -325px;
        opacity: 0;
        z-index: 0;
    }
    96% {
        top: -325px;
        opacity: 0;
    }
    100% {
        top: 0px;
        opacity: 1;
    }
}

@-webkit-keyframes cycletwo {
    0% {
        top: -325px;
        opacity: 0;
    }
    16% {
        top: -325px;
        opacity: 0;
    }
    20% {
        top: 0px;
        opacity: 1;
    }
    24% {
        top: 0px;
        opacity: 1;
    }
    36% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    40% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    41% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    100% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
}

@-webkit-keyframes cyclethree {
    0% {
        top: -325px;
        opacity: 0;
    }
    36% {
        top: -325px;
        opacity: 0;
    }
    40% {
        top: 0px;
        opacity: 1;
    }
    44% {
        top: 0px;
        opacity: 1;
    }
    56% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    60% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    61% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    100% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
}

@-webkit-keyframes cyclefour {
    0% {
        top: -325px;
        opacity: 0;
    }
    56% {
        top: -325px;
        opacity: 0;
    }
    60% {
        top: 0px;
        opacity: 1;
    }
    64% {
        top: 0px;
        opacity: 1;
    }
    76% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    80% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    81% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    100% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
}

@-webkit-keyframes cyclefive {
    0% {
        top: -325px;
        opacity: 0;
    }
    76% {
        top: -325px;
        opacity: 0;
    }
    80% {
        top: 0px;
        opacity: 1;
    }
    84% {
        top: 0px;
        opacity: 1;
    }
    96% {
        top: 0px;
        opacity: 1;
        z-index: 0;
    }
    100% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
}

/* ANIMATION BAR */

@-moz-keyframes fullexpand {
    0%,
    20%,
    40%,
    60%,
    80%,
    100% {
        width: 0%;
        opacity: 0;
    }
    4%,
    24%,
    44%,
    64%,
    84% {
        width: 0%;
        opacity: 0.3;
    }
    16%,
    36%,
    56%,
    76%,
    96% {
        width: 100%;
        opacity: 0.7;
    }
    17%,
    37%,
    57%,
    77%,
    97% {
        width: 100%;
        opacity: 0.3;
    }
    18%,
    38%,
    58%,
    78%,
    98% {
        width: 100%;
        opacity: 0;
    }
}

@-webkit-keyframes fullexpand {
    0%,
    20%,
    40%,
    60%,
    80%,
    100% {
        width: 0%;
        opacity: 0;
    }
    4%,
    24%,
    44%,
    64%,
    84% {
        width: 0%;
        opacity: 0.3;
    }
    16%,
    36%,
    56%,
    76%,
    96% {
        width: 100%;
        opacity: 0.7;
    }
    17%,
    37%,
    57%,
    77%,
    97% {
        width: 100%;
        opacity: 0.3;
    }
    18%,
    38%,
    58%,
    78%,
    98% {
        width: 100%;
        opacity: 0;
    }
}
</style>
<div class="container">
    <div id="content-slider">
        <div id="slider">
            <div id="mask">
                <ul>
                    <li class="firstanimation" id="first">
                        <a href="https://www.masudcomputerbd.com/">
                            <img alt="Cougar" src="https://blogger.googleusercontent.com/img/a/AVvXsEhozYttqf5GS5qslcfJa4SJvM2taFDito9U-AAZT18QHRCC8DyN0riWV08buSQI12VFjBV4muSWJObYM8hbXI-NnoIAZxG8a35UrvpIY-oIG0IVi_e3FxIXTe9Abbnwam4ybntuSwMNDcaqSXBCpJJ3xnyx9YNKgHysm7NODvQAaw6KRqat9bApkDXKfA=s680" />
                        </a>
                        <div class="tooltip">
                            <h1> Masud Computer BD #1 </h1>
                        </div>
                    </li>
                    <li class="secondanimation" id="second">
                        <a href="https://www.masudcomputerbd.com/">
                            <img alt="Lions" src="https://blogger.googleusercontent.com/img/a/AVvXsEiBabvkveEcZcT7CsFWI2fpkhgR2ctIvCgc9Y6-xgu5uVOIJHvBr5HI4tBxSRhSlyYZOnYEYGrnul9yNKoEf2aTcHdaUTFuO9fCXIRoKpHDheYNRAg3VbuEXSgwj9e8P1OyxBam0xakLgssZAI0ZJ9Nuh_5OCshqP33Z5Fwlipit-EsOzFQv52J8b6Ccg=s680" />
                        </a>
                        <div class="tooltip">
                            <h1> Masud Computer BD #2</h1>
                        </div>
                    </li>
                    <li class="thirdanimation" id="third">
                        <a href="https://www.masudcomputerbd.com/">
                            <img alt="Snowalker" src="https://blogger.googleusercontent.com/img/a/AVvXsEjXlUDgJQpEU_iqZiRV3QuDAn16CV2fBsVmN0MO-D9TwjWGgJ-Yjv-6Ecnq4WCMBVt-6RQQanques-3FDULiYoTfW3IxqivioD7U0A0TXpAZdd42bO-AnxQGS4EhebMrRI0AzGLUcv7qG_VLEHvtaQlyFT-mDjkC27rKmFsFW-gWnHmbfNFFTZi1-6oVA=s680" />
                        </a>
                        <div class="tooltip">
                            <h1> Masud Computer BD #3</h1>
                        </div>
                    </li>
                    <li class="fourthanimation" id="fourth">
                        <a href="https://www.masudcomputerbd.com/">
                            <img alt="Howling" src="https://blogger.googleusercontent.com/img/a/AVvXsEhozYttqf5GS5qslcfJa4SJvM2taFDito9U-AAZT18QHRCC8DyN0riWV08buSQI12VFjBV4muSWJObYM8hbXI-NnoIAZxG8a35UrvpIY-oIG0IVi_e3FxIXTe9Abbnwam4ybntuSwMNDcaqSXBCpJJ3xnyx9YNKgHysm7NODvQAaw6KRqat9bApkDXKfA=s680" />
                        </a>
                        <div class="tooltip">
                            <h1> Masud Computer BD #4</h1>
                        </div>
                    </li>
                    <li class="fifthanimation" id="fifth">
                        <a href="https://www.masudcomputerbd.com/">
                            <img alt="Sunbathing" src="https://blogger.googleusercontent.com/img/a/AVvXsEjXlUDgJQpEU_iqZiRV3QuDAn16CV2fBsVmN0MO-D9TwjWGgJ-Yjv-6Ecnq4WCMBVt-6RQQanques-3FDULiYoTfW3IxqivioD7U0A0TXpAZdd42bO-AnxQGS4EhebMrRI0AzGLUcv7qG_VLEHvtaQlyFT-mDjkC27rKmFsFW-gWnHmbfNFFTZi1-6oVA=s680" />
                        </a>
                        <div class="tooltip">
                            <h1> Masud Computer BD #5</h1>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="progress-bar"></div>
        </div>
    </div>
</div>

image slider,css image slider,responsive image slider,image slider html and css,pure css image slider,responsive css image slider,image slider css,image slider html,slider,responsive slider,image slider in html,image slider html css,image slider css html,image slider with html and css,html css slider,image slider html and css javascript,css slider,image slider for blogger website,image slider tutorial,responsive image slider html and css,slider,image slider,css slider,css image slider,html css slider,pure css slider,slider css,responsive slider,responsive image slider,html image slider,javascript slider,slider html,image slider in html,range slider,css range slider,html range slider,responsive css image slider,custom range slider,styling range slider,touch slider,responsive touch slider,gallery slider,slider css only,html and css slider in hindi,image slider css,blogger,slider,image slider,how to add slider in blogger,blogger slider,how to add image slider on blogger,how to add image slider in blogger,how to add image slider in blogger post,slider for blogger,blogger slider widget,blogger slider html code,add image slider in blogger,blogger testimonial slider,responsive slider for blogger,add image slider in blogger post,how to add slider in blogger homepage,css image slider,slider blogger,blogger widgets,html,html css slider,slider,image slider,html slider,image slider html and css,html image slider,image slider in html,product slider html,css image slider,slider html,slider html css,image slider html and css in hindi,image slider html and css javascript,responsive slider,javascript slider,html and css,html css image slider,html range slider,responsive image slider,html css,image slider css html,how to code an html slider

Image Slider For Blogger

Pure CSS 3 Image Slider for Blogspot (Cycle Style)

#Demo

Post a Comment for "Pure CSS 3 Image Slider for Blogspot (Cycle Style)"

Widget HTML #3