<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 href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="cart-wrap">
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="main-heading">Shopping Cart</div>
<div class="table-cart">
<table>
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Total</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="display-flex align-center">
<div class="img-product">
<img src="https://www.91-img.com/pictures/laptops/asus/asus-x552cl-sx019d-core-i3-3rd-gen-4-gb-500-gb-dos-1-gb-61721-large-1.jpg" alt="" class="mCS_img_loaded">
</div>
<div class="name-product">
Apple iPad Mini
<br>G2356
</div>
<div class="price">
$1,250.00
</div>
</div>
</td>
<td class="product-count">
<form action="#" class="count-inlineflex">
<div class="qtyminus">-</div>
<input type="text" name="quantity" value="1" class="qty">
<div class="qtyplus">+</div>
</form>
</td>
<td>
<div class="total">
$6,250.00
</div>
</td>
<td>
<a href="#" title="">
<img src="images/icons/delete.png" alt="" class="mCS_img_loaded">
</a>
</td>
</tr>
<tr>
<td>
<div class="display-flex align-center">
<div class="img-product">
<img src="https://www.91-img.com/pictures/laptops/asus/asus-x552cl-sx019d-core-i3-3rd-gen-4-gb-500-gb-dos-1-gb-61721-large-1.jpg" alt="" class="mCS_img_loaded">
</div>
<div class="name-product">
Apple iPad Mini
<br>G2356
</div>
<div class="price">
$1,250.00
</div>
</div>
</td>
<td class="product-count">
<form action="#" class="count-inlineflex">
<div class="qtyminus">-</div>
<input type="text" name="quantity" value="1" class="qty">
<div class="qtyplus">+</div>
</form>
</td>
<td>
<div class="total">
$6,250.00
</div>
</td>
<td>
<a href="#" title="">
<img src="images/icons/delete.png" alt="" class="mCS_img_loaded">
</a>
</td>
</tr>
</tbody>
</table>
<div class="coupon-box">
<form action="#" method="get" accept-charset="utf-8">
<div class="coupon-input">
<input type="text" name="coupon code" placeholder="Coupon Code">
<button type="submit" class="round-black-btn">Apply Coupon</button>
</div>
</form>
</div>
</div>
<!-- /.table-cart -->
</div>
<!-- /.col-lg-8 -->
<div class="col-lg-4">
<div class="cart-totals">
<h3>Cart Totals</h3>
<form action="#" method="get" accept-charset="utf-8">
<table>
<tbody>
<tr>
<td>Subtotal</td>
<td class="subtotal">$2,589.00</td>
</tr>
<tr>
<td>Shipping</td>
<td class="free-shipping">Free Shipping</td>
</tr>
<tr class="total-row">
<td>Total</td>
<td class="price-total">$1,591.00</td>
</tr>
</tbody>
</table>
<div class="btn-cart-totals">
<a href="#" class="update round-black-btn" title="">Update Cart</a>
<a href="#" class="checkout round-black-btn" title="">Proceed to Checkout</a>
</div>
<!-- /.btn-cart-totals -->
</form>
<!-- /form -->
</div>
<!-- /.cart-totals -->
</div>
<!-- /.col-lg-4 -->
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity=" sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
.cart-wrap {
padding: 40px 0;
font-family: 'Open Sans', sans-serif;
}
.main-heading {
font-size: 19px;
margin-bottom: 20px;
}
.table-cart table {
width: 100%;
}
.table-cart thead {
border-bottom: 1px solid #e5e5e5;
margin-bottom: 5px;
}
.table-cart thead tr th {
padding: 8px 0 18px;
color: #484848;
font-size: 15px;
font-weight: 400;
}
.table-cart tr td {
padding: 40px 0 27px;
vertical-align: middle;
}
.table-cart tr td:nth-child(1) {
width: 52%;
}
.table-cart tr td:nth-child(2) {
width: 26%;
}
.table-cart tr td:nth-child(3) {
width: 13.333%;
}
.table-cart tr td:nth-child(4) {
width: 8.667%;
text-align: right;
}
.table-cart tr td .img-product {
width: 72px;
float: left;
margin-left: 8px;
margin-right: 31px;
line-height: 63px;
}
.table-cart tr td .img-product img {
width: 100%;
}
.table-cart tr td .name-product {
font-size: 15px;
color: #484848;
padding-top: 8px;
line-height: 24px;
width: 50%;
}
.table-cart tr td .price {
text-align: right;
line-height: 64px;
margin-right: 40px;
color: #989898;
font-size: 16px;
font-family: 'Nunito';
}
.table-cart tr td .quanlity {
position: relative;
}
.product-count .qtyminus,
.product-count .qtyplus {
width: 34px;
height: 34px;
background: transparent;
text-align: center;
font-size: 19px;
line-height: 34px;
color: #000;
cursor: pointer;
font-weight: 600;
}
.product-count .qtyminus {
line-height: 32px;
}
.product-count .qtyminus {
border-radius: 3px 0 0 3px;
}
.product-count .qtyplus {
border-radius: 0 3px 3px 0;
}
.product-count .qty {
width: 60px;
text-align: center;
border: none;
}
.count-inlineflex {
display: inline-flex;
border: solid 2px #ccc;
border-radius: 20px;
}
.total {
font-size: 24px;
font-weight: 600;
color: #8660e9;
}
.display-flex {
display: flex;
}
.align-center {
align-items: center;
}
.coupon-box {
padding: 63px 0 58px;
text-align: center;
border: 2px dotted #e5e5e5;
border-radius: 10px;
margin-top: 55px;
}
.coupon-box form input {
display: inline-block;
width: 264px;
margin-right: 13px;
height: 44px;
border-radius: 25px;
border: solid 2px #cccccc;
padding: 5px 15px;
font-size: 14px;
}
input:focus {
outline: none;
box-shadow: none;
}
.round-black-btn {
border-radius: 25px;
background: #212529;
color: #fff;
padding: 8px 35px;
display: inline-block;
border: solid 2px #212529;
transition: all 0.5s ease-in-out 0s;
cursor: pointer;
}
.round-black-btn:hover,
.round-black-btn:focus {
background: transparent;
color: #212529;
text-decoration: none;
}
.cart-totals {
border-radius: 3px;
background: #e7e7e7;
padding: 25px;
}
.cart-totals h3 {
font-size: 19px;
color: #3c3c3c;
letter-spacing: 1px;
font-weight: 500;
}
.cart-totals table {
width: 100%;
}
.cart-totals table tr th,
.cart-totals table tr td {
width: 50%;
padding: 3px 0;
vertical-align: middle;
}
.cart-totals table tr td:last-child {
text-align: right;
}
.cart-totals table tr td.subtotal {
font-size: 20px;
color: #6f6f6f;
}
.cart-totals table tr td.free-shipping {
font-size: 14px;
color: #6f6f6f;
}
.cart-totals table tr.total-row td {
padding-top: 25px;
}
.cart-totals table tr td.price-total {
font-size: 24px;
font-weight: 600;
color: #8660e9;
}
.btn-cart-totals {
text-align: center;
margin-top: 60px;
margin-bottom: 20px;
}
.btn-cart-totals .round-black-btn {
margin: 10px 0;
}
$(document).ready(function() {
var slider = $("#slider");
var thumb = $("#thumb");
var slidesPerPage = 4; //globaly define number of elements per page
var syncedSecondary = true;
slider.owlCarousel({
items: 1,
slideSpeed: 2000,
nav: false,
autoplay: false,
dots: false,
loop: true,
responsiveRefreshRate: 200
}).on('changed.owl.carousel', syncPosition);
thumb
.on('initialized.owl.carousel', function() {
thumb.find(".owl-item").eq(0).addClass("current");
})
.owlCarousel({
items: slidesPerPage,
dots: false,
nav: true,
item: 4,
smartSpeed: 200,
slideSpeed: 500,
slideBy: slidesPerPage,
navText: ['<svg width="18px" height="18px" viewBox="0 0 11 20"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/></svg>', '<svg width="25px" height="25px" viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>'],
responsiveRefreshRate: 100
}).on('changed.owl.carousel', syncPosition2);
function syncPosition(el) {
var count = el.item.count - 1;
var current = Math.round(el.item.index - (el.item.count / 2) - .5);
if (current < 0) {
current = count;
}
if (current > count) {
current = 0;
}
thumb
.find(".owl-item")
.removeClass("current")
.eq(current)
.addClass("current");
var onscreen = thumb.find('.owl-item.active').length - 1;
var start = thumb.find('.owl-item.active').first().index();
var end = thumb.find('.owl-item.active').last().index();
if (current > end) {
thumb.data('owl.carousel').to(current, 100, true);
}
if (current < start) {
thumb.data('owl.carousel').to(current - onscreen, 100, true);
}
}
function syncPosition2(el) {
if (syncedSecondary) {
var number = el.item.index;
slider.data('owl.carousel').to(number, 100, true);
}
}
thumb.on("click", ".owl-item", function(e) {
e.preventDefault();
var number = $(this).index();
slider.data('owl.carousel').to(number, 300, true);
});
$(".qtyminus").on("click",function(){
var now = $(".qty").val();
if ($.isNumeric(now)){
if (parseInt(now) -1> 0)
{ now--;}
$(".qty").val(now);
}
})
$(".qtyplus").on("click",function(){
var now = $(".qty").val();
if ($.isNumeric(now)){
$(".qty").val(parseInt(now)+1);
}
});
});
