Multi item carousel bootstrap 4

Multi item carousel bootstrap 4
Multi item carousel bootstrap 4
Multi item carousel bootstrap 4

Hello friends today in this article we will learn how to create Multi item carousel bootstrap 4.

Here i will provide the complete source code of Multi item carousel in zip file free download.

HTML CODE

<div class="container">
	<div class="row">
		<div class="MultiCarousel" data-items="1,3,5,6" data-slide="1" id="MultiCarousel"  data-interval="1000">
            <div class="MultiCarousel-inner">
                <div class="item">
                    <div class="product">
                       <img src="product/1.jpeg" />
                       <p>Boys T-shirt <span>Rs.450</span></p>
                       <a href="#">Buy Now</a>
                    </div>
                </div>

                <div class="item">
                    <div class="product">
                       <img src="product/2.jpeg" />
                       <p>Boys T-shirt <span>Rs.450</span></p>
                       <a href="#">Buy Now</a>
                    </div>
                </div>

                <div class="item">
                    <div class="product">
                       <img src="product/3.jpeg" />
                       <p>Boys T-shirt <span>Rs.450</span></p>
                       <a href="#">Buy Now</a>
                    </div>
                </div>

                <div class="item">
                    <div class="product">
                       <img src="product/4.jpeg" />
                       <p>Boys T-shirt <span>Rs.450</span></p>
                       <a href="#">Buy Now</a>
                    </div>
                </div>

                <div class="item">
                    <div class="product">
                       <img src="product/5.jpeg" />
                       <p>Boys T-shirt <span>Rs.450</span></p>
                       <a href="#">Buy Now</a>
                    </div>
                </div>

                <div class="item">
                    <div class="product">
                       <img src="product/6.jpeg" />
                       <p>Boys T-shirt <span>Rs.450</span></p>
                       <a href="#">Buy Now</a>
                    </div>
                </div>

                <div class="item">
                    <div class="product">
                       <img src="product/7.jpeg" />
                       <p>Boys T-shirt <span>Rs.450</span></p>
                       <a href="#">Buy Now</a>
                    </div>
                </div>

                <div class="item">
                    <div class="product">
                       <img src="product/8.jpeg" />
                       <p>Boys T-shirt <span>Rs.450</span></p>
                       <a href="#">Buy Now</a>
                    </div>
                </div>

                
            </div>
            <button class="btn btn-primary leftLst"><</button>
            <button class="btn btn-primary rightLst">></button>
        </div>
	</div>
   </div>

CSS CODE

.MultiCarousel { float: left; overflow: hidden; padding: 15px; width: 100%; position:relative; }
.MultiCarousel .MultiCarousel-inner { transition: 1s ease all; float: left; }
.MultiCarousel .MultiCarousel-inner .item { float: left;}
.MultiCarousel .MultiCarousel-inner .item > div { text-align: left; margin:5px; background:#f2f2f2; color:#666;}
.MultiCarousel .leftLst, .MultiCarousel .rightLst { position:absolute; top:calc(50% - 20px); }
.MultiCarousel .leftLst { left:10px; font-size:15px; background:#333; }
.MultiCarousel .rightLst { right:10px; }
.MultiCarousel .leftLst.over, .MultiCarousel .rightLst.over { pointer-events: none; background:#f60; }

.product
{
    cursor:pointer;
    padding-bottom:7px;
}

.product img
{
  width:100%;
  height:130px;
  cursor:pointer;
}

.product p
{
    margin-top:5px;
    color:#333;
    padding-left:8px;
    font-weight:600;
    font-size:12px;
}

.product p span
{
    padding-left:40px;
    color:#f60;
}

.product a
{
    text-decoration:none;
    text-align:center;
    padding:5px;
    border-radius:5px;
    margin:0px auto;
    font-size:12px;
    background:#333;
    color:#fff;
    margin-left:8px;
}



@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and  only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) 
{
    
    .product img
    {
      width:100%;
      height:200px;
      cursor:pointer;
    }
}

Leave a Reply

avatar
  Subscribe  
Notify of