KevinVergara (Talk | contribs) |
KevinVergara (Talk | contribs) |
||
Line 13: | Line 13: | ||
border-radius:30px | border-radius:30px | ||
} | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | .hide-bullets { | ||
+ | list-style:none; | ||
+ | margin-left: -40px; | ||
+ | margin-top:20px; | ||
+ | } | ||
+ | |||
+ | .thumbnail { | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | .carousel-inner>.item>img, .carousel-inner>.item>a>img { | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
</style> | </style> | ||
<script> | <script> | ||
Line 33: | Line 69: | ||
} | } | ||
</script> | </script> | ||
+ | |||
+ | |||
+ | |||
<body> | <body> | ||
<div class="container" style="background:transparent; margin-top:150px"> | <div class="container" style="background:transparent; margin-top:150px"> | ||
Line 77: | Line 116: | ||
<button class="w3-button w3-display-right" onclick="plusDivs(+1)">❯</button> | <button class="w3-button w3-display-right" onclick="plusDivs(+1)">❯</button> | ||
<br> | <br> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <div class="container"> | ||
+ | <div id="main_area"> | ||
+ | <!-- Slider --> | ||
+ | <div class="row"> | ||
+ | <div class="col-sm-6" id="slider-thumbs"> | ||
+ | <!-- Bottom switcher of slider --> | ||
+ | <ul class="hide-bullets"> | ||
+ | <li class="col-sm-3"> | ||
+ | <a class="thumbnail" id="carousel-selector-0"> | ||
+ | <img src="http://placehold.it/150x150&text=zero"> | ||
+ | </a> | ||
+ | </li> | ||
+ | |||
+ | <li class="col-sm-3"> | ||
+ | <a class="thumbnail" id="carousel-selector-1"><img src="http://placehold.it/150x150&text=1"></a> | ||
+ | </li> | ||
+ | |||
+ | <li class="col-sm-3"> | ||
+ | <a class="thumbnail" id="carousel-selector-2"><img src="http://placehold.it/150x150&text=2"></a> | ||
+ | </li> | ||
+ | |||
+ | <li class="col-sm-3"> | ||
+ | <a class="thumbnail" id="carousel-selector-3"><img src="http://placehold.it/150x150&text=3"></a> | ||
+ | </li> | ||
+ | |||
+ | <li class="col-sm-3"> | ||
+ | <a class="thumbnail" id="carousel-selector-4"><img src="http://placehold.it/150x150&text=4"></a> | ||
+ | </li> | ||
+ | |||
+ | <li class="col-sm-3"> | ||
+ | <a class="thumbnail" id="carousel-selector-5"><img src="http://placehold.it/150x150&text=5"></a> | ||
+ | </li> | ||
+ | <li class="col-sm-3"> | ||
+ | <a class="thumbnail" id="carousel-selector-6"><img src="http://placehold.it/150x150&text=6"></a> | ||
+ | </li> | ||
+ | |||
+ | <li class="col-sm-3"> | ||
+ | <a class="thumbnail" id="carousel-selector-7"><img src="http://placehold.it/150x150&text=7"></a> | ||
+ | </li> | ||
+ | |||
+ | <li class="col-sm-3"> | ||
+ | <a class="thumbnail" id="carousel-selector-8"><img src="http://placehold.it/150x150&text=8"></a> | ||
+ | </li> | ||
+ | |||
+ | <li class="col-sm-3"> | ||
+ | <a class="thumbnail" id="carousel-selector-9"><img src="http://placehold.it/150x150&text=9"></a> | ||
+ | </li> | ||
+ | <li class="col-sm-3"> | ||
+ | <a class="thumbnail" id="carousel-selector-10"><img src="http://placehold.it/150x150&text=10"></a> | ||
+ | </li> | ||
+ | |||
+ | <li class="col-sm-3"> | ||
+ | <a class="thumbnail" id="carousel-selector-11"><img src="http://placehold.it/150x150&text=11"></a> | ||
+ | </li> | ||
+ | |||
+ | <li class="col-sm-3"> | ||
+ | <a class="thumbnail" id="carousel-selector-12"><img src="http://placehold.it/150x150&text=12"></a> | ||
+ | </li> | ||
+ | |||
+ | <li class="col-sm-3"> | ||
+ | <a class="thumbnail" id="carousel-selector-13"><img src="http://placehold.it/150x150&text=13"></a> | ||
+ | </li> | ||
+ | <li class="col-sm-3"> | ||
+ | <a class="thumbnail" id="carousel-selector-14"><img src="http://placehold.it/150x150&text=14"></a> | ||
+ | </li> | ||
+ | |||
+ | <li class="col-sm-3"> | ||
+ | <a class="thumbnail" id="carousel-selector-15"><img src="http://placehold.it/150x150&text=15"></a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div class="col-sm-6"> | ||
+ | <div class="col-xs-12" id="slider"> | ||
+ | <!-- Top part of the slider --> | ||
+ | <div class="row"> | ||
+ | <div class="col-sm-12" id="carousel-bounding-box"> | ||
+ | <div class="carousel slide" id="myCarousel"> | ||
+ | <!-- Carousel items --> | ||
+ | <div class="carousel-inner"> | ||
+ | <div class="active item" data-slide-number="0"> | ||
+ | <img src="http://placehold.it/470x480&text=zero"></div> | ||
+ | |||
+ | <div class="item" data-slide-number="1"> | ||
+ | <img src="http://placehold.it/470x480&text=1"></div> | ||
+ | |||
+ | <div class="item" data-slide-number="2"> | ||
+ | <img src="http://placehold.it/470x480&text=2"></div> | ||
+ | |||
+ | <div class="item" data-slide-number="3"> | ||
+ | <img src="http://placehold.it/470x480&text=3"></div> | ||
+ | |||
+ | <div class="item" data-slide-number="4"> | ||
+ | <img src="http://placehold.it/470x480&text=4"></div> | ||
+ | |||
+ | <div class="item" data-slide-number="5"> | ||
+ | <img src="http://placehold.it/470x480&text=5"></div> | ||
+ | |||
+ | <div class="item" data-slide-number="6"> | ||
+ | <img src="http://placehold.it/470x480&text=6"></div> | ||
+ | |||
+ | <div class="item" data-slide-number="7"> | ||
+ | <img src="http://placehold.it/470x480&text=7"></div> | ||
+ | |||
+ | <div class="item" data-slide-number="8"> | ||
+ | <img src="http://placehold.it/470x480&text=8"></div> | ||
+ | |||
+ | <div class="item" data-slide-number="9"> | ||
+ | <img src="http://placehold.it/470x480&text=9"></div> | ||
+ | |||
+ | <div class="item" data-slide-number="10"> | ||
+ | <img src="http://placehold.it/470x480&text=10"></div> | ||
+ | |||
+ | <div class="item" data-slide-number="11"> | ||
+ | <img src="http://placehold.it/470x480&text=11"></div> | ||
+ | |||
+ | <div class="item" data-slide-number="12"> | ||
+ | <img src="http://placehold.it/470x480&text=12"></div> | ||
+ | |||
+ | <div class="item" data-slide-number="13"> | ||
+ | <img src="http://placehold.it/470x480&text=13"></div> | ||
+ | |||
+ | <div class="item" data-slide-number="14"> | ||
+ | <img src="http://placehold.it/470x480&text=14"></div> | ||
+ | |||
+ | <div class="item" data-slide-number="15"> | ||
+ | <img src="http://placehold.it/470x480&text=15"></div> | ||
+ | </div> | ||
+ | <!-- Carousel nav --> | ||
+ | <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> | ||
+ | <span class="glyphicon glyphicon-chevron-left"></span> | ||
+ | </a> | ||
+ | <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> | ||
+ | <span class="glyphicon glyphicon-chevron-right"></span> | ||
+ | </a> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--/Slider--> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <script> | ||
+ | jQuery(document).ready(function($) { | ||
+ | |||
+ | $('#myCarousel').carousel({ | ||
+ | interval: 5000 | ||
+ | }); | ||
+ | |||
+ | //Handles the carousel thumbnails | ||
+ | $('[id^=carousel-selector-]').click(function () { | ||
+ | var id_selector = $(this).attr("id"); | ||
+ | try { | ||
+ | var id = /-(\d+)$/.exec(id_selector)[1]; | ||
+ | console.log(id_selector, id); | ||
+ | jQuery('#myCarousel').carousel(parseInt(id)); | ||
+ | } catch (e) { | ||
+ | console.log('Regex failed!', e); | ||
+ | } | ||
+ | }); | ||
+ | // When the carousel slides, auto update the text | ||
+ | $('#myCarousel').on('slid.bs.carousel', function (e) { | ||
+ | var id = $('.item.active').data('slide-number'); | ||
+ | $('#carousel-text').html($('#slide-content-'+id).html()); | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
Revision as of 10:17, 20 October 2017
Team Members
- Student Members
- Cesar Aguilar, Chemical Engineering
- Romina Corro, Biotechnology Engineering
- Mikael Espinoza, Common Plan Engineering
- Rocío Gomez, Biotechnology Engineering
- Camila Huaracán, Industrial Design
- Nicolás Montalva, Molecular Biotechnology Engineering
- Javiera Pino, Biotechnology Engineering
- Sofía Romero, Molecular Biotechnology Engineering
- Nicolás Salas, Biotechnology Engineering
- Juan Saavedra, Molecular Biotechnology Engineering
- Sebastián Ulloa, Industrial Engineering
- Denisse Urra, Chemical Engineering
- Kevin Vergara, Biotechnology Engineering