How to display the slider inside the container and end till viewport

Question

I am using flickity slider and it's working. What I am doing is, I have to start my slider from my heading like below image

and when it's slide then it will go to the left side till viewport.

I tried below code.

$('.main-carousel').flickity({
  freeScroll: true,
  cellAlign: 'left',
  wrapAround: true,
  contain: true,
  prevNextButtons: false,
  pageDots: true,
  draggable: false
});

.headingwrap {
  margin-left: 10%;
}

.carousel-cell {
  width: 30%;
  height: 250px;
}

.one {
  background-color: red
}

.two {
  background-color: green
}

.three {
  background-color: orange
}

.four {
  background-color: blue
}

.five {
  background-color: black
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.1/flickity.min.css">
<section>
  <div class="headingwrap">
    <h2>This is the heading </h2>
  </div>
  <div class="main-carousel">
    <div class="carousel-cell one"></div>
    <div class="carousel-cell two"></div>
    <div class="carousel-cell three"></div>
    <div class="carousel-cell four"></div>
    <div class="carousel-cell five"></div>
  </div>

</section>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.1/flickity.pkgd.min.js"></script>

This is second snippet and just added

.flickity-viewport{margin-left: 10%;}

$('.main-carousel').flickity({
  freeScroll: true,
  cellAlign: 'left',
  wrapAround: true,
  contain: true,
  prevNextButtons: false,
  pageDots: true,
  draggable: false
});

.flickity-viewport {
  margin-left: 10%;
}

.headingwrap {
  margin-left: 10%;
}

.carousel-cell {
  width: 25%;
  height: 250px;
}

.one {
  background-color: red
}

.two {
  background-color: green
}

.three {
  background-color: orange
}

.four {
  background-color: blue
}

.five {
  background-color: black
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.1/flickity.min.css">
<section>
  <div class="headingwrap">
    <h2>This is the heading </h2>
  </div>
  <div class="main-carousel">
    <div class="carousel-cell one"></div>
    <div class="carousel-cell two"></div>
    <div class="carousel-cell three"></div>
    <div class="carousel-cell four"></div>
    <div class="carousel-cell five"></div>
  </div>

</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.1/flickity.pkgd.min.js"></script>

I didn't understand what you want.Can you please explain more about the problem you are facing while implementing this? — Rishab Tyagi, Jul 31 '20 at 07:11
@RishabTyagi, Check my first image when page load then it will display like that and when slide then it will display live second image. — user9437856, Jul 31 '20 at 07:23
@RishabTyagi, In my code slider, is working as my expected but on page load how can i show my slider below the heading?(Refer image one) — user9437856, Jul 31 '20 at 07:26
You can increase the size of the slide or use smaller heading like h4. — Rishab Tyagi, Jul 31 '20 at 07:34
@RishabTyagi, I added my second snippet. When page load then it is below the heading but notice if I slide then it not doing to left side live my second image in the question. — user9437856, Jul 31 '20 at 07:42
So, you want to shift the slide to the left after page load. — Rishab Tyagi, Jul 31 '20 at 07:45
@RishabTyagi, Not shift, I have to slide to the left. If you notice, in the second snippet. it's not doing to the end because of margin left 10% — user9437856, Jul 31 '20 at 07:49
@RishabTyagi, If I remove these three options ( cellAlign: 'left', wrapAround: true, contain: true) then it's working but getting lots of space on the left side. Refer link https://prnt.sc/trnm6g — user9437856, Jul 31 '20 at 08:46
You should try margin-left in negative values.for e.g. `margin-left:-15%;` — Rishab Tyagi, Jul 31 '20 at 09:22
@RishabTyagi, Where I have to add this css? I mean class name — user9437856, Jul 31 '20 at 10:02
Add this in your `.main-carousel{}` class to remove the extra white space after removing those three options. — Rishab Tyagi, Jul 31 '20 at 12:02
I added .flickity-slider {margin-left: 11.5%;} and I got my soution. — user9437856, Aug 01 '20 at 04:34

How to display the slider inside the container and end till viewport

0 Answers0