jQuery Carousel Slider for Blogger (FlexSlider)

November 07, 2021 Post a Comment

Let’s Install the Image Slider to your Blogger Blog
1. Go to Blogger Dashboard > Layout > Add a Gadget
2. Select HTML/Javascript
3. Copy the code below and paste on it.

#Demo

/* Browser Resets */

.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {
    outline: none;
}

.slides,
.flex-control-nav,
.flex-direction-nav {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* FlexSlider Necessary Styles
*********************************/

.flexslider {
    margin: 0;
    padding: 0;
}

.flexslider .slides > li {
    display: none;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Hide the slides before the JS is loaded. Avoids image jumping */

.flexslider .slides img {
    width: 100%;
    display: block;
}

.flex-pauseplay span {
    text-transform: capitalize;
}

/* Clearfix for the .slides element */

.flexslider a.intro {
    bottom: 0;
    color: rgba(0, 0, 0, 0.1);
    font-size: 14px;
    position: absolute;
    right: 0;
    text-decoration: none;
    z-index: 99999;
}

.slides:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

html[xmlns] .slides {
    display: block;
}

* html .slides {
    height: 1%;
}

/* No JavaScript Fallback */

/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */

.no-js .slides > li:first-child {
    display: block;
}

/* FlexSlider Default Theme
*********************************/

.flexslider {
    margin: 0 0 60px;
    background: #fff;
    border: 4px solid #fff;
    position: relative;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    zoom: 1;
}

.flex-viewport {
    max-height: 2000px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.loading .flex-viewport {
    max-height: 300px;
}

.flexslider .slides {
    zoom: 1;
}

.carousel li {
    margin-right: 5px;
}

/* Direction Nav */

.flexslider li {
    border: 0 none !important;
    padding: 0 !important;
    text-indent: 0 !important;
}

.flex-direction-nav a {
    width: 30px;
    height: 30px;
    margin: -20px 0 0;
    display: block;
    background: url(http://project.dimpost.com/flexslider-carousel/images/bg_direction_nav.png) no-repeat 0 0;
    position: absolute;
    top: 50%;
    cursor: pointer;
    text-indent: -9999px;
    opacity: 0;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.flex-direction-nav .flex-next {
    background-position: 100% 0;
    right: -36px;
}

.flex-direction-nav .flex-prev {
    left: -36px;
}

.flexslider:hover .flex-next {
    opacity: 0.8;
    right: 5px;
}

.flexslider:hover .flex-prev {
    opacity: 0.8;
    left: 5px;
}

.flexslider:hover .flex-next:hover,
.flexslider:hover .flex-prev:hover {
    opacity: 1;
}

.flex-direction-nav .disabled {
    opacity: .3!important;
    filter: alpha(opacity=30);
    cursor: default;
}

/* Control Nav */

.flex-control-nav {
    width: 100%;
    position: absolute;
    bottom: -40px;
    text-align: center;
}

.flex-control-nav li {
    margin: 0 6px;
    display: inline-block;
    zoom: 1;
    *display: inline;
}

.flex-control-paging li a {
    width: 11px;
    height: 11px;
    display: block;
    background: #666;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    text-indent: -9999px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
}

.flex-control-paging li a:hover {
    background: #333;
    background: rgba(0, 0, 0, 0.7);
}

.flex-control-paging li a.flex-active {
    background: #000;
    background: rgba(0, 0, 0, 0.9);
    cursor: default;
}

.flex-control-thumbs {
    margin: 5px 0 0;
    position: static;
    overflow: hidden;
}

.flex-control-thumbs li {
    width: 25%;
    float: left;
    margin: 0;
}

.flex-control-thumbs img {
    width: 100%;
    display: block;
    opacity: .7;
    cursor: pointer;
}

.flex-control-thumbs img:hover {
    opacity: 1;
}

.flex-control-thumbs .active {
    opacity: 1;
    cursor: default;
}
</style>
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.js"></script>
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.flexslider-min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(window).load(function() {
        $('.flexslider').flexslider({
            animation: "slide",
            animationLoop: false,
            itemWidth: 210,
            itemMargin: 0,
            minItems: 1,
            maxItems: 4
        });
    });
});
</script>
<div class="flexslider">
    <ul class="slides">
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" />
        </li>
        <li>
            <img src="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" />
        </li>
    </ul>
</div>

jquery image slider,image slider,jquery slider,jquery,image slider jquery,slider,jquery image slideshow,jquery slider tutorial,image slider using html5 jquery,javascript image slider,jquery image slider tutorial,automatic jquery image slider,jquery slideshow,css image slider,jquery slider plugin,image slideshow jquery,slider images,jquery slider image,jquery (software),image slider in jquery,image slider html css,javascript slider

Image Slider For Blogger

jQuery Carousel Slider for Blogger (FlexSlider)

#Demo

Post a Comment for "jQuery Carousel Slider for Blogger (FlexSlider)"

Widget HTML #3