Slider/Carousel not working

Help
1

Hello,

I have implemented Slider

2022-12-04-blog-post.yml

carousels:
  - images:
    - image: /assets/img/property-1-1.jpg
    - image: /assets/img/property-1-2.jpg
    - image: /assets/img/property-1-3.jpg
    - image: /assets/img/property-1-4.jpg

This is my _includes/carousel.html

{% assign letterstring = "a,b,c,d,e,f,g,h,i,j,k,l,m,n" %}
{% assign letters = letterstring | split: ',' %}
{% assign number = include.number | minus: 1 %}
{% assign post = site.posts %}
<div class="carousel__holder">
    <div id="carousel{{ number }}" class="carousel">
        {% for item in post.carousels[number].images %}
          <input class="carousel__activator" type="radio" name="carousel{{ number }}" id="{{ number }}{{ letters[forloop.index0] }}" {% if forloop.first %}checked="checked"{% endif %} />
        {% endfor %}
        {% for item in post.carousels[number].images %}
          {% if forloop.index == forloop.length %}
            {{ first }}{% assign nextindex = 0 %}
          {% else %}
            {% assign nextindex = forloop.index0 | plus: 1 %}
          {% endif %}
          {% assign nextletter = letters[nextindex] %}
          {% if forloop.index0 == 0 %}
            {% assign previndex = forloop.length | minus: 1 %}
          {% else %}
            {% assign previndex = forloop.index0 | minus: 1 %}
          {% endif %}
          {% assign prevletter = letters[previndex] %}
          <div class="carousel__controls">
              <label class="carousel__control carousel__control--backward" for="{{ number }}{{ prevletter }}"></label>
              <label class="carousel__control carousel__control--forward" for="{{ number }}{{ nextletter }}"></label>
          </div>
        {% endfor %}
        <div class="carousel__track">
          <ul>
            {% for item in post.carousels[number].images %}
            <li class="carousel__slide" style="background-image: url('{{ item.image }}');"></li>
            {% endfor %}
          </ul>
        </div>
        <div class="carousel__indicators">
            {% for item in post.carousels[number].images %}
              <label class="carousel__indicator" for="{{ number }}{{ letters[forloop.index0] }}"></label>
            {% endfor %}
        </div>
    </div>
</div>

