Client carousel

<legend align="center">Our Happy Client's</legend>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Wrapper for slides -->
  <div class="carousel-inner">
  
    <div class="item active container">
        <img class="col-md-2 col-sm-2 col-xs-2 logo img-responsive" src="image.png" alt="...">
        <img class="col-md-2 col-sm-2 col-xs-2 logo img-responsive" src="image.png" alt="...">
        <img class="col-md-2 col-sm-2 col-xs-2 logo img-responsive" src="image.png" alt="...">
        <img class="col-md-2 col-sm-2 col-xs-2 logo img-responsive" src="image.png" alt="...">
        <img class="col-md-2 col-sm-2 col-xs-2 logo img-responsive" src="image.png" alt="...">
        <img class="col-md-2 col-sm-2 col-xs-2 logo img-responsive" src="image.png" alt="...">
    </div>
    
    <div class="item container">
        <img class="col-md-2 col-sm-2 col-xs-2 logo img-responsive" src="image.png" alt="...">
        <img class="col-md-2 col-sm-2 col-xs-2 logo img-responsive" src="image.png" alt="...">
        <img class="col-md-2 col-sm-2 col-xs-2 logo img-responsive" src="image.png" alt="...">
        <img class="col-md-2 col-sm-2 col-xs-2 logo img-responsive" src="image.png" alt="...">
        <img class="col-md-2 col-sm-2 col-xs-2 logo img-responsive" src="image.png" alt="...">
        <img class="col-md-2 col-sm-2 col-xs-2 logo img-responsive" ssrc="image.png" alt="...">
      </div>
    
    <div class="item container">
        <img class="col-md-2 col-sm-2 col-xs-2 logo img-responsive" src="image.png" alt="...">
        <img class="col-md-2 col-sm-2 col-xs-2 logo img-responsive" src="image.png" alt="...">
        <img class="col-md-2 col-sm-2 col-xs-2 logo img-responsive" src="image.png" alt="...">
        <img class="col-md-2 col-sm-2 col-xs-2 logo img-responsive" src="image.png" alt="...">
        <img class="col-md-2 col-sm-2 col-xs-2 logo img-responsive" src="image.png" alt="...">
        <img class="col-md-2 col-sm-2 col-xs-2 logo img-responsive" src="image.png" alt="...">
     </div>
    
  </div>

    <div align="center" style="margin-top:20px;">
    <!-- Controls -->
          <a class="left" href="#carousel-example-generic" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right" href="#carousel-example-generic" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
    </div>
  
</div>

This is what I want,

client slider

Is this asking too much, or can it be achieved? Or is there a simpler way of getting this done?

Unfortunately the image that you've linked to is broken and I am not entirely sure what you want to achieve.

I am not certain that Bootstrap's col-md-2 classes would work on images. It is best to use Row and Column components for that.

https://www.google.gy/search?q=client+slider&espv=2&biw=1680&bih=959&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjPuZGmvYTLAhWG1x4KHasED28Q_AUIBigB#imgrc=wbwXMp0AKuRgaM%3A

@ShaeZona, So I copy/pasted your code in to my test bed and the carousel does actually work. However, I don't think the default carousel is possible of doing what I think you actually might be wanting it do to. I thinking you're probably wanting it do something like 6 images scroll while in desktop but in mobile view maybe 2 images scroll at a time? Your current code says 6 images at all times.

The way the carousel works is that it scrolls the <div class="item"> ... </div>. Not the individual images in it. So you will always scroll 6 images. The col-* will cause it to stack the images base on the viewport.

Martin is right in that it would be better to use rows/columns rather then putting the col-* directly on the image. Although, it is working that way, I'm sure it would be better coding though.

The site that you referenced and the specific carousel, it's demo site is actually using a custom carousel.

Base on what I think you might be wanting it to work like, (number of images viewable base on viewport size), I think you would need to use additional Javascript.

Here's my thought.

