0

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 ?

2
Contributors
6
Replies
42
Views
2 Years
Discussion Span
Last Post by davy_yg
0

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>

Edited by davy_yg

0

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

Is there anyway to use bootstrap for this slides?

0

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.

0

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>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.