Solution 1 :

I’ve found the solution. I forgot to use
align-items:center property in the flex container. Now I did, and the items got centered.

Problem :

That is my very first question here. StackOverflow has helped me a lot. The question: for some reason, the slides elements are not stop from touching the edge when I set the scroll-padding property on the parent flex container. I’ve tried so much ways to do it, but nothing. So I decided to come to the platform that has helped me with other problems. After a bunch of changing in the code, I ended up with this. A @mixin that receives data for configuring the slider and its slides. There is some inconsistency at the scrolling behavior or the slides going forward and backward, they don’t fit the visible area the same way. This @mixin is @included in my main css file in order to the classes be visible to the html be styled. Thank you

@mixin slider_s1(
  $slide_width: 700px,
  $slide_height: 500px,
  $slider_background_color: grey,
  $size_propagation_percentage: 1.03
  ){

  ///Element that hold all the elements necessary for the slide element(carousel)
  .slider-wrap{
    width: ($slide_width*$size_propagation_percentage)*$size_propagation_percentage;
    height: ($slide_height*$size_propagation_percentage)*$size_propagation_percentage;

    display: inline-flex;
    flex-direction: column;
    flex-shrink: 0;

    border: yellow solid;
  }
  .slider_s1{
    width: ($slide_width*$size_propagation_percentage);
    height: ($slide_height*$size_propagation_percentage);

    border: solid red;
    overflow-x: hidden;

    //Flexbox Layout module
    display: flex;
    flex-direction: row;

    //Scroll Snap module
    scroll-snap-type: x mandatory;
    scroll-snap-align: start;

    .slide_s1{
      width:$slide_width;
      height:$slide_height;
      border:black solid;
      margin: auto (($slide_width*$size_propagation_percentage)-$slide_width)/2;

      //Flexbox Laytout module
      flex-shrink: 0;
      flex-grow: 0;
    }
  }
}

<html>
<header>
  <link rel="stylesheet" href="_css/slider.css">
</header>
<body>
<div class="slider-wrap">
  <div class="indicators-wrap">
    <div class="indicators">
      <a href="#slide-1">1</a>
      <a href="#slide-2">2</a>
      <a href="#slide-3">3</a>
      <a href="#slide-4">4</a>
      <a href="#slide-5">5</a>
    </div>
  </div>
  <div class="slider_s1">
    <div class="slide_s1" id="slide-1">Slide Data 1</div>
    <div class="slide_s1" id="slide-2">Slide Data 2</div>
    <div class="slide_s1" id="slide-3">Slide Data 3</div>
    <div class="slide_s1" id="slide-4">Slide Data 4</div>
    <div class="slide_s1" id="slide-5">Slide Data 5</div>
  </div>
</div>
</body>
</html>

By

Leave a Reply

Your email address will not be published. Required fields are marked *