I encountered a problem while working with the Flickity slider; The thing is that the slider is sitting there just perfectly as I wanted... but... After I slide it goes too much to the left and leaves a big amount of space behind; I looked in to the code nothing es up; Maybe there is a problem with the settings of the slider?

     <div class='carousel-section'>
 <div class='carousel-wrapper'>
 <h2>
  Some Clients About us
   </h2>
  <div class="carousel ">
  <div class="carousel-cell">
    <div class="carousel-cell-image"> {% if module.third.src %}
    {% set sizeAttrs = 'width="{{ module.third.width }}" height="{{ module.third.height }}"' %}
    {% if module.third.size_type == 'auto' %}
        {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
    {% elif module.third.size_type == 'auto_custom_max' %}
        {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.third.max_width }}px; max-height: {{ module.third.max_height }}px"' %}
    {% endif %}
    <img src="{{ module.third.src }}" alt="{{ module.third.alt }}" {{ sizeAttrs }}>
{% endif %}</div>
   <div class="carousel-cell-text"> <p>
      “Blue Label cared about the project is if it were their own. Showed a great interest in helping our pany succeed. Would highly remend for anyone looking for a job to be done the right way. They are not trying to cut corners and are worth every dollar spent.”
      </p></div>
   <div class="carousel-cell-clientinfo">
      <h5>
        {% inline_text field="client_name" value="{{ module.client_name }}" %}
      </h5>

  <h6>{% inline_text field="client_position" value="{{ module.client_position }}" %} </h6>
    </div>
  </div>
 <div class="carousel-cell">
    <div class="carousel-cell-image"> {% if module.third.src %}
    {% set sizeAttrs = 'width="{{ module.third.width }}" height="{{ module.third.height }}"' %}
    {% if module.third.size_type == 'auto' %}
        {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
    {% elif module.third.size_type == 'auto_custom_max' %}
        {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.third.max_width }}px; max-height: {{ module.third.max_height }}px"' %}
    {% endif %}
    <img src="{{ module.third.src }}" alt="{{ module.third.alt }}" {{ sizeAttrs }}>
{% endif %}</div>
   <div class="carousel-cell-text"> <p>
      “Blue Label cared about the project is if it were their own. Showed a great interest in helping our pany succeed. Would highly remend for anyone looking for a job to be done the right way. They are not trying to cut corners and are worth every dollar spent.”
      </p></div>
   <div class="carousel-cell-clientinfo">
      <h5>
        {% inline_text field="client_name" value="{{ module.client_name }}" %}
      </h5>

  <h6>{% inline_text field="client_position" value="{{ module.client_position }}" %} </h6>
    </div>
  </div>
     <div class="carousel-cell">
    <div class="carousel-cell-image"> {% if module.third.src %}
    {% set sizeAttrs = 'width="{{ module.third.width }}" height="{{ module.third.height }}"' %}
    {% if module.third.size_type == 'auto' %}
        {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
    {% elif module.third.size_type == 'auto_custom_max' %}
        {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.third.max_width }}px; max-height: {{ module.third.max_height }}px"' %}
    {% endif %}
    <img src="{{ module.third.src }}" alt="{{ module.third.alt }}" {{ sizeAttrs }}>
{% endif %}</div>
   <div class="carousel-cell-text"> <p>
      “Blue Label cared about the project is if it were their own. Showed a great interest in helping our pany succeed. Would highly remend for anyone looking for a job to be done the right way. They are not trying to cut corners and are worth every dollar spent.”
      </p></div>
   <div class="carousel-cell-clientinfo">
      <h5>
        {% inline_text field="client_name" value="{{ module.client_name }}" %}
      </h5>

  <h6>{% inline_text field="client_position" value="{{ module.client_position }}" %} </h6>
    </div>
  </div>
     <div class="carousel-cell">
    <div class="carousel-cell-image"> {% if module.third.src %}
    {% set sizeAttrs = 'width="{{ module.third.width }}" height="{{ module.third.height }}"' %}
    {% if module.third.size_type == 'auto' %}
        {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
    {% elif module.third.size_type == 'auto_custom_max' %}
        {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.third.max_width }}px; max-height: {{ module.third.max_height }}px"' %}
    {% endif %}
    <img src="{{ module.third.src }}" alt="{{ module.third.alt }}" {{ sizeAttrs }}>
{% endif %}</div>
   <div class="carousel-cell-text"> <p>
      “Blue Label cared about the project is if it were their own. Showed a great interest in helping our pany succeed. Would highly remend for anyone looking for a job to be done the right way. They are not trying to cut corners and are worth every dollar spent.”
      </p></div>
   <div class="carousel-cell-clientinfo">
      <h5>
        {% inline_text field="client_name" value="{{ module.client_name }}" %}
      </h5>

  <h6>{% inline_text field="client_position" value="{{ module.client_position }}" %} </h6>
    </div>
  </div>
     <div class="carousel-cell">
    <div class="carousel-cell-image"> {% if module.third.src %}
    {% set sizeAttrs = 'width="{{ module.third.width }}" height="{{ module.third.height }}"' %}
    {% if module.third.size_type == 'auto' %}
        {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
    {% elif module.third.size_type == 'auto_custom_max' %}
        {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.third.max_width }}px; max-height: {{ module.third.max_height }}px"' %}
    {% endif %}
    <img src="{{ module.third.src }}" alt="{{ module.third.alt }}" {{ sizeAttrs }}>
{% endif %}</div>
   <div class="carousel-cell-text"> <p>
      “Blue Label cared about the project is if it were their own. Showed a great interest in helping our pany succeed. Would highly remend for anyone looking for a job to be done the right way. They are not trying to cut corners and are worth every dollar spent.”
      </p></div>
   <div class="carousel-cell-clientinfo">
      <h5>
        {% inline_text field="client_name" value="{{ module.client_name }}" %}
      </h5>

  <h6>{% inline_text field="client_position" value="{{ module.client_position }}" %} </h6>
    </div>
  </div>
     <div class="carousel-cell">
    <div class="carousel-cell-image"> {% if module.third.src %}
    {% set sizeAttrs = 'width="{{ module.third.width }}" height="{{ module.third.height }}"' %}
    {% if module.third.size_type == 'auto' %}
        {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
    {% elif module.third.size_type == 'auto_custom_max' %}
        {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.third.max_width }}px; max-height: {{ module.third.max_height }}px"' %}
    {% endif %}
    <img src="{{ module.third.src }}" alt="{{ module.third.alt }}" {{ sizeAttrs }}>
{% endif %}</div>
   <div class="carousel-cell-text"> <p>
      “Blue Label cared about the project is if it were their own. Showed a great interest in helping our pany succeed. Would highly remend for anyone looking for a job to be done the right way. They are not trying to cut corners and are worth every dollar spent.”
      </p></div>
   <div class="carousel-cell-clientinfo">
      <h5>
        {% inline_text field="client_name" value="{{ module.client_name }}" %}
      </h5>

  <h6>{% inline_text field="client_position" value="{{ module.client_position }}" %} </h6>
    </div>
  </div>
     <div class="carousel-cell">
    <div class="carousel-cell-image"> {% if module.third.src %}
    {% set sizeAttrs = 'width="{{ module.third.width }}" height="{{ module.third.height }}"' %}
    {% if module.third.size_type == 'auto' %}
        {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
    {% elif module.third.size_type == 'auto_custom_max' %}
        {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.third.max_width }}px; max-height: {{ module.third.max_height }}px"' %}
    {% endif %}
    <img src="{{ module.third.src }}" alt="{{ module.third.alt }}" {{ sizeAttrs }}>
{% endif %}</div>
   <div class="carousel-cell-text"> <p>
 Lorem Ipsum is simply dummy text of the printing and typesetting industry.
     Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
     when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
     It has survived not only five centuries, but also the leap into electronic typesetting, 
     remaining essentially unchanged. It was popularised in the 1960s with the 
     release of Letraset sheets containing Lorem Ipsum passages, and more recently
     with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


      </p></div>
   <div class="carousel-cell-clientinfo">
      <h5>
        LOREM
      </h5>

  <h6>IPSUM </h6>
    </div>
  </div>

   </div>
  </div>
