Pingendo Help Center

Transform a Carousel in a multi slider .. quick

if you need a slider you can transform quick an carousel into …

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"> --><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous" style="">
  <link rel="stylesheet" href="theme.css" type="text/css">
</head>

<body>
  <div class="py-5 px-0 mx">
    <div class="container-fluid mx-0">
      <div class="row">
        <div class="col-md-12 px-0">
          <div class="carousel slide" data-ride="carousel" id="carousel">
            <div class="carousel-inner">
              <div class="carousel-item  active">
                <div class="py-5 pi-draggable" draggable="true">
                  <div class="container">
                    <div class="row">
                      <div class="col-md-4 p-3"> <img class="img-fluid d-block" src="https://static.pingendo.com/cover-bubble-light.svg" width="1500">
                        <p class="mt-2 mb-0">1</p>
                      </div>
                      <div class="col-md-4 p-3"> <img class="img-fluid d-block" src="https://static.pingendo.com/cover-bubble-dark.svg" width="1500">
                        <p class="mt-2 mb-0">2</p>
                      </div>
                      <div class="col-md-4 p-3"> <img class="img-fluid d-block" src="https://static.pingendo.com/cover-bubble-dark.svg" width="1500">
                        <p class="mt-2 mb-0">3</p>
                      </div>
                    </div>
                  </div>
                </div>
                <img class="d-block img-fluid w-100 trpng"><!-- src="img/tr.png"-->
                <div class="carousel-caption">
                  <h5 class="m-0 text-dark text-primary">Pingento team</h5>
                  <p class="text-primary">saved my ass again</p>
                </div>
              </div>
              <div class="carousel-item">
                <div class="py-5 pi-draggable" draggable="true">
                  <div class="container">
                    <div class="row">
                      <div class="col-md-4 p-3"> <img class="img-fluid d-block" src="https://static.pingendo.com/cover-bubble-light.svg" width="1500">
                        <p class="mt-2 mb-0">4</p>
                      </div>
                      <div class="col-md-4 p-3"> <img class="img-fluid d-block" src="https://static.pingendo.com/cover-bubble-dark.svg" width="1500">
                        <p class="mt-2 mb-0">5</p>
                      </div>
                      <div class="col-md-4 p-3"> <img class="img-fluid d-block" src="https://static.pingendo.com/cover-bubble-dark.svg" width="1500">
                        <p class="mt-2 mb-0">6</p>
                      </div>
                    </div>
                  </div>
                </div>
                <img class="d-block img-fluid w-100 trpng">
                <div class="carousel-caption">
                  <h5 class="m-0 text-dark text-primary">To build an bootstrap based app I study the structures here</h5>
                  <p class="text-primary">..then i build from stuctures .php templates over my php framework ,I build</p>
                </div>
              </div>
              <div class="carousel-item">
                <div class="py-5 pi-draggable" draggable="true">
                  <div class="container">
                    <div class="row">
                      <div class="col-md-4 p-3"> <img class="img-fluid d-block" src="https://static.pingendo.com/cover-bubble-light.svg" width="1500">
                        <p class="mt-2 mb-0">7</p>
                      </div>
                      <div class="col-md-4 p-3"> <img class="img-fluid d-block" src="https://static.pingendo.com/cover-bubble-dark.svg" width="1500">
                        <p class="mt-2 mb-0">8</p>
                      </div>
                      <div class="col-md-4 p-3"> <img class="img-fluid d-block" src="https://static.pingendo.com/cover-bubble-dark.svg" width="1500">
                        <p class="mt-2 mb-0">9</p>
                      </div>
                    </div>
                  </div>
                </div>
                <img class="d-block img-fluid w-100 trpng">
                <div class="carousel-caption">
                  <h5 class="m-0 text-dark text-primary">Use this code as free you like</h5>
                  <p class="text-primary">and improve it by publishing here your experiment</p>
                </div>
              </div>
            </div> <a class="carousel-control-prev text-primary" href="#carousel" role="button" data-slide="prev">  <i class="fas fa-chevron-left text-danger shadow"></i> <span class="sr-only">Previous</span></a> <a class="carousel-control-next" href="#carousel" role="button" data-slide="next" > <i class="fas fa-chevron-right text-danger shadow"></i> <span class="sr-only">Next</span> </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <h1 class="display-4 pi-draggable text-center" draggable="true">Carousel to Multi slider , <b>a feedback to a good ideea.</b></h1>
  <style>
    .trpng {
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw1AUhU9TpSoVBztIUchQnSyIijhKFYtgobQVWnUweekfNGlIUlwcBdeCgz+LVQcXZ10dXAVB8AfExdVJ0UVKvC8ptIjxweV9nPfO4b77AKFRYarZNQGommWk4jExm1sVA6/oxQhVGGGJmXoivZiB5/q6h4/vd1Ge5X3vz9Wv5E0G+ETiOaYbFvEG8cympXPeJw6xkqQQnxOPG9Qg8SPXZZffOBcdFnhmyMik5olDxGKxg+UOZiVDJZ4mjiiqRvlC1mWF8xZntVJjrT75C4N5bSXNdaphxLGEBJIQIaOGMiqwEKVdI8VEis5jHv6w40+SSyZXGYwcC6hCheT4wf/g92zNwtSkmxSMAd0vtv0xCgR2gWbdtr+Pbbt5AvifgSut7a82gNlP0uttLXIEDGwDF9dtTd4DLneAoSddMiRH8lMJhQLwfkbflAMGb4G+NXdurXOcPgAZmtXyDXBwCIwVKXvd4909nXP7905rfj9/TnKs6mXgrQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAtJREFUCNdjYAACAAAFAAHiJgWbAAAAAElFTkSuQmCC');
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>
1 Like