<!-- this is the main flickity javascript library -->
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

<!-- this is an extra flickity library for fullscreen viewing -->
<script src="https://unpkg.com/flickity-fullscreen@1/fullscreen.js"></script>

<!-- this is the main flickity css external stylesheet -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

<!-- this is an extra flickity css stylesheet for fullscreen viewing -->
<link rel="stylesheet" href="https://unpkg.com/flickity-fullscreen@1/fullscreen.css">


<h1>Eugene Ahn</h1>

<h2>Aerial imagery</h2>

<!-- START code block for the example slideshow element -->
<div id=slideshowElement class="carousel" data-flickity="{ &quot;fullscreen&quot;: true,&quot;wrapAround&quot;: true }">

   <div class="carousel-cell">
      <img src=https://i.ibb.co/n8TmmfN/mojave.jpg style="width: 80%">
       <br>
         Mojave Desert, California 
    </div>
    <div class="carousel-cell">
      <img src=https://i.ibb.co/wp6F3vt/sedona.png style="width: 80%">
      <br>
  Sedona, Arizona
    </div>
    <div class="carousel-cell">
       <img src=https://i.ibb.co/fxK2HFD/dtla.png style="width: 80%">
      <br>
  Downtown Los Angeles
    </div>
    
</div>
<!-- END code block for the example slideshow element -->

h1
{
  text-align: center;
  font-family: arial;
  font-size: 3em;
  color: rgba(0,0,0,0.75);
  font-style: italic;
}
h2 {text-align: center;}

#slideshowElement
{
  background-color: none;
  /* to change the overall size and alignment of this carousel object, define appropriate css here. the carousel interface elements such as navigation buttons and bullets align based on the size and alignment of this element */
  border-radius: 30px;
}

.carousel-cell
{
  width: 100%; /* full width */
  height: 600px;
  background: #ccc;
  /* center images in cells with flexbox */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.carousel.is-fullscreen .carousel-cell
{
  height: 100%;
}

.carousel-cell img
{
  display: block;
  max-height: 100%;
}

/*

LEARNING HOW TO WORK WITH THE HTML5 CAROUSEL FLICKITY

This pen written and researched by Eugene Ahn codeyourheartout@gmail.com.

INTRODUCTION
- Everyone wants to design cool, interactive slideshow-style carousels.
- There are complicated approaches and there are less complicated approaches to implementing interactive slideshow-style carousels in your designs.
- Flickity is an example of an accessible approach to achieving this kind of functionality in your web designs.
- Flickity is an HTML5 API library. It achieves its functionality via a combination of JavaScript, CSS, and HTML. You implement the functionality by connecting your web design to the Flickity library, and then formatting your code to access Flickity functionality.
- The approach we explore to implement Flickity is the approach we can use to access many other kinds of libraries and frameworks available to us as designers and developers.

REFERENCE
- Flickity options: https://flickity.metafizzy.co/options.html#wraparound

*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.