Swiper API example

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">

​

<div class="row-rate-tables">

    <div class="rate-tables">

        <div class="row c__swiper-wrapper">

            <div class="col-lg-3 col-xs-6 c__swiper-slide">

                <div class="rate-table">

                    <div class="rate-table-header"><span class="header-rate-name">Tarifa Clásica 2.0</span> <span class="header-company-name">Holaluz</span></div>

​

                    <div class="rate-table-body">

                        <p>Tipo de tarifa: <strong>1 precio</strong></p>

​

                        <div class="price-box"><span class="price-leyend">Precio kWh</span> <span class="price-number">0.1390</span> <span class="price-kwh">€/kWh</span></div>

​

                        <div class="buttons-price"><a class="btn1" data-link="modal_form_general" data-target-ds="din-modal" data-toggle-ds="modal" href="#">91 000 00 00</a> <a class="btn2" data-link="modal_form_general" data-target-ds="din-modal" data-toggle-ds="modal" href="#">Solicitar información</a></div>

                    </div>

​

                    <div class="rate-table-footer">

                        <p>Detalles de la tarifa</p>

​

                        <ul class="checked">

                            <li>Sin permanencia</li>

                            <li>Término Fijo: 0.1056€/kW/día</li>

.swiper-container {

    margin: 0 15px;

​

}

.swiper-pagination-bullet-active {

    background: #12a6d0;

}

.rate-table {

    border: 1px solid #ccc;

    margin-bottom: 30px;

}

​

.rate-table .rate-table-header {

    background: #f9007a;

    padding: 4px 8px;

    font-size: 0.6em;

    color: #fff;

    margin: -1px;

}

​

.rate-table .rate-table-header .header-rate-name {

    font-weight: 700;

}

​

if(window.innerWidth <= 991) {

    var rowRateTables = document.querySelector('.row-rate-tables');

    rowRateTables.classList.add('row');

​

    var rateTables = document.querySelector('.rate-tables');

    rateTables.classList.add('col-xs-12', 'swiper-container');

​

    var swiperWrapper = document.querySelector('.c__swiper-wrapper');

    swiperWrapper.className = '';

    swiperWrapper.classList.add('row', 'swiper-wrapper');

​

    var swiperSlides = document.querySelectorAll('.c__swiper-slide');

    for(var slide of swiperSlides) {

      slide.className = '';

      slide.classList.add('col-xs-12', 'swiper-slide');

    }

​

    var mySwiper = new Swiper ('.swiper-container', {

      // Optional parameters

      direction: 'horizontal',

      loop: true,

      // pagination: {

      //    el: '.swiper-pagination',

      //    dynamicBullets: true,