Flexslider, responsive image slider/gallery ullCms

https://github.com/woothemes/FlexSlider
https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties

Supports fade instead of slide!

Flexible height, but all slides max height

  ul.slides {
    display: flex;
    flex-wrap: wrap;
  }
 
  li.slide {
    width: 100vw;
    flex-basis: 100vw;
  }

Setup with "keep aspect ratio" for simple image gallery and "circles" nav

Template:

<?php //optional, disables lazy loading for responive images with rimg.js ?>
<?php slot('html_head') ?>
  <script type="text/javascript">
    RimgOptions.disableLazyLoading = true;
  </script>
<?php end_slot() ?> 

<div id="gallery">

  <div class="flexslider">
    <ul class="slides">
    <?php $images = ullWidgetGalleryWrite::getImagesAsArray($doc['gallery']) ?>
    <?php foreach ($images as $image): ?>
      <li>
        <div class="slide_container" <?php echo ull_rimg_bg_attributes($image) ?>>
        </div>
      </li>
    <?php endforeach ?>
    </ul>
  </div>
  
</div>

<?php use_javascript('/ullCorePlugin/js/jq/jquery.flexslider-min.js') ?>

<script type="text/javascript">
  $(window).load(function() {

    $('.flexslider').flexslider({
      animation: "slide",
      slideshow: true,
      animationSpeed: 1500,
      slideshowSpeed: 3500,     
      controlNav: true,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
      directionNav: false,             //Boolean: Create navigation for previous/next navigation? (true/false)
      prevText: "<",                  //String: Set the text for the "previous" directionNav item
      nextText: ">",
      /* controlsContainer: ".flexslider", */  
    });
   
  });
</script>

css:

.flexslider {  
  position: relative;  
}

.flexslider ul.slides {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.flexslider ul.slides li {
  margin: 0;
  padding: 0;
}

.flexslider .slide_container {
  position: relative;
  width: 100%;   /* desired width */  
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top left;
}

.flexslider .slide_container:before {
  content: "";
  display: block;
  padding-top: 50%; /* 1:2 this is the aspect ratio of the images */
}


/* "circles" nav */

.flexslider ol.flex-control-nav  {
  list-style-type: none;
  text-align: center;
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: -16px;
  width: 100%;
}

.flexslider ol.flex-control-nav li  {
  display: inline-block;
  margin: 0 .3em 0 .3em;
  padding: 0;
}  

.flexslider ol.flex-control-nav li a {
  display: inline-block;
  background-image: url("/images/scrollable.png");
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  width: 14px;
  height: 14px;
  color: transparent;
}  

.flexslider ol.flex-control-nav li a.flex-active {
  background-image: url("/images/scrollable_hot.png");
}
 

Setup with "keep aspect ratio" and html content

Template:

<div class="fullwidthslider flexslider">
  <ul class="slides">
    <?php foreach ($slider_elements as $element): ?>
      <?php $element->refreshRelated('Translation') // TODO: Why is this necessary? ?>
      
      <li>
        <div class="slide_container" <?php echo ull_rimg_bg_attributes($element->image) ?>>
          <div class="slide_content_container">
            <div class="slide_content">
              <h2>
                <?php include_component('ullCms', 'editLink', array('doc' => $element)) ?>
                <?php include_component('ullCms', 'deleteLink', array('doc' => $element)) ?>
                <?php echo $element->title ?>
              </h2>
              
              <p>
                <?php echo nl2br($element->body, true); ?>
              </p>
              
              <?php if ($element->link): ?>
                <div class="ghostbutton">
                  <?php echo link_to($element->preview_image, $element->link) ?>
                </div>
              <?php endif ?>
            </div>      
          </div>
        </div>
      </li>
    <?php endforeach ?>
    
    <?php if ($allow_edit): ?>
      <li>
        <div class="slide_container">
            <?php echo link_to('<span class="ultra_big">+</span> ', 
              'ullCmsContentBlock/create?content_type=slider-element&parent_slug=homepage',
              'class=inline_create'
            ) ?>
        </div>
       </li>
    <?php endif ?>
  <!-- end of fullwidth slider -->  
  </ul>
</div>


<?php use_javascript('/ullCorePlugin/js/jq/jquery.flexslider-min.js') ?>

<script type="text/javascript">
  $(window).load(function() {

    $('.fullwidthslider').flexslider({
      animation: "slide",
      slideshow: false,
      controlNav: false,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
      directionNav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)
      prevText: "<",                  //String: Set the text for the "previous" directionNav item
      nextText: ">",
      /* controlsContainer: ".flexslider", */   
    });
    
  });
</script>

CSS:

/* Flexslider */
.flexslider {
  position: relative;
  overflow: hidden;
}

.flexslider ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.flexslider ul li {
  margin: 0;
  padding: 0;
}

.fullwidthslider ul.slides li {
  background-color: rgb(235,232,229);
  color: white;
}

.fullwidthslider .slide_container {
  position: relative;
  width: 100%;   /* desired width */  
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.fullwidthslider .slide_container:before {
  content: "";
  display: block;
  padding-top: 43%;  /* ratio of 2.33 */
}

.fullwidthslider .slide_content_container {
  position:  absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.fullwidthslider .slide_content {
  margin: 0 auto;
  max-width: 680px;
  /* padding: 0 96px; */
  text-align: center;  
}

.fullwidthslider h2 {
  font-family: 'ParryPro-NormalItalic';
  font-weight: normal;
  color: white;
  margin: 110px 0 0 0;
  font-size: 3.6rem;
  line-height: 1.1em;
}

.fullwidthslider p {
  font-size: 1.2rem;
  line-height: 1.9rem;
}

/* prev / next */

.fullwidthslider ul li,
.fullwidthslider ol li {
  list-style-type: none;
}

.fullwidthslider .flex-direction-nav a {
  cursor: pointer;
  display: block;
  height: 50px;
  margin: -25px 0 0 0; /* height / 2 for vertical centering */
  overflow: hidden;
  position: absolute;
  top: 50%;
  width: 50px;
  z-index: 10;
  color:rgba(255,255,255,0);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.fullwidthslider .flex-direction-nav .flex-prev {
  left: 30px;
  background-image: url("/images/arrow-white-left.png");
}

.fullwidthslider .flex-direction-nav .flex-next {
  right: 30px;
  background-image: url("/images/arrow-white-right.png");
}

@media (max-width: 960px) {
  .fullwidthslider .slide_content {
    padding: 5% 40px;
    max-width: 380px;
  }
  
  .fullwidthslider h2 {
    font-size: 2rem;
    line-height: 1em;
    margin: .7em 0 .2em 0;
  }
  
  .fullwidthslider p {
    font-size: 1rem;
    line-height: 1.3rem;
    margin: 0 0 1em 0;
  }
  
  .fullwidthslider .flex-direction-nav a {
    height: 26px;
    margin: -13px 0 0;
    top: 50%;
    width: 26px;
  }
  
  .fullwidthslider .flex-direction-nav .flex-prev {
    left: 15px;
  }
  
  .fullwidthslider .flex-direction-nav .flex-next {
    right: 15px;
  }  
}