index.html

---
layout: page
tags: home
---

<style>
* {box-sizing: border-box}
.mySlides {display: none}
img {vertical-align: middle}
.mySlides img {height: 600px}

/* Slideshow container */
.slideshow-container {
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-image: none;
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #0d0d0d;
  background-color: #f2f2f2;
  opacity: .7;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #0d0d0d;
  background-color: #f2f2f2;
  opacity: .7;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.slideshow-fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 450px) {
  .prev, .next,.text {font-size: 11px}
  .mySlides img {max-height: 300px}
}
</style>

<div class="home">
  <div class="slideshow-container">
    {% assign image_count = site.data.home_images | size %}
    {% for image in site.data.home_images %}
	  <div class="mySlides slideshow-fade">
	    <!--<div class="numbertext">1 / {{ image_count }}</div>-->
	    <img src="{{ site.baseurl }}/images/gallery/{{ image.filename }}" style="width:100%; height:600px; object-fit: contain;">
        {% if image.caption %}
	      <div class="text">{{ image.caption }}</div>
        {% endif %}
	  </div>
	{% endfor %}
	<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
	<a class="next" onclick="plusSlides(1)">&#10095;</a>
  </div>
  <div style="text-align:center">
	{% for i in (1..image_count) %}
	  <span class="dot" onclick="currentSlide({{ i }})"></span> 
	{% endfor %}
  </div>

  <!--
  <p style="padding-left:15px; padding-right:15px; text-align: justify; line-height: 1.6;">
    Mikgroup @ <a href="https://www.berkeley.edu/" target="_blank">UC Berkeley</a> develops advanced methods and technologies to expand the capabilities of MRI. Our mission is to utilize AI, computational imaging, and innovative hardware to make MRI faster, safer, and more informative. 
  </p>
  <p style="padding-left:15px; padding-right:15px; text-align: justify; line-height: 1.6;">
    We take a two-step approach to this challenge. First, we design new acquisition strategies, hardware components, phantoms, and implantable or wearable sensors that push the limits of what can be measured inside the scanner. Second, we address the resulting inverse problems with advanced reconstruction algorithms to transform raw measurements into sharper, higher-quality images. By uniting breakthroughs in acquisition, hardware, sensing, and computational reconstruction, we aim to redefine what MRI can achieve for science and medicine.
  </p>


  <h1 class="h3">Recent News</h1>
  <i style="font-size: 0.9em;">Check out our <a href="https://www.youtube.com/@uscliralab/">YouTube channel</a> for latest talks and supplementary videos for our publications.</i>
  <table class="news">
    {% for entry in site.data.news limit:5 %}
    <tr>
	  <td width="12%">
	    <b>{{ entry.date | date: site.date_format}}:</b>
	  </td>
	  <td width="88%">
	    {{ entry.content }}
	  </td>
	</tr>
	{% endfor %}
	<tr>
	  <td width="12%">
	    <a href="{{ site.baseurl }}/news/">See All</a>
	  </td>
	  <td width="88%"></td>
	</tr>
  </tbody>
  </table>
-->
</div>
<!--
{% if site.data.talks %}
<h1 class="h3">Talks</h1>
<div style="display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;">
{% for entry in site.data.talks %}
<div style="flex: 0 1 300px; margin-bottom: 20px;">
  <p class="data-content"><i>{{ entry.description }}</i></p>
  <div style="position: relative; width: 100%; padding-bottom: 56.25%; height: 0;"> 
    <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/embed/{{ entry.youtube_code }}?rel=0&hd=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>
{% endfor %}
</div>
{% endif %}
-->
<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}
</script>