<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/glider-js/1.7.8/glider.min.css" integrity="sha512-YM6sLXVMZqkCspZoZeIPGXrhD9wxlxEF7MzniuvegURqrTGV2xTfqq1v9FJnczH+5OGFl5V78RgHZGaK34ylVg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/glider-js/1.7.8/glider.min.js" integrity="sha512-AZURF+lGBgrV0WM7dsCFwaQEltUV5964wxMv+TSzbb6G1/Poa9sFxaCed8l8CcFRTiP7FsCgCyOm/kf1LARyxA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link href="./glider files/glider.min.css" rel="stylesheet">
<div class="container">
<!-- item slider start-->
<section class="i-slider">
<!-- <div class="justify-content-between"> -->
<!-- <h3 class="i-head">Item Slider</h3> -->
<!-- btns -->
<div class="slider-bttn row align-items-center">
<h3 class="i-head col">Item Slider</h3>
<div class="slider-bttn col" style="margin-top: 0px;">
<button aria-label="Previous" class="glider-prev"><span></span></button>
<button aria-label="Next" class="glider-next"><span></span></button>
</div>
</div>
<!-- </div> -->
<div class="glider-contain">
<div class="glider">
<!-- box -->
<div class="i-box">
<!-- image-contain -->
<div class="i-image-container">
<div class="i-img">
<a href="#">
<img
src="https://www.cnet.com/a/img/resize/55db7f6ca0339706e5b5979f107957dc5b5b6b54/hub/2019/11/20/30249379-ef0c-4bbd-a441-05a465623b81/apple-iphone-11-iphone-11-pro-promo.jpg?auto=webp&fit=crop&height=1200&width=1200"
alt="">
</a>
</div>
</div>
<!-- Item Text -->
<div class="i-box-text">
<!-- catagory -->
<div class="product-caregory">
<span>Mobile</span>
</div>
<!-- Title -->
<a href="#" class="item-title">
Iphone 11 pro
</a>
<!-- price -->
<div class="price-buy">
<span class="i-price">1200$</span>
<a href="#" class="i-buy-btn">Buy Now</a>
</div>
</div>
</div>
<!-- box -->
<div class="i-box">
<!-- image-contain -->
<div class="i-image-container">
<div class="i-img">
<a href="#">
<img
src="https://www.cnet.com/a/img/resize/55db7f6ca0339706e5b5979f107957dc5b5b6b54/hub/2019/11/20/30249379-ef0c-4bbd-a441-05a465623b81/apple-iphone-11-iphone-11-pro-promo.jpg?auto=webp&fit=crop&height=1200&width=1200"
alt="">
</a>
</div>
</div>
<!-- Item Text -->
<div class="i-box-text">
<!-- catagory -->
<div class="product-caregory">
<span>Mobile</span>
</div>
<!-- Title -->
<a href="#" class="item-title">
Iphone 11 pro
</a>
<!-- price -->
<div class="price-buy">
<span class="i-price">1200$</span>
<a href="#" class="i-buy-btn">Buy Now</a>
</div>
</div>
</div>
<!-- box -->
<div class="i-box">
<!-- image-contain -->
<div class="i-image-container">
<div class="i-img">
<a href="#">
<img
src="https://www.cnet.com/a/img/resize/55db7f6ca0339706e5b5979f107957dc5b5b6b54/hub/2019/11/20/30249379-ef0c-4bbd-a441-05a465623b81/apple-iphone-11-iphone-11-pro-promo.jpg?auto=webp&fit=crop&height=1200&width=1200"
alt="">
</a>
</div>
</div>
<!-- Item Text -->
<div class="i-box-text">
<!-- catagory -->
<div class="product-caregory">
<span>Mobile</span>
</div>
<!-- Title -->
<a href="#" class="item-title">
Iphone 11 pro
</a>
<!-- price -->
<div class="price-buy">
<span class="i-price">1200$</span>
<a href="#" class="i-buy-btn">Buy Now</a>
</div>
</div>
</div>
<!-- box -->
<div class="i-box">
<!-- image-contain -->
<div class="i-image-container">
<div class="i-img">
<a href="#">
<img
src="https://www.cnet.com/a/img/resize/55db7f6ca0339706e5b5979f107957dc5b5b6b54/hub/2019/11/20/30249379-ef0c-4bbd-a441-05a465623b81/apple-iphone-11-iphone-11-pro-promo.jpg?auto=webp&fit=crop&height=1200&width=1200"
alt="">
</a>
</div>
</div>
<!-- Item Text -->
<div class="i-box-text">
<!-- catagory -->
<div class="product-caregory">
<span>Mobile</span>
</div>
<!-- Title -->
<a href="#" class="item-title">
Iphone 11 pro
</a>
<!-- price -->
<div class="price-buy">
<span class="i-price">1200$</span>
<a href="#" class="i-buy-btn">Buy Now</a>
</div>
</div>
</div>
<!-- box -->
<div class="i-box">
<!-- image-contain -->
<div class="i-image-container">
<div class="i-img">
<a href="#">
<img
src="https://www.cnet.com/a/img/resize/55db7f6ca0339706e5b5979f107957dc5b5b6b54/hub/2019/11/20/30249379-ef0c-4bbd-a441-05a465623b81/apple-iphone-11-iphone-11-pro-promo.jpg?auto=webp&fit=crop&height=1200&width=1200"
alt="">
</a>
</div>
</div>
<!-- Item Text -->
<div class="i-box-text">
<!-- catagory -->
<div class="product-caregory">
<span>Mobile</span>
</div>
<!-- Title -->
<a href="#" class="item-title">
Iphone 11 pro
</a>
<!-- price -->
<div class="price-buy">
<span class="i-price">1200$</span>
<a href="#" class="i-buy-btn">Buy Now</a>
</div>
</div>
</div>
<!-- box -->
<div class="i-box">
<!-- image-contain -->
<div class="i-image-container">
<div class="i-img">
<a href="#">
<img
src="https://www.cnet.com/a/img/resize/55db7f6ca0339706e5b5979f107957dc5b5b6b54/hub/2019/11/20/30249379-ef0c-4bbd-a441-05a465623b81/apple-iphone-11-iphone-11-pro-promo.jpg?auto=webp&fit=crop&height=1200&width=1200"
alt="">
</a>
</div>
</div>
<!-- Item Text -->
<div class="i-box-text">
<!-- catagory -->
<div class="product-caregory">
<span>Mobile</span>
</div>
<!-- Title -->
<a href="#" class="item-title">
Iphone 11 pro
</a>
<!-- price -->
<div class="price-buy">
<span class="i-price">1200$</span>
<a href="#" class="i-buy-btn">Buy Now</a>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="./glider files/glider.min.js"></script>
<script>
new Glider(document.querySelector('.glider'), {
slidesToScroll: 1,
slidesToShow: 4,
draggable: true,
dots: '.dots',
arrows: {
prev: '.glider-prev',
next: '.glider-next'
},
responsive: [
{
// screens greater than >= 775px
breakpoint: 1200,
settings: {
// Set to `auto` and provide item width to adjust to viewport
slidesToShow: 4,
slidesToScroll: 2,
}
}, {
// screens greater than >= 1024px
breakpoint: 900,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
}
}, {
// screens greater than >= 1024px
breakpoint: 640,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
}
}, {
// screens greater than >= 1024px
breakpoint: 304,
settings: {
slidesToShow: 1.5,
slidesToScroll: 1,
}
}, {
// screens greater than >= 1024px
breakpoint: 0,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
}
}
]
});
</script>
<!-- item slider end -->
.i-slider{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 50px auto;
width: 95%;
}
.i-box{
display: flex;
flex-direction: column;
width: 300px;
padding: 16px;
border: 1px solid black;
border-radius: 10px;
margin: 0 10px;
}
.i-image-container{
width: 100%;
height: 100%;
display: flex;
overflow: hidden;
}
.i-img a,
.i-img{
width: auto;
height: 300px;
object-position: center;
object-fit: contain;
}
.i-box-text{
margin-top: 5px;
width: 100%;
}
.item-category{
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}
.item-category span{
color: wheat;
font-size: 0.9rem;
margin: 5px 0px;
}
.item-title{
color:#444;
font-weight: 600;
text-decoration: none;
transition: all ease 0.3s;
}
.price-buy{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 8px;
}
.price-buy .i-price{
font-size: 1.3rem;
color: black;
font-weight: 700;
}
.price-buy .i-buy-btn{
color: #fe302f;
margin: 0px 6px;
font-weight: 600;
}
.price-buy .i-buy-btn:hover{
text-decoration: underline;
}
.slider-bttn{
display: flex;
justify-content: flex-end;
width: 100%;
margin: 30px auto 10px auto;
padding: 0px 10px;
}
.slider-bttn button{
position: static !important;
transform: translate(0,0);
background-color: #ccc;
width: 80px;
height: 35px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
border: 1px solid cornsilk;
border-radius: 4px;
}
.slider-bttn button span{
font-weight: bold;
padding: 10px 15px 10px 10px;
position: relative;
text-decoration: none;
}
.slider-bttn button span::before,
.slider-bttn button span::after{
border-right: 2px solid;
display: block;
height: 8px;
margin-top: -6px;
position: absolute;
transform: rotate(135deg);
right: 10px;
top: 50%;
width: 0;
content: '';
}
.slider-bttn button span::after{
margin-top: -1px;
transform: rotate(45deg);
}
.slider-bttn .glider-prev span{
transform: rotate(-180deg);
}
@media (max-width:500px) {
.i-box{
margin: 0px 10px;
}
.i-slider{
width: 100%;
}
/* .i-head{
text-align: center;
font-size: 1.3rem;
display: flex;
} */
.i-img a,
.i-img{
height: 200px;
}
.price-buy .i-price{
font-size: 1.1rem;
}
}
@media(max-width:320px){
.i-img a,
.i-img{
height:190px;}
.slider-bttn{
padding: 0;
}
}
