travis johnson commented on WILL PAY! Need help centering 2000px carousel on the radiance theme

Here's the solution for anyone trying to center a carousel on the Radiance theme that's 2000px wide and a set height all the time. Obvious adjustments will need to be made for carousels and slides that are different dimensions, but this is a great starting point that will save you a TON of time:

HTML (Added to carousel.liquid file):

{% if settings.show_carousel %}<div id="carousel-wrapper"><div id="carousel"> <!-- <a style="display: none;" id="carousel-prev" class="prev browse left" title="Previous slide"><span class="arrow ir">Next</span></a><a style="display: none;" id="carousel-next" class="next browse right" title="Next slide"><span class="arrow ir">Previous</span></a> -->              <ol class="items">
        {% if settings.show_carousel_item_1 %}<li><a href="{{ settings.carousel_item_1_link }}" style="background: url({{ 'carousel-item-1.jpg' | asset_url }}) top center no-repeat; display: block; width: 100%; height: 430px;"></a></li>
        {% endif %}
        {% if settings.show_carousel_item_2 %}<li><a href="{{ settings.carousel_item_2_link }}" style="background: url({{ 'carousel-item-2.jpg' | asset_url }}) top center no-repeat; display: block; width: 100%; height: 430px;"></a></li>
        {% endif %}
        {% if settings.show_carousel_item_3 %}<li><a href="{{ settings.carousel_item_3_link }}" style="background: url({{ 'carousel-item-3.jpg' | asset_url }}) top center no-repeat; display: block; width: 100%; height: 430px;"></a></li>
        {% endif %}
        {% if settings.show_carousel_item_4 %}<li><a href="{{ settings.carousel_item_4_link }}" style="background: url({{ 'carousel-item-4.jpg' | asset_url }}) top center no-repeat; display: block; width: 100%; height: 430px;"></a></li>
        {% endif %}
        {% if settings.show_carousel_item_5 %}<li><a href="{{ settings.carousel_item_5_link }}" style="background: url({{ 'carousel-item-5.jpg' | asset_url }}) top center no-repeat; display: block; width: 100%; height: 430px;"></a></li>
        {% endif %}
        {% if settings.show_carousel_item_6 %}<li><a href="{{ settings.carousel_item_6_link }}" style="background: url({{ 'carousel-item-6.jpg' | asset_url }}) top center no-repeat; display: block; width: 100%; height: 430px;"></a></li>
        {% endif %}                                  </ol>  </div>
    {% if settings.show_carousel_dots %}<div id="carousel-slide-menu"></div>
    {% endif %}</div>
{% endif %}

CSS (Added to styles.css.liquid file):

/**
 * Homepage Carousel
 */

#carousel-wrapper{ 
  margin: -8px 0 45px 0;
}

#carousel{
  height: {{ settings.carousel_height }}px;
  width: 100%;
  position: relative;
  z-index: 50;
  overflow: hidden;
}
#carousel p,
#carousel li{
  margin: 0;
}

#carousel .items{
  margin: 0 auto;
  padding: 0;
  width: 12000px;
  position: absolute;
  z-index: 1;
}

#carousel .items li{
  height: {{ settings.carousel_height }}px;
  width: 2000px; /* Must stay 2000px */
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
}

#carousel .items img { 
  max-width: 100%;
} /* I was on the fence about adding this line in, but hope it will do some good */

#carousel .items div {
  width: 100% !important;
  height: 430px;
  overflow: hidden;
}
#carousel .items #slide1 {
  width: 100% !important;
  background: url('{{ 'carousel-item-1.jpg' | asset_url }}') center center no-repeat;
}

#carousel-controls{ margin-top: 10px; }


#carousel .browse{
  width: 20px;
  height: 100%;
  background: {{ settings.carousel_button_colour }};
  position: absolute;
  z-index: 100;
  cursor: pointer;
  opacity: .9;
  display: none;
  }
#carousel-next{
  top: 0;
  right: 0;
  }
#carousel-prev{
  top: 0;
  left: 0;
  }

#carousel .arrow{
  display: block;
  position: absolute;
  top: 46%;
  }
#carousel-next .arrow{
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid {{ settings.carousel_arrow_colour }};
  left: 5px;
  }
#carousel-prev .arrow{
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right:10px solid {{ settings.carousel_arrow_colour }};
  right: 5px;
  }

#carousel .browse:hover { 
  background: {{ settings.carousel_button_hover_colour }}; 
}
#carousel-next:hover .arrow { 
  border-left-color: {{ settings.carousel_arrow_hover_colour }}; 
}
#carousel-prev:hover .arrow { 
  border-right-color: {{ settings.carousel_arrow_hover_colour }}; 
}

#carousel-slide-menu {
  list-style-type:none; 
  text-align: center;
  margin-top: -30px;
  position: relative;
  z-index: 51;
}
#carousel-slide-menu li {
  width:14px; 
  height:14px; 
  border-radius:7px; 
  background: {{ settings.carousel_dots_colour }}; display:inline-block; margin: 0 5px;
  cursor: pointer;
}
#carousel-slide-menu .active {
  background:{{ settings.carousel_dots_active_colour }};
}

Extra Javascript (Added to the bottom of the theme.liquid file):

<script>
  var delay = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();
  $(document).ready(function(){
    $(window).resize(function(){
      delay(function(){
        if($(window).width() < 2000)
        {
          $("#carousel li").width($(window).width());
          $("#carousel").scrollable().seekTo($("#carousel").scrollable().getIndex());
        }
      }, 500);
    });
    $(window).ready(function(){
      delay(function(){
        if($(window).width() < 2000)
        {
          $("#carousel li").width($(window).width());
          $("#carousel").scrollable().seekTo($("#carousel").scrollable().getIndex());
        }
      }, 500);
    });

  });
  </script>