Swiper Js slides display in a single page instead of a carousel

Question

$(document).ready(function() {
  $('#myTable').DataTable();
});

var swiper = new Swiper('.swiper-container', {
  pagination: '.swiper-pagination',
  slidesPerView: 'auto',
  paginationClickable: true,
  spaceBetween: 0
});

// Initialize Swiper
var swiper = new Swiper(".mySwiper", {
  slidesPerView: 1,
  spaceBetween: 100,
  slidesPerGroup: 1,
  loop: false,
  loopFillGroupWithBlank: false,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-wrapper {
  padding-left: initial;
  margin: 0;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: transparent;
  padding: 7% 10%;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script src="//cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src = "https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>

<section>
  <div class="container py-5">
    <div class="table-responsive text-white">
      <table class="table table-striped text-center table-hover table-bordered" id="myTable">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Image</th>
            <th scope="col">Name</th>
            <th scope="col">Symbol</th>
            <th scope="col">Current Price</th>
            <th scope="col">1h</th>
            <th scope="col">24h</th>
            <th scope="col">Market Capital</th>
          </tr>
        </thead>
        <tbody id="myTable">
          {% for i in apidata1 %}

          <tr>
            <td style="color:rgb(218,165,32);">{{i.market_cap_rank}}</td>
            <td class="text-center"><img src="{{i.image}}"></td>
            <td>
              <h5 style="color: rgb(218,165,32);">{{i.name}}</h5>
            </td>
            <td style="color:rgb(218,165,32);">{{i.symbol}}</td>
            <td style="color:rgb(218,165,32);">{{i.current_price}}</td>
            <td style="color:rgb(218,165,32);">{{i.price_change_percentage_1h_in_currency | floatformat:3}} </td>
            <td style="color:rgb(218,165,32);">{{i.price_change_percentage_24h | floatformat:3}}</td>
            <td style="color:rgb(218,165,32);">{{i.market_cap}}</td>
          </tr>

          {% endfor %}

        </tbody>
      </table>
    </div>
  </div>
</section> {% endcomment %}
<div class="container">
  <div class="row medium-padding120">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <div class="mCustomScrollbar scrollable-responsive-table" data-mcs-theme="dark">


        <table class="pricing-tables-wrap-table-blurring">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Image</th>
              <th scope="col">Name</th>
              <th scope="col">Symbol</th>
              <th scope="col">Current Price</th>
              <th scope="col">1h</th>
              <th scope="col">24h</th>
              <th scope="col">Market Capital</th>
            </tr>
          </thead>
          <tbody id="myTable">

            {% for i in apidata%}


            <tr>
              <td style="color:rgb(218,165,32);">{{i.market_cap_rank}}</td>
              <td class="text-center"><img src="{{i.image}}" width="50" height="50"></td>
              <td>
                <h5 style="color: rgb(218,165,32);">{{i.name}}</h5>
              </td>
              <td style="color:rgb(218,165,32);">{{i.symbol}}</td>
              <td style="color:rgb(218,165,32);">{{i.current_price}}</td>
              <td style="color:rgb(218,165,32);">
                {% if i.price_change_percentage_1h_in_currency >= 0 %}
                <span style="color: green">{{i.price_change_percentage_1h_in_currency | floatformat:3}}
                                        {% else %}
                                        <span style="color: red">{{i.price_change_percentage_1h_in_currency | floatformat:3}}
                                        {% endif %}
                                            
                                        </span></td>
              <td style="color:rgb(218,165,32);">
                {% if i.price_change_percentage_24h >= 0 %}
                <span style="color: green">{{i.price_change_percentage_24h | floatformat:3}}
                                        {% else %}
                                        <span style="color: red">{{i.price_change_percentage_24h | floatformat:3}}
                                        {% endif %}
                                    
                                    </td>
                                    <td style="color:rgb(218,165,32);">{{i.market_cap}}</td>
                                </tr>
                                                             
                              {% endfor %}
    
                            </tbody>
                        </table>
                     
                    
                    
                  
                </div>
                </div>            
              </div>
            </div>
            <div class="swiper-container">
                <ul class="swiper-wrapper">
                    <li class="swiper-slide">Slide 1</li>
                    <li class="swiper-slide">Slide 2</li>
                    <li class="swiper-slide">Slide 3</li>
                    <li class="swiper-slide">Slide 4</li>
                    <li class="swiper-slide">Slide 5</li>
                    <li class="swiper-slide">Slide 6</li>
                    <li class="swiper-slide">Slide 7</li>
                    <li class="swiper-slide">Slide 8</li>
                    <li class="swiper-slide">Slide 9</li>
                    <li class="swiper-slide">Slide 10</li>
                </ul>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>

This is my code. All the slides appear on a single page instead of a slider. What could be the issue?

Answer 1

It seems that you've forgot to import also CSS that is required to render slides correctly.

Accordingly to https://swiperjs.com/get-started#use-swiper-from-cdn you need to put stylesheet link in <head> section of your page.

<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>

I've took your code and added missing CSS, so you can have a look:

$(document).ready(function() {
  $('#myTable').DataTable();
});

var swiper = new Swiper('.swiper-container', {
  pagination: '.swiper-pagination',
  slidesPerView: 'auto',
  paginationClickable: true,
  spaceBetween: 0
});

// Initialize Swiper
var swiper = new Swiper(".mySwiper", {
  slidesPerView: 1,
  spaceBetween: 100,
  slidesPerGroup: 1,
  loop: false,
  loopFillGroupWithBlank: false,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-wrapper {
  padding-left: initial;
  margin: 0;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: transparent;
  padding: 7% 10%;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script src="//cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src = "https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>

<section>
  <div class="container py-5">
    <div class="table-responsive text-white">
      <table class="table table-striped text-center table-hover table-bordered" id="myTable">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Image</th>
            <th scope="col">Name</th>
            <th scope="col">Symbol</th>
            <th scope="col">Current Price</th>
            <th scope="col">1h</th>
            <th scope="col">24h</th>
            <th scope="col">Market Capital</th>
          </tr>
        </thead>
        <tbody id="myTable">
          {% for i in apidata1 %}

          <tr>
            <td style="color:rgb(218,165,32);">{{i.market_cap_rank}}</td>
            <td class="text-center"><img src="{{i.image}}"></td>
            <td>
              <h5 style="color: rgb(218,165,32);">{{i.name}}</h5>
            </td>
            <td style="color:rgb(218,165,32);">{{i.symbol}}</td>
            <td style="color:rgb(218,165,32);">{{i.current_price}}</td>
            <td style="color:rgb(218,165,32);">{{i.price_change_percentage_1h_in_currency | floatformat:3}} </td>
            <td style="color:rgb(218,165,32);">{{i.price_change_percentage_24h | floatformat:3}}</td>
            <td style="color:rgb(218,165,32);">{{i.market_cap}}</td>
          </tr>

          {% endfor %}

        </tbody>
      </table>
    </div>
  </div>
</section> {% endcomment %}
<div class="container">
  <div class="row medium-padding120">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <div class="mCustomScrollbar scrollable-responsive-table" data-mcs-theme="dark">


        <table class="pricing-tables-wrap-table-blurring">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Image</th>
              <th scope="col">Name</th>
              <th scope="col">Symbol</th>
              <th scope="col">Current Price</th>
              <th scope="col">1h</th>
              <th scope="col">24h</th>
              <th scope="col">Market Capital</th>
            </tr>
          </thead>
          <tbody id="myTable">

            {% for i in apidata%}


            <tr>
              <td style="color:rgb(218,165,32);">{{i.market_cap_rank}}</td>
              <td class="text-center"><img src="{{i.image}}" width="50" height="50"></td>
              <td>
                <h5 style="color: rgb(218,165,32);">{{i.name}}</h5>
              </td>
              <td style="color:rgb(218,165,32);">{{i.symbol}}</td>
              <td style="color:rgb(218,165,32);">{{i.current_price}}</td>
              <td style="color:rgb(218,165,32);">
                {% if i.price_change_percentage_1h_in_currency >= 0 %}
                <span style="color: green">{{i.price_change_percentage_1h_in_currency | floatformat:3}}
                                        {% else %}
                                        <span style="color: red">{{i.price_change_percentage_1h_in_currency | floatformat:3}}
                                        {% endif %}
                                            
                                        </span></td>
              <td style="color:rgb(218,165,32);">
                {% if i.price_change_percentage_24h >= 0 %}
                <span style="color: green">{{i.price_change_percentage_24h | floatformat:3}}
                                        {% else %}
                                        <span style="color: red">{{i.price_change_percentage_24h | floatformat:3}}
                                        {% endif %}
                                    
                                    </td>
                                    <td style="color:rgb(218,165,32);">{{i.market_cap}}</td>
                                </tr>
                                                             
                              {% endfor %}
    
                            </tbody>
                        </table>
                     
                    
                    
                  
                </div>
                </div>            
              </div>
            </div>
            <div class="swiper-container">
                <ul class="swiper-wrapper">
                    <li class="swiper-slide">Slide 1</li>
                    <li class="swiper-slide">Slide 2</li>
                    <li class="swiper-slide">Slide 3</li>
                    <li class="swiper-slide">Slide 4</li>
                    <li class="swiper-slide">Slide 5</li>
                    <li class="swiper-slide">Slide 6</li>
                    <li class="swiper-slide">Slide 7</li>
                    <li class="swiper-slide">Slide 8</li>
                    <li class="swiper-slide">Slide 9</li>
                    <li class="swiper-slide">Slide 10</li>
                </ul>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>