bootstrap crousel

-

<html>

<head>

<!------ Include the above in your HEAD tag ---------->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<style>

.col-md-4{

  display: inline-block;

  margin-left:-10px;

}

.col-md-4 img{

  width:100%;

  height:auto;

}



body .carousel-control-prev-icon,

body .carousel-indicators li,

body .carousel-control-next-icon{

  background-color:#000;

}


span.carousel-control-prev-icon {

 position: relative;

 bottom: 40px;  

 right: 40px;

}


span.carousel-control-next-icon {

 position: relative;

 bottom: 40px;

}


</style>


</head>

<body>


<h1>Bootstrap 4 carousel with description</h1>

<div class="container">



  <div id="demo" class="carousel slide" data-ride="carousel">

  <!-- The slideshow -->

  <div class="carousel-inner no-padding my-5">

    <div class="carousel-item active">

      <div class="col-xs-4 col-sm-4 col-md-4">

       First

      </div>

      <div class="col-xs-4 col-sm-4 col-md-4">

        Second

      </div>

      <div class="col-xs-4 col-sm-4 col-md-4">

        Third

      </div>

    </div>

    <div class="carousel-item">

      <div class="col-xs-4 col-sm-4 col-md-4">

       Four

      </div>

      <div class="col-xs-4 col-sm-4 col-md-4">

        Five

      </div>

      <div class="col-xs-4 col-sm-4 col-md-4">

        Six

      </div>

    </div>

    </div>


  <!-- Left and right controls -->

  <a class="carousel-control-prev" href="#demo" data-slide="prev">

     <span class="carousel-control-prev-icon sp"></span>

                </a>

  <a class="carousel-control-next" href="#demo" data-slide="next">

                    <span class="carousel-control-next-icon sp"></span>

                </a>

</div>

</div>

</body>

</html>



Comments

Post a Comment

Popular posts from this blog

Websphere Commerce Data Load using CSV \Websphere Commerce Data Load using XML

-
Websphere Commerce Data Load using CSV \Websphere Commerce Data Load using XML Data can be loaded into WCS tables using data load utility. Data load utility works in the steps as mentioned below. 1.Data Reader The data reader reads the input file, and transforms the input into a data object. Data objects are typically map objects. Eg: CSV data reader \XML Data Reader 2.Business Object Builder The business object builder instantiates the business object and populates it from the data in the data object. Eg:The table object builder 3. Business Object Mediator The business object mediator converts the business object into physical object. The table object mediator is always used with the table object builder. Eg: table-based mediator 4. Data Writer The data writer writes the physical object into the database. This tutorial uses the default data writer to write the generated physical o...
Read more

Websphere Commerce Catalog Subsystem

-
  Websphere Commerce Catalog Subsystem The Catalog Subsystem contains all logic and data relevant to an online catalog, including catalog groups (or categories), catalog entries, and any associations or relationships among them.    Master Catalog It is the single catalog that contains all products, items, relationships, and standard prices for everything that is for sale in your store. Every store in the Web Sphere Commerce system must have a master catalog. It is possible to share the master catalog across stores. Master Catalog Restrictions 1)The master catalog must be a proper tree, which means that there are no cycles. e.g.The parent category "Women" has a subcategory "WomenDress". It is important that WomenDress and any of WomenDress's subcategories like tops,jeans etc are not the parent category of "Women" category. 2)A catalog entry or category cannot belong to multiple parent categories in the master...
Read more

Calculation Framework in Websphere Commerce.

-
  OrderCalculateCmd OrderCalculateCmd invokes the Promotion engine. PromotionEngineOrderCalculateCmdImpl implements OrderCalculateCmd class. OrderCalculateCmd is invoked when we add, delete, update or merge item/s in cart. This command calculates the order  total based on the sequence in which calculationUsageId is passed into the command. WebSphere Commerce provides the below predefined calculation usages: Calusage_id    Description -1                         Discount -2                         Shipping -3                         Sales Tax -4          ...
Read more