</div>

css:

 .carousel-section{
  width:100%;
  height:90vh;
  font-family: 'Montserrat', sans-serif;
  background-color:#DFE6E9;
  border-top:1px solid #c8cfd1;
  display:flex;
  flex-direction:column;
} 
.carousel-wrapper{
  width:100%;
  height:90vh;
  font-family: 'Montserrat', sans-serif;
  background-color:#DFE6E9;
  border-top:1px solid #c8cfd1;
  display:flex;
  flex-direction:column;
  padding-left:10rem;
  padding-top:5rem;
  position:relative;
}



.carousel {
  background: #DFE6E9;
  margin-bottom:4rem;
  position:absolute;
  top:10rem;
  left:0;
  width:100%;
  padding-left:10rem;
}

.carousel-cell {
  width: 25%;
  height: 330px;
  margin-right: 10px;
  display:flex;
  flex-direction:column;
  background: #DFE6E9;
  padding:0 1rem 1rem 1rem;
  align-items:flex-start;
  border-right:1px solid #c8cfd1; 
}

/* cell number */
.carousel-cell:before {
  display: block;
  text-align: center;
  line-height: 200px;
  font-size: 80px;
  color: white;
}

.button {
  font-size: 22px;
}

.button-group {
  margin-bottom: 20px;
}

  .carousel-cell-text p{
    font-size:.8rem;   
    padding-right:2rem;
    margin-top:2rem;
    line-height:1.4rem;

}

  .carousel-cell-clientinfo h5{
    margin-top:1.2rem;  
}

  .carousel-cell-clientinfo h6{
     font-size:.8rem;   
     font-weight:lighter;
     margin-top:.5rem;  
}

