<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="//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/2.2.4/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section>
<div class="container">
<div class="row bg-pprimary">
<div class="col-md-12">
<section>
<div class="container">
<div class="row bg-pprimary">
<div class="col-md-12">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card profile-card-2 h-100">
<div class="card-body pt-5">
<h5 class="card-title">Aceite de Oliva Virgen Extra - Ayala [Aceites]</h5>
<p class="card-text">Envase: botella de cristal de 500ml. Pack minimo: 12 botellas</p>
<div class="row card-content">
<div class="col-md-6 card-text">Precio</div>
<div class="col-md-6 card-text">Servicios</div>
</div>
<div class="row card-content">
<div class="col-md-6 card-text">Precio España 2.10</div>
<div class="col-md-6">
<input type="checkbox" id="refrigerado" name="refrigerado" value="eefrigerado"/>
<label class="card-text" for="refrigerado">Refrigerado</label><br>
</div>
</div>
<div class="row card-content">
<div class="col-md-6 card-text">Precio Vzla 2.98</div>
<div class="col-md-6">
<input type="checkbox" id="envio-extra" name="envio-extra" value="envio-extra">
<label class="card-text" for="envio-extra">Otras ciudades</label><br>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card profile-card-2 h-100">
<div class="card-body pt-5">
<h5 class="card-title">Añadir al Pedido</h5>
<div class="row card-text">
<select id="unit" name="unit">
<option value="" selected>Seleccione unidad de Pedido</option>
<option value="PackMinimo">Pack Minimo</option>
<option value="Pallet">Pallet</option>
</select>
<!--label for="unit">Unidad de pedido</label-->
</div>
<div class="row card-content">
<input class="card-text" type="input" id="uPedido" name="uPedido" placeholder="1"/>
<label for="uPedido" class="card-text">Unidades</label><br>
</div>
<div class="row card-content">
<p class="card-text">Total</p>
</div>
<div class="row card-content">
<input class="card-text" type="input" id="precio" name="precio" value="132" readonly/>
<label for="precio" class="card-text">Euros</label><br>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div></div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="container">
<div class="row bg-light">
<div class="col-md-6">
<h5 class="card-title">Aceite de Oliva Virgen Extra - Ayala [Aceites]</h5>
<p class="card-text">Envase: botella de cristal de 500ml. Pack minimo: 12 botellas</p>
<div class="row card-content">
<div class="col-md-6 card-text">Precio</div>
<div class="col-md-6 card-text">Servicios</div>
</div>
<div class="row card-content">
<div class="col-md-6 card-text">Precio España 2.10</div>
<div class="col-md-6">
<input type="checkbox" id="refrigerado" name="refrigerado" value="eefrigerado"/>
<label class="card-text" for="refrigerado">Refrigerado</label><br>
</div>
</div>
<div class="row card-content">
<div class="col-md-6 card-text">Precio Vzla 2.98</div>
<div class="col-md-6">
<input type="checkbox" id="envio-extra" name="envio-extra" value="envio-extra">
<label class="card-text" for="envio-extra">Otras ciudades</label><br>
</div>
</div>
</div>
<div class="col-md-4">
<h5 class="card-title">Añadir al Pedido</h5>
<div class="row card-text">
<select id="unit" name="unit">
<option value="" selected>Seleccione unidad de Pedido</option>
<option value="PackMinimo">Pack Minimo</option>
<option value="Pallet">Pallet</option>
</select>
<!--label for="unit">Unidad de pedido</label-->
</div>
<div class="row card-content">
<input class="card-text" type="input" id="uPedido" name="uPedido" placeholder="1"/>
<label for="uPedido" class="card-text">Unidades</label><br>
</div>
<div class="row card-content">
<p class="card-text">Total</p>
</div>
<div class="row card-content">
<input class="card-text" type="input" id="precio" name="precio" value="132" readonly/>
<label for="precio" class="card-text">Euros</label><br>
</div>
</div>
</div>
</div>
</div></div></div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="container">
<div class="row bg-secondary">
<div class="col-md-6">
<h5 class="card-title">Aceite de Oliva Virgen Extra - Ayala [Aceites]</h5>
<p class="card-text">Envase: botella de cristal de 500ml. Pack minimo: 12 botellas</p>
<div class="row card-content">
<div class="col-md-6 card-text">Precio</div>
<div class="col-md-6 card-text">Servicios</div>
</div>
<div class="row card-content">
<div class="col-md-6 card-text">Precio España 2.10</div>
<div class="col-md-6">
<input type="checkbox" id="refrigerado" name="refrigerado" value="eefrigerado"/>
<label class="card-text" for="refrigerado">Refrigerado</label><br>
</div>
</div>
<div class="row card-content">
<div class="col-md-6 card-text">Precio Vzla 2.98</div>
<div class="col-md-6">
<input type="checkbox" id="envio-extra" name="envio-extra" value="envio-extra">
<label class="card-text" for="envio-extra">Otras ciudades</label><br>
</div>
</div>
</div>
<div class="col-md-4">
<h5 class="card-title">Añadir al Pedido</h5>
<div class="row card-text">
<select id="unit" name="unit">
<option value="" selected>Seleccione unidad de Pedido</option>
<option value="PackMinimo">Pack Minimo</option>
<option value="Pallet">Pallet</option>
</select>
<!--label for="unit">Unidad de pedido</label-->
</div>
<div class="row card-content">
<input class="card-text" type="input" id="uPedido" name="uPedido" placeholder="1"/>
<label for="uPedido" class="card-text">Unidades</label><br>
</div>
<div class="row card-content">
<p class="card-text">Total</p>
</div>
<div class="row card-content">
<input class="card-text" type="input" id="precio" name="precio" value="132" readonly/>
<label for="precio" class="card-text">Euros</label><br>
</div>
</div>
</div>
</div>
</div></div></div>
</section>
</div></div></div></section>
body{
font-family: 'Open Sans', sans-serif;
}
*:hover{
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
section{
float:left;
width:100%;
background: #fff; /* fallback for old browsers */
padding:30px 0;
}
h1{float:left; width:100%; color:#232323; margin-bottom:30px; font-size: 14px;}
h1 span{font-family: 'Libre Baskerville', serif; display:block; font-size:45px; text-transform:none; margin-bottom:20px; margin-top:30px; font-weight:700}
h1 a{color:#131313; font-weight:bold;}
/*Profile card 2*/
.profile-card-2 .card-img-block{
float:left;
width:100%;
height:150px;
overflow:hidden;
}
.profile-card-2 .card-body{
position:relative;
}
.profile-card-2 .profile {
border-radius: 50%;
position: absolute;
top: -42px;
left: 15%;
max-width: 75px;
border: 3px solid rgba(255, 255, 255, 1);
-webkit-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
}
.profile-card-2 h5{
font-weight:600;
color:#6ab04c;
}
.profile-card-2 .card-text{
font-weight:300;
font-size:15px;
}
.profile-card-2 .icon-block{
float:left;
width:100%;
}
.profile-card-2 .icon-block a{
text-decoration:none;
}
.profile-card-2 i {
display: inline-block;
font-size: 16px;
color: #6ab04c;
text-align: center;
border: 1px solid #6ab04c;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
margin:0 5px;
}
.profile-card-2 i:hover {
background-color:#6ab04c;
color:#fff;
}
.profile-card-2 .background-block .background {
width:100%;
vertical-align: top;
opacity: 0.9;
-webkit-filter: blur(0.5px);
filter: blur(0.5px);
-webkit-transform: scale(1.8);
transform: scale(2.8);
}
.profile-card-2 .card-content {
width: 100%;
padding: 15px 25px;
color:#232323;
float:left;
background:#efefef;
height:50%;
border-radius:0 0 5px 5px;
position: relative;
z-index: 9999;
}
$(document).ready(function () {
var itemsMainDiv = ('.MultiCarousel');
var itemsDiv = ('.MultiCarousel-inner');
var itemWidth = "";
$('.leftLst, .rightLst').click(function () {
var condition = $(this).hasClass("leftLst");
if (condition)
click(0, this);
else
click(1, this)
});
ResCarouselSize();
$(window).resize(function () {
ResCarouselSize();
});
//this function define the size of the items
function ResCarouselSize() {
var incno = 0;
var dataItems = ("data-items");
var itemClass = ('.item');
var id = 0;
var btnParentSb = '';
var itemsSplit = '';
var sampwidth = $(itemsMainDiv).width();
var bodyWidth = $('body').width();
$(itemsDiv).each(function () {
id = id + 1;
var itemNumbers = $(this).find(itemClass).length;
btnParentSb = $(this).parent().attr(dataItems);
itemsSplit = btnParentSb.split(',');
$(this).parent().attr("id", "MultiCarousel" + id);
if (bodyWidth >= 1200) {
incno = itemsSplit[3];
itemWidth = sampwidth / incno;
}
else if (bodyWidth >= 992) {
incno = itemsSplit[2];
itemWidth = sampwidth / incno;
}
else if (bodyWidth >= 768) {
incno = itemsSplit[1];
itemWidth = sampwidth / incno;
}
else {
incno = itemsSplit[0];
itemWidth = sampwidth / incno;
}
$(this).css({ 'transform': 'translateX(0px)', 'width': itemWidth * itemNumbers });
$(this).find(itemClass).each(function () {
$(this).outerWidth(itemWidth);
});
$(".leftLst").addClass("over");
$(".rightLst").removeClass("over");
});
}
//this function used to move the items
function ResCarousel(e, el, s) {
var leftBtn = ('.leftLst');
var rightBtn = ('.rightLst');
var translateXval = '';
var divStyle = $(el + ' ' + itemsDiv).css('transform');
var values = divStyle.match(/-?[\d\.]+/g);
var xds = Math.abs(values[4]);
if (e == 0) {
translateXval = parseInt(xds) - parseInt(itemWidth * s);
$(el + ' ' + rightBtn).removeClass("over");
if (translateXval <= itemWidth / 2) {
translateXval = 0;
$(el + ' ' + leftBtn).addClass("over");
}
}
else if (e == 1) {
var itemsCondition = $(el).find(itemsDiv).width() - $(el).width();
translateXval = parseInt(xds) + parseInt(itemWidth * s);
$(el + ' ' + leftBtn).removeClass("over");
if (translateXval >= itemsCondition - itemWidth / 2) {
translateXval = itemsCondition;
$(el + ' ' + rightBtn).addClass("over");
}
}
$(el + ' ' + itemsDiv).css('transform', 'translateX(' + -translateXval + 'px)');
}
//It is used to get some elements from btn
function click(ell, ee) {
var Parent = "#" + $(ee).parent().attr("id");
var slide = $(Parent).attr("data-slide");
ResCarousel(ell, Parent, slide);
}
});