<style>
.carousel__holder {width: 100%; position: relative; padding-bottom: 50%; margin: 1rem 0 1rem;}
.carousel {
  height: 100%;
  width: 100%;
  overflow: hidden;
  text-align: center;
  position: absolute;
  padding: 0;
}
.carousel__controls,
.carousel__activator {
  display: none;
}
{% for item in post.carousels[number].images %}
.carousel__activator:nth-of-type({{ forloop.index }}):checked ~ .carousel__track {
  -webkit-transform: translateX(-{{ forloop.index0 }}00%);
          transform: translateX(-{{ forloop.index0 }}00%);
}
.carousel__activator:nth-of-type({{ forloop.index }}):checked ~ .carousel__slide:nth-of-type({{ forloop.index }}) {
  transition: opacity 0.5s, -webkit-transform 0.5s;
  transition: opacity 0.5s, transform 0.5s;
  transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s;
  top: 0;
  left: 0;
  right: 0;
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.carousel__activator:nth-of-type({{ forloop.index }}):checked ~ .carousel__controls:nth-of-type({{ forloop.index }}) {
  display: block;
  opacity: 1;
}
.carousel__activator:nth-of-type({{ forloop.index }}):checked ~ .carousel__indicators .carousel__indicator:nth-of-type({{ forloop.index }}) {
  opacity: 1;
}
{% endfor %}

.carousel__control {
  height: 30px;
  width: 30px;
  margin-top: -15px;
  top: 50%;
  position: absolute;
  display: block;
  cursor: pointer;
  border-width: 5px 5px 0 0;
  border-style: solid;
  border-color: #fafafa;
  opacity: 0.35;
  opacity: 1;
  outline: 0;
  z-index: 3;
}
.carousel__control:hover {
  opacity: 1;
}
.carousel__control--backward {
  left: 20px;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}
.carousel__control--forward {
  right: 20px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.carousel__indicators {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
}
.carousel__indicator {
  height: 15px;
  width: 15px;
  border-radius: 100%;
  display: inline-block;
  z-index: 2;
  cursor: pointer;
  opacity: 0.35;
  margin: 0 2.5px 0 2.5px;
}
.carousel__indicator:hover {
  opacity: 0.75;
}
.carousel__track {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0;
  margin: 0;
  transition: -webkit-transform 0.5s ease 0s;
  transition: transform 0.5s ease 0s;
  transition: transform 0.5s ease 0s, -webkit-transform 0.5s ease 0s;
}
.carousel__track .carousel__slide {
  display: block;
  top: 0;
  left: 0;
  right: 0;
  opacity: 1;
}
{% for item in post.carousels[number].images %}
.carousel__track .carousel__slide:nth-of-type({{ forloop.index }}) {
  -webkit-transform: translateX({{ forloop.index0 }}00%);
          transform: translateX({{ forloop.index0 }}00%);
}
{% endfor %}

.carousel--scale .carousel__slide {
  -webkit-transform: scale(0);
          transform: scale(0);
}
.carousel__slide {
  height: 100%;
  position: absolute;
  opacity: 0;
  overflow: hidden;
}
.carousel__slide .overlay {height: 100%;}
.carousel--thumb .carousel__indicator {
  height: 30px;
  width: 30px;
}
.carousel__indicator {
  background-color: #fafafa;
}
{% for item in post.carousels[number].images %}
.carousel__slide:nth-of-type({{ forloop.index }}),
.carousel--thumb .carousel__indicators .carousel__indicator:nth-of-type({{ forloop.index }}) {
  background-size: cover;
  background-position: center;
}
{% endfor %}
</style>

<script>
  function isVisible(el) {
        while (el) {
            if (el === document) {
                return true;
            }

            var $style = window.getComputedStyle(el, null);

            if (!el) {
                return false;
            } else if (!$style) {
                return false;
            } else if ($style.display === 'none') {
                return false;
            } else if ($style.visibility === 'hidden') {
                return false;
            } else if (+$style.opacity === 0) {
                return false;
            } else if (($style.display === 'block' || $style.display === 'inline-block') &&
                $style.height === '0px' && $style.overflow === 'hidden') {
                return false;
            } else {
                return $style.position === 'fixed' || isVisible(el.parentNode);
            }
        }
  }
  setInterval(function(){
    var j=0;
    var elements = document.querySelectorAll('#carousel{{ number}} .carousel__control--forward');
    for(i=(elements.length - 1);i>-1;i--) {
      if(isVisible(elements[i])) j=i;
    }
    elements[j].click();
  },7000);
</script>

This is my page.html where I am calling my include file as:

{% for post in site.posts %}
<h2 class="mt-5">{{ post.title }}</h2>
{% include carousel.html %}
{{ post.content }}
 {% endfor %}

The slider works well for the first post, but not works any other post
Demo Link: https://luxury-madeleine-b58a34.netlify.app/seattle

2

I think your issues is you have multiple sliders on one page and they are conflicting with each other. If you do the second slider it is moving the first one until you get to the last couple and then it works.

The slider you are using looks like it can handle this by passing in the number which would need to be unique for each one. To do that I think you can use the forloop.index .

So try:

{% for post in site.posts %}
<h2 class="mt-5">{{ post.title }}</h2>
{% include carousel.html  number=forloop.index  %}
{{ post.content }}
 {% endfor %}

or maybe it is

{% for post in site.posts %}
<h2 class="mt-5">{{ post.title }}</h2>
{% include carousel.html  number={{forloop.index}}  %}
{{ post.content }}
 {% endfor %}

I’m not sure on the syntax for getting the loop index, but I think setting a unique number in the include is what you need to do.

1 Like
3

Thanks, after using your logic. I am just getting the first slider.

page.html has

{% for post in site.posts %}
<h2 class="mt-5">{{ post.title }}</h2>
{% include carousel.html number=forloop.index%}
{{ post.content }}
 {% endfor %}

https://luxury-madeleine-b58a34.netlify.app/seattle

4

so i think you fixed the unique id issue but it looks like the intention of the slider person is that you will also number your slider images in the same way which you are not doing.

So in the quote above - from your include file - the div id="carousel{{number}}" part is good - but I think anywhere else you see number you need to remove it - like in the next line it says [number] - I think you need to remove it so it is just post.carousels.images ?

same with any other place it is using the number? it worked more or less before because you were not passing in a number at all. Now that you are and it is incrementing each time it is trying to do something different than you intend.

I’m not positive it will work by doing that, but I think eventually you can get it working.

1 Like
5

@jhvanderschee I think made that slider, maybe he can be of better help.

1 Like
6

You need to change two things:

  1. The set of images is being referenced by post.carousels[number].images, but should be referenced by post.carousels[0].images, assuming you want the first carousel of each post.

  2. The line {% assign post = site.posts %} does not make sense. Many posts will never be one post. Additionally, overwriting the post variable, which you also use in your loop, is not a great idea.

Additionally you need this code:

{% for post in site.posts %}
<h2 class="mt-5">{{ post.title }}</h2>
{% include carousel.html  number=forloop.index  %}
{{ post.content }}
{% endfor %}

The forloop.index / number is required to make it work.

1 Like
7

Is this still same for me.

8

If I were in your situation, I would immediately delete the carousel and try to give it a new idea of how to show the image. I’m not regret.

9

If you share your code I will submit a pull request so it works… github: jhvanderschee. Changing code you do not understand often fails to work the first time around.

10

I have invited you to my repo. Please check. Thanks

11

You need to change two things:

  1. The set of images is being referenced by post.carousels[number].images, but should be referenced by post.carousels[0].images.
  2. The line {% assign post = site.posts %} should be removed.

I have checked out your repo and I can confirm that you need to change only the two things above to make it work. See my commit. Note that I removed the dependencies to make it work on any machine. You might want to put them back in.

12

Thank you @jhvanderschee for making it work.

1 Like