Code is on the CMS system so thats where the modules are from; Additionally, there are two files from Flickity slider (css and javascript) connected to this module as standard library;

Here it's visible that too much blank space is left on the right , before some point the slider had to stop scrolling in order for the slides to occupy the entire section, but it doesn't stop... That's the problem...

I encountered a problem while working with the Flickity slider; The thing is that the slider is sitting there just perfectly as I wanted... but... After I slide it goes too much to the left and leaves a big amount of space behind; I looked in to the code nothing es up; Maybe there is a problem with the settings of the slider?

     <div class='carousel-section'>
 <div class='carousel-wrapper'>
 <h2>
  Some Clients About us
   </h2>
  <div class="carousel ">
  <div class="carousel-cell">
    <div class="carousel-cell-image"> {% if module.third.src %}
    {% set sizeAttrs = 'width="{{ module.third.width }}" height="{{ module.third.height }}"' %}
    {% if module.third.size_type == 'auto' %}
        {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
    {% elif module.third.size_type == 'auto_custom_max' %}
        {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.third.max_width }}px; max-height: {{ module.third.max_height }}px"' %}
    {% endif %}
    <img src="{{ module.third.src }}" alt="{{ module.third.alt }}" {{ sizeAttrs }}>
{% endif %}</div>
   <div class="carousel-cell-text"> <p>
      “Blue Label cared about the project is if it were their own. Showed a great interest in helping our pany succeed. Would highly remend for anyone looking for a job to be done the right way. They are not trying to cut corners and are worth every dollar spent.”
      </p></div>
   <div class="carousel-cell-clientinfo">
      <h5>
        {% inline_text field="client_name" value="{{ module.client_name }}" %}
      </h5>

  <h6>{% inline_text field="client_position" value="{{ module.client_position }}" %} </h6>
    </div>
  </div>
 <div class="carousel-cell">
    <div class="carousel-cell-image"> {% if module.third.src %}
    {% set sizeAttrs = 'width="{{ module.third.width }}" height="{{ module.third.height }}"' %}
    {% if module.third.size_type == 'auto' %}
        {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
    {% elif module.third.size_type == 'auto_custom_max' %}
        {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.third.max_width }}px; max-height: {{ module.third.max_height }}px"' %}
    {% endif %}
    <img src="{{ module.third.src }}" alt="{{ module.third.alt }}" {{ sizeAttrs }}>
{% endif %}</div>
   <div class="carousel-cell-text"> <p>
      “Blue Label cared about the project is if it were their own. Showed a great interest in helping our pany succeed. Would highly remend for anyone looking for a job to be done the right way. They are not trying to cut corners and are worth every dollar spent.”
      </p></div>
   <div class="carousel-cell-clientinfo">
      <h5>
        {% inline_text field="client_name" value="{{ module.client_name }}" %}
      </h5>

  <h6>{% inline_text field="client_position" value="{{ module.client_position }}" %} </h6>
    </div>
  </div>
     <div class="carousel-cell">
    <div class="carousel-cell-image"> {% if module.third.src %}
    {% set sizeAttrs = 'width="{{ module.third.width }}" height="{{ module.third.height }}"' %}
    {% if module.third.size_type == 'auto' %}
        {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
    {% elif module.third.size_type == 'auto_custom_max' %}
        {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.third.max_width }}px; max-height: {{ module.third.max_height }}px"' %}
    {% endif %}
    <img src="{{ module.third.src }}" alt="{{ module.third.alt }}" {{ sizeAttrs }}>
{% endif %}</div>
   <div class="carousel-cell-text"> <p>
      “Blue Label cared about the project is if it were their own. Showed a great interest in helping our pany succeed. Would highly remend for anyone looking for a job to be done the right way. They are not trying to cut corners and are worth every dollar spent.”
      </p></div>
   <div class="carousel-cell-clientinfo">
      <h5>
        {% inline_text field="client_name" value="{{ module.client_name }}" %}
      </h5>

  <h6>{% inline_text field="client_position" value="{{ module.client_position }}" %} </h6>
    </div>
  </div>
     <div class="carousel-cell">
    <div class="carousel-cell-image"> {% if module.third.src %}
    {% set sizeAttrs = 'width="{{ module.third.width }}" height="{{ module.third.height }}"' %}
    {% if module.third.size_type == 'auto' %}
        {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
    {% elif module.third.size_type == 'auto_custom_max' %}
        {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.third.max_width }}px; max-height: {{ module.third.max_height }}px"' %}
    {% endif %}
    <img src="{{ module.third.src }}" alt="{{ module.third.alt }}" {{ sizeAttrs }}>
{% endif %}</div>
   <div class="carousel-cell-text"> <p>
      “Blue Label cared about the project is if it were their own. Showed a great interest in helping our pany succeed. Would highly remend for anyone looking for a job to be done the right way. They are not trying to cut corners and are worth every dollar spent.”
      </p></div>
   <div class="carousel-cell-clientinfo">
      <h5>
        {% inline_text field="client_name" value="{{ module.client_name }}" %}
      </h5>

  <h6>{% inline_text field="client_position" value="{{ module.client_position }}" %} </h6>
    </div>
  </div>
     <div class="carousel-cell">
    <div class="carousel-cell-image"> {% if module.third.src %}
    {% set sizeAttrs = 'width="{{ module.third.width }}" height="{{ module.third.height }}"' %}
    {% if module.third.size_type == 'auto' %}
        {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
    {% elif module.third.size_type == 'auto_custom_max' %}
        {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.third.max_width }}px; max-height: {{ module.third.max_height }}px"' %}
    {% endif %}
    <img src="{{ module.third.src }}" alt="{{ module.third.alt }}" {{ sizeAttrs }}>
{% endif %}</div>
   <div class="carousel-cell-text"> <p>
      “Blue Label cared about the project is if it were their own. Showed a great interest in helping our pany succeed. Would highly remend for anyone looking for a job to be done the right way. They are not trying to cut corners and are worth every dollar spent.”
      </p></div>
   <div class="carousel-cell-clientinfo">
      <h5>
        {% inline_text field="client_name" value="{{ module.client_name }}" %}
      </h5>

  <h6>{% inline_text field="client_position" value="{{ module.client_position }}" %} </h6>
    </div>
  </div>
     <div class="carousel-cell">
    <div class="carousel-cell-image"> {% if module.third.src %}
    {% set sizeAttrs = 'width="{{ module.third.width }}" height="{{ module.third.height }}"' %}
    {% if module.third.size_type == 'auto' %}
        {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
    {% elif module.third.size_type == 'auto_custom_max' %}
        {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.third.max_width }}px; max-height: {{ module.third.max_height }}px"' %}
    {% endif %}
    <img src="{{ module.third.src }}" alt="{{ module.third.alt }}" {{ sizeAttrs }}>
{% endif %}</div>
   <div class="carousel-cell-text"> <p>
      “Blue Label cared about the project is if it were their own. Showed a great interest in helping our pany succeed. Would highly remend for anyone looking for a job to be done the right way. They are not trying to cut corners and are worth every dollar spent.”
      </p></div>
   <div class="carousel-cell-clientinfo">
      <h5>
        {% inline_text field="client_name" value="{{ module.client_name }}" %}
      </h5>

  <h6>{% inline_text field="client_position" value="{{ module.client_position }}" %} </h6>
    </div>
  </div>
     <div class="carousel-cell">
    <div class="carousel-cell-image"> {% if module.third.src %}
    {% set sizeAttrs = 'width="{{ module.third.width }}" height="{{ module.third.height }}"' %}
    {% if module.third.size_type == 'auto' %}
        {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
    {% elif module.third.size_type == 'auto_custom_max' %}
        {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.third.max_width }}px; max-height: {{ module.third.max_height }}px"' %}
    {% endif %}
    <img src="{{ module.third.src }}" alt="{{ module.third.alt }}" {{ sizeAttrs }}>
{% endif %}</div>
   <div class="carousel-cell-text"> <p>
 Lorem Ipsum is simply dummy text of the printing and typesetting industry.
     Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
     when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
     It has survived not only five centuries, but also the leap into electronic typesetting, 
     remaining essentially unchanged. It was popularised in the 1960s with the 
     release of Letraset sheets containing Lorem Ipsum passages, and more recently
     with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


      </p></div>
   <div class="carousel-cell-clientinfo">
      <h5>
        LOREM
      </h5>

  <h6>IPSUM </h6>
    </div>
  </div>

   </div>
  </div>
