Sliders boostrap

[davy_yg]

Hello,

I am trying to incorporate bootstrap with this sliders. Any clue how to make it looks good?

http://flickity.metafizzy.co/

    <div class="gallery js-flickity"
        data-flickity-options='{ "freeScroll": true, "wrapAround": true, "imagesLoaded": true, "percentPosition": false, "pageDots": false }'> <div class="row"> <div class="col-sm-4"><img src="images/Portfolio/pic1.jpg" alt="pic1" /></div> <div class="col-sm-4"><img src="images/Portfolio/pic2.jpg" alt="pic2" /></div> <div class="col-sm-4"><img src="images/Portfolio/pic3.jpg" alt="pic3" /></div> <div class="col-sm-4"><img src="images/Portfolio/pic1.jpg" alt="pic1" /></div> <div class="col-sm-4"><img src="images/Portfolio/pic2.jpg" alt="pic2" /></div> <div class="col-sm-4"><img src="images/Portfolio/pic3.jpg" alt="pic3" /></div> </div> </div>

This is the result: http://www.innovation.web.id/One/portfolio-filter.php

It's suppose to appears in one line and hide the rest three. It only works if I take off the bootstrap. Is there anyway to maintain the bootstrap and it still looks and works correctly ?

[davy_yg]

Sorry my previous portfolio-filter looks bad - now I am trying to fix it. Please help.

portfolio-filter.php

<div class="gallery js-flickity"
        data-flickity-options='{ "freeScroll": true, "wrapAround": true, "imagesLoaded": true, "percentPosition": false, "pageDots": false }'>

        <div class="row">

        <div class="col-sm-4"><img src="images/Portfolio/pic1.jpg" alt="pic1" /></div>
        <div class="col-sm-4"><img src="images/Portfolio/pic2.jpg" alt="pic2" /></div>
        <div class="col-sm-4"><img src="images/Portfolio/pic3.jpg" alt="pic3" /></div>     
        <div class="col-sm-4"><img src="images/Portfolio/pic1.jpg" alt="pic1" /></div>
        <div class="col-sm-4"><img src="images/Portfolio/pic2.jpg" alt="pic2" /></div>
        <div class="col-sm-4"><img src="images/Portfolio/pic3.jpg" alt="pic3" /></div>

        </div>

    </div>

[gentlemedia]

You shouldn't use the Bootstrap grid and its classes inside the .gallery div. If you read the instructions then you will see how the HTML and the associated classes for the styles in flickity-docs.css should look like.

http://flickity.metafizzy.co/#getting-started

[davy_yg]

It looks like that I cannot utilize bootstrap for this type of slides, can I?

Is there anyway to use bootstrap for this slides?

[gentlemedia]

Of course you can use bootstrap and even inside the slides if you know what you're doing. But you just use the HTML structure that's provided in the getting started section of that Flickity website.

<div class="main-gallery">
  <div class="gallery-cell">...</div>
  <div class="gallery-cell">...</div>
  <div class="gallery-cell">...</div>
</div>

Where the dots are you place your images.

[davy_yg]

Hello,

I wonder how to write the code structure. This is what I try but it does not works like it suppose to (the picture appears vertical). Please help me fix the picture so that it appears like it suppose to (normal slider with bootstrap).

portfolio-filter.php

<div class="gallery js-flickity"
        data-flickity-options='{ "freeScroll": true, "wrapAround": true, "imagesLoaded": true, "percentPosition": false, "pageDots": false }'>

        <div class="main-gallery">
              <div class="gallery-cell"><img src="images/Portfolio/pic1.jpg" alt="pic1" /></div>
              <div class="gallery-cell"><img src="images/Portfolio/pic2.jpg" alt="pic2" /></div>
              <div class="gallery-cell"><img src="images/Portfolio/pic3.jpg" alt="pic3" /></div>
              <div class="gallery-cell"><img src="images/Portfolio/pic1.jpg" alt="pic1" /></div>
              <div class="gallery-cell"><img src="images/Portfolio/pic2.jpg" alt="pic2" /></div>
              <div class="gallery-cell"><img src="images/Portfolio/pic3.jpg" alt="pic3" /></div>
        </div>

        </div>

[davy_yg]

Hello,

This is the link for portfolio-filter: http://www.innovationusa.web.id/One/portfolio-filter.php

Can anyone help me create the bootstrap for it?