I need a slider to showcase client logos. I don’t see anything functional in the bootstrap studio library or the online library. All the carousels images are too big and none of the client sliders function. I found some code examples online here https://codepen.io/gvzq/pen/OJVvzJz and here Bootstrap 4 clients brand logo carousel slider Example but I’m having trouble importing them into bootstrap studio.
Because of your question I found this, thank you
In the library with components, the slider is named Simple Slider. You can use it like this.
That isn’t working for me. The images are huge and don’t look anything like the link you posted. How did you get it small?
Glad the question was helpful. I tried the codepen slider you linked to but it doesn’t look the same in my website. The images are huge 800 x 800 pixels. They are arrayed vertically and don’t move. Maybe I didn’t import the code correctly? I made a custom code block and copy pasted the html into it. Then added the css and js to a slider.css and slider.js files then imported them.
You can read about swiper here
in the example I initialized Swiper like this
new Swiper('.clients-slider', {
speed: 400,
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
slidesPerView: 'auto',
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true,
},
breakpoints: {
320: {
slidesPerView: 2,
spaceBetween: 40,
},
480: {
slidesPerView: 3,
spaceBetween: 60,
},
640: {
slidesPerView: 4,
spaceBetween: 80,
},
992: {
slidesPerView: 6,
spaceBetween: 120,
},
},
});
Is this the same as the simple slider that is built into bootstrap studio or is it a 3rd party tool that would have to be imported? If so, how would I import it? The code sample you included looks like javascript.
xxxx
+1 for Swiper.js its excellent.
Yes, the Simple Slider is built with Swiper version 6.4.8. The current version of Swiper is 11.2.1. If you want to use the latest version, refer to the Swiper documentation for instructions on how to install and customize the slider.
The documentation assumes someone fluent in html and css, which I am not. I spent all day trying to figure out how to load images into the slider until I finally figured out I have to include an img src=myimage.jpg in the right place. Is there any how-to for someone like me that goes step by step through the very basics?
xxxx