Carrusel clickable

by Yolanda Robles

HTML

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
<script src="https://fonts.googleapis.com/css?family=Open+Sans"></script>

<div class="header">
  <img class="logo" src="https://pbs.twimg.com/profile_images/1278947116036108288/Sahln3wW_400x400.jpg" />
</div>
<div class="main">
<h1>
Declaración Envases de Servicio 2021
</h1>
</div>
<br/>
<div class="main">
<h2>
Catálogo de Envases
</h2>
<div id="carousel" class="carousel">
	<div class="carousel-inner">
		<img class="envase" src="https://www.envaselia.com/images_products/envase-pet-250ml-m2-cilindrico-transparente-24-410.jpg" alt="botella" title="botella" material="PLÁSTICO PET" peso="3.8" tarifa="0.045"/>
    <img class="envase" src="https://www.articuloshosteleria.com/articulos-hosteleria/fotos/envase-kraft-estanco-grande-197x139x89-1526031639.jpg" alt="" title="caja de carton"  material="PAPEL-CARTÓN" peso="3.5" tarifa="0.037"/>
    <img class="envase" src="https://www.articuloshosteleria.com/articulos-hosteleria/fotos/bandeja-cartn-en-plata-26x33-ll-10-1526012738.jpg" alt="" title="bandeja de aluminio" material="ALUMINIO" peso="2.8" tarifa="0.041"/>
    <img class="envase" src="https://www.articuloshosteleria.com/articulos-hosteleria/fotos/bolsa-asa-rizo-32x3321-hawana-1623698701.jpg" alt="" title="bolsa de papel" material="PAPEL-CARTÓN" peso="2." tarifa="0.017"/>
		<img class="envase" src="https://www.envaselia.com/images_products/tarro-especias-pet-1450ml-transparente.JPG" alt="" title="caja-carton"/>
    <img class="envase" src="https://www.articuloshosteleria.com/articulos-hosteleria/fotos/caja-pizza-30x30x6-en-micro-kraft-1526013631.jpg" alt="" title="caja-carton"/>
		<img class="envase" src="https://www.envaselia.com/images_products/envase-de-pet-100ml-b-l-cilindrico.jpg" alt="" title="caja-carton"/>
		<img class="envase" src="https://www.envaselia.com/images_products/envase-de-pet-50ml-m4-cilindrica-24-410-de-11-gr.JPG" alt="" title="caja-carton"/>
		<img...

CSS

body{
  background-color: #d4dbd3;
}

.header{
  height: 70px;
  background-color: #4f953f;
  margin-bottom: 30px;
}

.logo{
  width: 70px;
  margin-left: 20px;
}

.main{
  width: 600px;
  background-color: white;
  margin: 0 auto;
  padding-top: 30px;
  border: 1px solid rgba(44, 82, 35, .2);
  box-shadow: 10px 10px 5px #aaaaaa;
}

.carousel {
  width:400px;
  overflow:auto;
  margin:1em auto .7em;
}

.carousel,
.carousel-inner {
  height:100px;
}

.carousel img {
  width:100px;
  height:100px;
  background-color:#ccc;
  display:block;
  float:left;
  margin:0 5px;
}

.carousel-nav {
  text-align:center;
  margin:0 auto 1em;
}

.carousel-nav button {
  cursor:pointer;
}

.fas{
  cursor: pointer;
  font-size: 28px;
}

.carousel-button{
  margin:15px;
}

h1{
  text-align: center;
  font-weight: bold;
  font-size: 22px;
  margin-top: 10px;
  margin-bottom: 40px;
  font-family: "Open Sans", sans-serif;
  /*color: #425e3b;*/
  color: black;
}

h2{
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: "Open Sans", sans-serif;
}

.envase{
  cursor: pointer;
}

form{
  font-family: "Segoe UI", sans-serif;
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 300px;
  margin: 0 auto;
  margin-top: 40px;
  padding-bottom: 40px;
}

label{
  padding-right: 5px;
  width: 140px;
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

input{
  width: 180px;
}

.field{
  margin-bottom: 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 5px;
}

#envase-seleccionado, #material, #peso, #tarifa, #coste{
  pointer-events:none;
  background-color: #dedede;
}

.botones{
  display:flex;
  justify-content: center;
  width: 300px;
  margin:0 auto;
}

button{
  width: 100px;
  height: 30px;
  margin: 0 auto;
  margin-bottom: 30px;
  margin-top: -10px;
}

table{
  margin:0 auto;
  margin-bottom: 30px;
  width: 550px;
}

input.cntrlGrid{
 ...

JavaScript

(function($) {
	
  var $carousel = $('#carousel'),
		$container = $carousel.find('.carousel-inner'),
		$nav = $('#carousel-nav'),
		$img = $container.find('img'),
		totalWidth = ($img.outerWidth()+parseInt($img.css('margin-left'),10)+parseInt($img.css('margin-right'),10))*$img.length;
  
    
	$carousel.css('overflow', 'hidden'); // Singkirkan scroll bar jika JavaScript aktif
	$container.css('width', totalWidth); // Set lebar `.container` selebar => [jumlah gambar + lebar gambar + margin kiri dan kanan gambar]
  
  $nav.find('.fa-arrow-left').on("click", function() {
		$carousel.stop().animate({
			scrollLeft: "-=100px"
		}, 400);
	});
  
  $nav.find('.fa-arrow-right').on("click", function() {
		$carousel.stop().animate({
			scrollLeft: "+=100px"
		}, 400);
	});
  
  $img.on("click", function(e) {
  	$('#img').val($(this,'img').attr('src'));
    $('#envase-seleccionado').val($(this,'img').attr('title'));
    $('#material').val($(this,'img').attr('material'));
    $('#peso').val($(this,'img').attr('peso'));
    $('#tarifa').val($(this,'img').attr('tarifa'));
    $('#unidades').val(0);
    $('#unidades').change();
	});
  
// Add button Delete in row
$('tbody tr')
    .find('td')
    //.append('<input type="button" value="Delete" class="del"/>')
    .parent() //traversing to 'tr' Element
    .append('<td><a href="#" class="delrow">Eliminar</a></td>');

$('#btnLimpiar').on('click', function() {
		$('#img').val("");
    $('#envase-seleccionado').val("");
    $('#material').val("");
    $('#peso').val("");
    $('#tarifa').val("");
    $('#unidades').val("");
    $('#unidades').change();
});

 // Add row the table
$('#btnAddRow').on('click', function() {
    var lastRow = $('#tblAddRow tbody tr:last').html();
    //alert(lastRow);
    $('#tblAddRow tbody').append('<tr>' + lastRow + '</tr>');
    $('#tblAddRow tbody tr:last input').val('');
    
    $('#tblAddRow tbody tr:last input').each(function( index ) {
    
    	if (index==0){
 ...