You can probably use the default carousel but with additional JS code to stop/start and based on JS viewport detection (and page re-sizing) append into the carousel X number of <div class="item"> ... </div> with Y number of images for each viewport/resize change.

That's probably how I would tackle it myself, or I'd look around the web for a custom carousel to use for free or purchase.

Hope that helps :)

Saj

is it possible to create a custom component, outside Bootstrap Studio, and import it?

They are looking to add a Custom Code function in the next release of the software (v2.2). They are hoping to have it available some time next week I believe. May be that will provide you with a way to achieve what it is your trying to do.

Saj

I still haven't got the client carousel :(

I need a thumbnail slider to display client logos. The reason I don't want to place them in a static block, is because the list is growing and it'll become crowded eventually.

Is there anyway way which you can make me one and export it as a .bscomp? I'd be really happy.

Unfortunately, I can't do that for you. It takes more then exporting it to a .bscomp. If you don't know how to program Javascript to make ajax calls to insert content into the DOM you should probably consider hiring someone that can do that for you. And if you do out source that development, you will still have to wait for the next release that contains the Custom Code update.

Here is a suggestion for a possible solution to the out sourcing, maybe you can find someone here that can do what you're looking for. https://www.fiverr.com/categories/programming-tech/web-programming-services/#layout=auto&page=1

Saj

how can i show 4 < div class = "item" > in one row without col-sm-4

This does not account for spacing in/around each .item such as margin/padding. Nor does it account for any @media queries that you might need to add for whatever adjustments your wanting.

<div class="row cols4">
    <div class="item"><div>
    <div class="item"><div>
    <div class="item"><div>
    <div class="item"><div>
    <div class="clearfix"></div>
</div>

.cols4 .item{
    float:left;
    width:25%;
}

You can add the following classes (.flex-box .row-wrap) to the row to take advantage of the .item divs to auto adjust equal height based on their content. And to auto wrap .items if there isn't enough space to fit them all on a single line. If you use the .flex-box method, remove the .clearfix div. If you still need the .clearfix there is another way of accounting for it but it requires doing a little more.

.flex-box{
    display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;      /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;   /* TWEENER - IE 10 */
    display: -webkit-flex;  /* NEW - Chrome */
    display: flex;          /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.flex-box.row-wrap{
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

Hope that helps

Saj

Hey @ShaeZonna,

So I was looking around the web for random purposes and I came across this JS plugin for your responsive backgrounds and sliding logs etc... (click live demo to see examples) https://www.woothemes.com/flexslider/

The Carousel with dynamic min/max ranges example made me think of your multi logo slider. This JS script can adjust the number of logos in view based on the browser width as you can see in the example javascript.

Just thought I'd bring this script to your attention if you wanted to check it ;)

Saj

This is awesome, Thank you Saj.

As it relates to the Buttons in BS-Studio. Do I have to write javascript for them to submit/ reset/ etc? or Is that already done?

I too have stumbled on a useful link for this

http://bootsnipp.com/snippets/featured/thumbnail-carousel-single-image-sliding

Hopefully this will help as has html, css and js and you can build into custom code components or just follow the mark up and do your own components

@ShaeZonna,

So I think you are referring to the Next/Prev links correct?

If so, then yes you can use BSS buttons/links for that. As I looked through the other examples on the site. Looking at "Basic Slider customDirectionNav" you would have to declare in the JS something like:

for example

  $('.flexslider').flexslider({
    animation: "slide",
    controlsContainer: $(".custom-controls-container"), //declared for paging
    customDirectionNav: $(".custom-navigation a") //declared for next/prev
  });

and the HTML like:

for example

<div class="flexslider">...</div>
<div class="custom-navigation">
  &lt;a href="#" class="flex-prev"&gt;Prev&lt;/a&gt;
  <div class="custom-controls-container"></div>
  &lt;a href="#" class="flex-next"&gt;Next&lt;/a&gt;
</div>

Making the links as BSS links or buttons and making sure the JS declartion corresponds as well.

Saj