Image Carousel / Slider

[Chem]

Hey @tim.young, you can do this with a List Component, an HTML component, and a bit of JavaScript.

To start I added the following List component on a details page which displays connected records that have an Image field.

Here is the HTML I’ve added to the list component
<p class="imageUrl">{Image}</p>

I then added the following HTML to the source code of a regular HTML component.
<div class="carousel">&nbsp;</div>

And finally, this is the JavaScript I’ve added to the page.

var flag = false;
function checkFlag() {
    if(flag === false) {
        if ($('.imageUrl').html() !== undefined) {
            flag = true;
        }
       window.setTimeout(checkFlag, 100);
    } else {
        $('.imageUrl').each(function(){
            var imageUrl = $(this).text();
            var carouselItem = '<a class="carousel-item" href="#!"><img src="'+imageUrl+'"></a>';
            $('.carousel').append(carouselItem);
        });
        $('.carousel').carousel();
    }
}
checkFlag();

[tim.young]

Ah man, this is great @Chem but my case is a bit different. The details page I’m looking to add this too is for Business Listings, and the images are uploaded to the Business Listing record so adding a list component isn’t going to apply here

[tim.young]

Here this might help.

[Chem]

Okay, I see now.

So you can do something very similar but you’ll need to change the HTML and JavaScript around a bit.

Here’s the HTML:

<div class="carousel">&nbsp;</div>
<p class="imageUrl">{Image 1}</p>
<p class="imageUrl">{Image 2}</p>
<p class="imageUrl">{Image 3}</p>
<p class="imageUrl">{Image 4}</p>

and here is the JavaScript:

var flag = false;
function checkFlag() {
    if(flag === false) {
        if ($('.imageUrl img').html() !== undefined) {
            flag = true;
        }
       window.setTimeout(checkFlag, 100);
    } else {
        $('.imageUrl').each(function(){
            var imageUrl = $(this).find('img').attr('src');
            var carouselItem = '<a class="carousel-item" href="#!"><img src="'+imageUrl+'"></a>';
            $('.carousel').append(carouselItem);
        });
        $('.carousel').carousel();
    }
}
checkFlag();

[tim.young]

I have it working, thanks @Chem!

Images are showing below the slider though. Might want to configure this with some other options from the component too, we’ll see. Maybe adding the indicators and making it so the image isn’t clickable.

[Rez]

Hey Tim, were you ever able to hide the images below? I’m interested in applying this carrousel to my app!

[tim.young]

Not yet, no.

I’m thinking I missed something in @Chem’s explanation.

[Rez]

I couldn’t make it work either!

[tim.young]

I was able to hide those bottom “source” images by adding this to the details page…probably not the best solution but it works.

#x_element_page_43_9 > p {
    display:none;
}

[Chem]

Hey Everyone.

I forgot to mention a really important part that Tim obviously figured out but I want to mention in case anyone else is attempting this.

You’ll need to import the materializecss library in the Custom Header/Footer Code section of your app.

Custom Header Code

<style>
.carousel {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 400px;
  -webkit-perspective: 500px;
          perspective: 500px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: 0% 50%;
          transform-origin: 0% 50%;
}

.carousel.carousel-slider {
  top: 0;
  left: 0;
}

.carousel.carousel-slider .carousel-fixed-item {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 1;
}

.carousel.carousel-slider .carousel-fixed-item.with-indicators {
  bottom: 68px;
}

.carousel.carousel-slider .carousel-item {
  width: 100%;
  height: 100%;
  min-height: 400px;
  position: absolute;
  top: 0;
  left: 0;
}

.carousel.carousel-slider .carousel-item h2 {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
}

.carousel.carousel-slider .carousel-item p {
  font-size: 15px;
}

.carousel .carousel-item {
  visibility: hidden;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
}

.carousel .carousel-item > img {
  width: 100%;
}

.carousel .indicators {
  position: absolute;
  text-align: center;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
}

.carousel .indicators .indicator-item {
  display: inline-block;
  position: relative;
  cursor: pointer;
  height: 8px;
  width: 8px;
  margin: 24px 4px;
  background-color: rgba(255, 255, 255, 0.5);
  -webkit-transition: background-color .3s;
  transition: background-color .3s;
  border-radius: 50%;
}

.carousel .indicators .indicator-item.active {
  background-color: #fff;
}

.carousel.scrolling .carousel-item .materialboxed,
.carousel .carousel-item:not(.active) .materialboxed {
  pointer-events: none;
}
</style>

Custom Footer Code
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

[Chem]

Here’s an example of using the full-width option with captions.

HTML Component

<div class="carousel carousel-slider center">&nbsp;</div>
<p class="imageUrl">{Image 1}<span class="caption">{Caption 1}</span></p>
<p class="imageUrl">{Image 2}<span class="caption">{Caption 2}</span></p>
<p class="imageUrl">{Image 3}<span class="caption">{Caption 3}</span></p>
<p class="imageUrl">{Image 4}<span class="caption">{Caption 4}</span></p>

CSS

.carousel-item{
    background-repeat: no-repeat;
    background-size: cover;
}
.carousel-item h2{
    color:white;
}

JavaScript

var flag = false;
function checkFlag() {
    if(flag === false) {
        if ($('.imageUrl img').html() !== undefined) {
            flag = true;
        }
       window.setTimeout(checkFlag, 100);
    } else {
        $('.imageUrl').each(function(){
            var imageUrl = $(this).find('img').attr('src');
            var caption = $(this).find('.caption').text();
            var carouselItem = '<div class="carousel-item" href="#!" style="background-image: url('+imageUrl+');"><h2>'+caption+'</h2></div>';
            if (imageUrl){
                $('.carousel').append(carouselItem);
            }
        });
        $('.carousel').carousel({
            fullWidth: true,
            indicators: true
        });
    }
}
checkFlag();

[tim.young]

Adding some additional stuff here…

The captions was a request that I had for Chem. The app fields are setup like this:

I added the following CSS to give the captions a background, added some padding, and made the background fit the text length.

.carousel-item h2 {
    background-color: rgba(0,0,0, 0.5);
    position: absolute;
    top: 15px;
    padding: 0 15px;
}

[tim.young]

@Chem

Sorry buddy, I have one more thing to help finalize this slider. If the user does not upload any images, the slider appears as a blank space on the page.

What additions can be made to the JS that would hide the entire slider if has no images at all?