Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Mega swiper carousel widget Blogger mobile site only

SCREENSHOT


FEATURES


1. Easily customizable.

2. Clean code.

3. Fast loading widget.

4. Hides on desktop.

5. On touch moveable.

6. No limit on adding carousels.

CODE



@media only screen and (min-width: 800px) {
.swiper-container.swiper-container-horizontal{display:none;}}
.swiper-slide a {width: 100%;}
.swiper-container.swiper-container-horizontal {
background: #eee;
padding: 10px 0px;
}.swiper-container{width:100%;height:280px;margin:20px auto;}.swiper-slide{height: 270px;padding: 5px;text-align:center;font-size:18px;background:#fff;width:250px;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;}
.swiper-container.swiper-container-horizontal img {width: 100%;height:160px;margin: 0;right: 0.5px;position: relative;}
.swiper-container.swiper-container-horizontal h3 { position: absolute; left: 2px; top: 190px; font-size: 17px; width: 95%; padding: 5px; font-weight: normal; text-align: left; }



YOUR POST TITLE


YOUR POST TITLE


YOUR POST TITLE


YOUR POST LINK HERE">YOUR IMAGE LINK HERE"/>

YOUR POST TITLE

YOUR POST LINK HERE">YOUR IMAGE LINK HERE"/>

YOUR POST TITLE

YOUR POST LINK HERE">YOUR IMAGE LINK HERE"/>

YOUR POST TITLE

YOUR POST TITLE


YOUR POST TITLE




   
   
   
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 2,
        centeredSlides: true,
        paginationClickable: true,
        spaceBetween: 30,
        grabCursor: true
    });
   



This post first appeared on 101Helper Blogging Tutorials, please read the originial post: here

Share the post

Mega swiper carousel widget Blogger mobile site only

×

Subscribe to 101helper Blogging Tutorials

Get updates delivered right to your inbox!

Thank you for your subscription

×