Demos

Need some inspiration or just looking for more examples of how to use some of the more complex properties offered by Freighter? Check out some of these examples!

Submit Your Own as a GitHub Pull Request!

Album Art Showcase

About the Demo

Items are scrolling by one at a time, since Freighter's default scrollBy value of 1 is being used. Notice that the carousel items maintain their aspect ratios thanks to stretch-scale. We stop any 'snapping' back to the start of the list and allow for an infinite scroll with wrap-simple. Notice how the buttons change when you hover over them. Some additional CSS adds hover styles for each carousel item and its text, but each carousel item contains all of the elements that it needs directly inside of it (images and text in this case). A maximum width has been set on the container in order to prevent the carousel from getting too large.

Code for the Demo

<!-- HTML -->
      
<div id="demo-1-container">
  <div id="demo-1-carousel">
    <div class="d1-ci">
      <img src="demo-images/demo-1/crimson-king.jpeg" />
      <p class="light-bg">In the Court of the Crimson King</p>
    </div>
    <div class="d1-ci">
      <img src="demo-images/demo-1/sgt-peppers.webp" />
      <p class="dark-bg">Sgt. Pepper's Lonely Hearts Club Band</p>
    </div>
    <div class="d1-ci">
      <img src="demo-images/demo-1/whos-next.jpg" />
      <p class="dark-bg">Who's Next</p>
    </div>
    <div class="d1-ci">
      <img src="demo-images/demo-1/the-wall.jpg" />
      <p class="light-bg">The Wall</p>
    </div>
    <div class="d1-ci">
      <img src="demo-images/demo-1/saucerful-of-secrets.jpg" />
      <p class="dark-bg">A Saucerful of Secrets</p>
    </div>
  </div>
</div>
// JavaScript
                  
const demo1 = new Freighter(
  "demo-1-carousel", 
  "stretch-scale", 
  "wrap-simple", {
    numItemsVisible: 3,
    itemSpacing: 10,
    itemHeight: 1,
    itemWidth: 1,
    transitionDuration: 750,
    buttonStyles: {
      height: "30%",
      width: "35px",
      backgroundColor: "rgba(255, 255, 255, 0.75)",
      color: "rgba(0, 0, 0, 0.75)",
    },
    buttonHoverStyles: {
      backgroundColor: "rgba(255, 255, 255, 0.9)",
      color: "rgba(0, 0, 0, 0.9)",
      width: "38px",
    },
  }
);
/* CSS */
                
#demo-1-container {
  --transition-time: 200ms;
  padding: 0;
  margin: 0;
  max-width: 800px;
  margin: 0 auto;
}

.d1-ci {
  height: 100%;
  width: 100%;
  position: relative;
}

.d1-ci img {
  height: 100%;
  width: 100%;
  transition: filter var(--transition-time) ease-in-out;
}

.d1-ci p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  pointer-events: none;
  font-size: 1.75em;
  text-align: center;
  opacity: 0;
  font-style: italic;
  font-weight: bold;
  transition: opacity var(--transition-time) ease-in-out;
}

.d1-ci p.dark-bg {
  color: rgba(255, 255, 255, 0.85);
}

.d1-ci p.light-bg {
  color: rgba(0, 0, 0, 0.85);
}

.d1-ci img:hover {
  filter: blur(4px);
}

.d1-ci:hover p {
  opacity: 1;
}