Text only Swiper carousel widget Blogger mobile site -Rexblog

SCREENSHOT

FEATURES

1. No thumbnails or images carousel swiper.

2. Fully customizable.

3. Simple style.

4. Buttons and text colors can be changed with css.

5. Touch control can be enabled or disabled.

TEXT ONLY CAROUSEL WIDGET CODE

<style>
.swiper-container.swiper-container-horizontal {background: #eee;padding: 10px 0px;}
.swiper-container{width:100%;height:200px;margin:20px auto;}
.swiper-container.swiper-container-horizontal img { width: 100%; height: 130px; margin: 0; right: 0.5px; position: relative; }
.swiper-slide {
    height: 190px;
    padding: 5px;
    text-align: center;
    font-size: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Pl5PXSkszrSi6i4N8DP9Y7d8I9HfB5Hc-poAvARlpveIkGHW6GyBX0QZcr4DFmXNpUbQD7xZYn20QD5wFXTyASE9DNvBWGyIMhuQupdugfjCfBmtC1Y0rALSq1kCSAo4ACqOjw6W9aY/s1600/more.png) no-repeat #fff;
    background-position: 93% 94%;
}
.swiper-container.swiper-container-horizontal h3 {
    font-size: 15px;
    line-height: 1.2;
    text-align: left;
    position: relative;
    color: #2288bb;
    float: left;
}
.swiper-container.swiper-container-horizontal p {
    color: #666;
    font-size: 14px;
    padding: 0;
    text-align: left;
    margin: 0;
    float: left;
    padding-top: 5px;
    height: 93px;
    overflow: hidden;
}
@media only screen and (min-width: 800px) {
.swiper-container.swiper-container-horizontal{
display:none;
}
}
</style>
<div class="swiper-container swiper-container-horizontal" style="cursor: -webkit-grab;">
<div class="swiper-wrapper" style="transform: translate3d(-562px, 0px, 0px); transition-duration: 0ms;">
<div class="swiper-slide" style="margin-right: 30px;"><a href="YOUR POST LINK"><h3>YOUR POST TITLE</h3></a><p>YOUR POST TEXT(SMALL INTRO)</p></div>
<div class="swiper-slide" style="margin-right: 30px;"><a href="YOUR POST LINK"><h3>YOUR POST TITLE</h3></a><p>YOUR POST TEXT(SMALL INTRO)</p></div>
<div class="swiper-slide" style="margin-right: 30px;"><a href="YOUR POST LINK"><h3>YOUR POST TITLE</h3></a><p>YOUR POST TEXT(SMALL INTRO)</p></div>
<div class="swiper-slide swiper-slide-prev" style="margin-right: 30px;"><a href="YOUR POST LINK"><h3>YOUR POST TITLE</h3></a><p>YOUR POST TEXT(SMALL INTRO)</p></div>
<div class="swiper-slide swiper-slide-active" style="margin-right: 30px;"><a href="YOUR POST LINK"><h3>YOUR POST TITLE</h3></a><p>YOUR POST TEXT(SMALL INTRO)</p></div>
<div class="swiper-slide swiper-slide-next" style="margin-right: 30px;"><a href="YOUR POST LINK"><h3>YOUR POST TITLE</h3></a><p>YOUR POST TEXT(SMALL INTRO)</p></div>
<div class="swiper-slide" style="margin-right: 30px;"><a href="YOUR POST LINK"><h3>YOUR POST TITLE</h3></a><p>YOUR POST TEXT(SMALL INTRO)</p></div>
<div class="swiper-slide" style="margin-right: 30px;"><a href="YOUR POST LINK"><h3>YOUR POST TITLE</h3></a><p>YOUR POST TEXT(SMALL INTRO)</p></div>
</div>
</div>
<script>
    var swiper = new Swiper('.swiper-container', {
        scrollbarHide: true,
        slidesPerView: '2',
autoplay: true,
speed: 2000,
        centeredSlides: true,
        spaceBetween: 30,
        grabCursor: true
    });
    </script>

HOW TO INSTALL SWIPER CAROUSEL WIDGET IN BLOGGER

Rate This Article

Thanks for reading: Text only Swiper carousel widget Blogger mobile site -Rexblog, Stay tune to get latest Blogging Tips.