@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.
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.
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
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.
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.
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 ;)
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
});
Hey guys, for anyone at this point in time looking have a simple clients slider in their website… I published a online component for BS5 in BSS. Just type “client slider” to find it.