How to make a text-only slide in bootstrap [closed]

closed . This question needs details or to be clearer and is not currently accepting answers.

Want to improve this question? Add details and make it clearer what problem is being solved by editing this post .

Closed 11 months ago .

improve this question

I would like this element to turn slider, but I just want the text and image that way, I can't do insert the description of the image here

Ta getting like this: insert the description of the image here

CSS 

.carousel-title{
  margin-top: 1%;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 20px;
  color: #f8f8f8;
  transition: color .26s ease-in-out;
}
.carousel-text{
  margin-top: 2%;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 15px;
  color: #f8f8f8;
  transition: color .26s ease-in-out;
  text-align: justify;
}
.product-slide{
background: url(../image/background-page.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 20px 0px;
  }
  <!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Overlay menu</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
  <link rel="stylesheet" href="assets/menu.css">
  <link rel="stylesheet" type="text/css" href="assets/style.css">
  <link href="https://fonts.googleapis.com/css?family=Pacifico|Source+Sans+Pro:200i&display=swap" rel="stylesheet">
</head>
Author: Lu Shang, 2020-03-05
Source

1 answers

Just follow the default bootstrap carousel code getbootstrap.com/docs/4.0/components/carousel and put an image and the text inside the <div class="carousel-item"> being that in the image vc puts the Class float-left to it to the left of the text 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<style>
  
</style>
</head>
<body class="bg-primary">
  
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="float-left mr-4" src="https://unsplash.it/50/200" alt="First slide">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam iste amet alias maxime molestias provident ducimus perferendis dignissimos corrupti! Possimus, quasi! Sequi rerum asperiores tempore, consequatur at aperiam molestias in?</p>
      </div>
      <div class="carousel-item">
        <img class="float-left mr-4" src="https://unsplash.it/55/200" alt="First slide">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam iste amet alias maxime molestias provident ducimus perferendis dignissimos corrupti! Possimus, quasi! Sequi rerum asperiores tempore, consequatur at aperiam molestias in?</p>
      </div>
      <div class="carousel-item">
        <img class="float-left mr-4" src="https://unsplash.it/60/200" alt="First slide">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam iste amet alias maxime molestias provident ducimus perferendis dignissimos corrupti! Possimus, quasi! Sequi rerum asperiores tempore, consequatur at aperiam molestias in?</p>
      </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>
 0
Author: hugocsl, 2020-03-05 16:56:48