</div>

css:

 .carousel-section{
  width:100%;
  height:90vh;
  font-family: 'Montserrat', sans-serif;
  background-color:#DFE6E9;
  border-top:1px solid #c8cfd1;
  display:flex;
  flex-direction:column;
} 
.carousel-wrapper{
  width:100%;
  height:90vh;
  font-family: 'Montserrat', sans-serif;
  background-color:#DFE6E9;
  border-top:1px solid #c8cfd1;
  display:flex;
  flex-direction:column;
  padding-left:10rem;
  padding-top:5rem;
  position:relative;
}



.carousel {
  background: #DFE6E9;
  margin-bottom:4rem;
  position:absolute;
  top:10rem;
  left:0;
  width:100%;
  padding-left:10rem;
}

.carousel-cell {
  width: 25%;
  height: 330px;
  margin-right: 10px;
  display:flex;
  flex-direction:column;
  background: #DFE6E9;
  padding:0 1rem 1rem 1rem;
  align-items:flex-start;
  border-right:1px solid #c8cfd1; 
}

/* cell number */
.carousel-cell:before {
  display: block;
  text-align: center;
  line-height: 200px;
  font-size: 80px;
  color: white;
}

.button {
  font-size: 22px;
}

.button-group {
  margin-bottom: 20px;
}

  .carousel-cell-text p{
    font-size:.8rem;   
    padding-right:2rem;
    margin-top:2rem;
    line-height:1.4rem;

}

  .carousel-cell-clientinfo h5{
    margin-top:1.2rem;  
}

  .carousel-cell-clientinfo h6{
     font-size:.8rem;   
     font-weight:lighter;
     margin-top:.5rem;  
}

Code is on the CMS system so thats where the modules are from; Additionally, there are two files from Flickity slider (css and javascript) connected to this module as standard library;

Here it's visible that too much blank space is left on the right , before some point the slider had to stop scrolling in order for the slides to occupy the entire section, but it doesn't stop... That's the problem...

• javascript
• html
• css
• hubspot

Share Improve this question Follow edited Dec 25, 2019 at 20:16 Vickel 8,00766 gold badges3939 silver badges6262 bronze badges asked Dec 25, 2019 at 14:04 gurbajanigurbajani 13133 silver badges1515 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Try using this option when initializing Flickity via JS:

contain: true

Try to set the width of the parent of the slider. My best guess here would be the carousel since on flickity the buttons are located in this container. Or just limit the size of the carousel container with what ever you are using for positioning. CSS Grid example minmax(100%, 400px)