Ritesh Patel
@john.peter
Android Developer,Programmers,CSS3

Ritesh's professions

Recent Posts By Ritesh

Idangero swiper slider is not working with bootstrap tabs?
I am trying to implement idangero slider inside bootstrap tabs but its now working, any help will be appreciated :)

Html Code is
<ul class="nav nav-pills technologies">
    <li class="active"><a data-toggle="pill" href="#html">HTML5</a></li>
    <li><a data-toggle="pill" href="#css">CSS3</a></li>
    <li><a data-toggle="pill" href="#node_js">Node Js</a></li>
    <li><a data-toggle="pill" href="#angular_js">Angular Js</a></li>
</ul>

<div class="tab-content">
    <div id="html" class="tab-pane fade in active">
        <h3>HTML5</h3>
        <div class="swiper-container html-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="assets/img/html1.png" alt="html">
                </div>
                <div class="swiper-slide">
                    <img src="assets/img/html2.png" alt="html">
                </div>
                <div class="swiper-slide">
                    <img src="assets/img/html3.png" alt="html">
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <div id="css" class="tab-pane fade">
        <h3>CSS</h3>
        <div class="swiper-container css-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="assets/img/css1.png" alt="css">
                </div>
                <div class="swiper-slide">
                    <img src="assets/img/css2.png" alt="css">
                </div>
                <div class="swiper-slide">
                    <img src="assets/img/css3.png" alt="css">
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <div id="node_js" class="tab-pane fade">
        <h3>Node Js</h3>
        <div class="swiper-container node-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="assets/img/node-js1.png" alt="node-js.png">
                </div>
                <div class="swiper-slide">
                    <img src="assets/img/node-js2.png" alt="node-js.png">
                </div>
                <div class="swiper-slide">
                    <img src="assets/img/node-js3.png" alt="node-js.png">
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <div id="angular_js" class="tab-pane fade">
        <h3>Angular Js</h3>
        <div class="swiper-container angular-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="assets/img/angular-js1.png" alt="angular-js">
                </div>
                <div class="swiper-slide">
                    <img src="assets/img/angular-js2.png" alt="angular-js">
                </div>
                <div class="swiper-slide">
                    <img src="assets/img/angular-js3.png" alt="angular-js">
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
</div>
Jquery Code Is

<script>
    $(document).ready(function(){
        var swiper1;
        var swiper2;
        var swiper3;
        var swiper4;
        var swiper5;
        swiper1 = new Swiper('.html-container', {
            slidesPerView: 1,
            loop: true,
            paginationClickable: true
        });
        swiper2 = new Swiper('.css-container', {
            slidesPerView: 1,
            paginationClickable: true,
            loop: true
        });
        swiper3 = new Swiper('.node-container', {
            slidesPerView: 1,
            paginationClickable: true,
            loop: true
        });
        swiper4 = new Swiper('.angular-container', {
            slidesPerView: 1,
            paginationClickable: true,
            loop: true
        });
    });
</script>

×

Jon Westenberg follows

  • John Marshal
    @john
    Writer, founder, passionate entrepreneur + I'm on a mission to build businesses
  • John Marshal
    @john
    Writer, founder, passionate entrepreneur + I'm on a mission to build businesses
  • John Marshal
    @john
    Writer, founder, passionate entrepreneur + I'm on a mission to build businesses
  • John Marshal
    @john
    Writer, founder, passionate entrepreneur + I'm on a mission to build businesses
  • John Marshal
    @john
    Writer, founder, passionate entrepreneur + I'm on a mission to build businesses
×