HOME > INTERNET > WEBMASTER
Make multiple sliders work with Blaze Slider
How to operate several sliders on the same Internet page, with the free Blaze Slider service? When you follow the instructions for installing a slider with the CSS and JavaScript files that you include on your website, it works without any problem. However, when we try to multiply the sliders, only the first one works, the others are poorly displayed. So how to do it?
There are no obvious helps on the official Blaze Slider website. There are only a few indications. And when this article was published, there was absolutely no help either on the sites dedicated to mutual aid between developers of codes for the Web.
Here is the code you need to put after a slider:
Instead of putting this code, after each block of lines of a slider, you must delete it. Instead, you must put the following code, at the very end, i.e. after the last slider.
Source of inspiration: https://blaze-slider.dev/docs/Tutorial/initialize-slider/
There are no obvious helps on the official Blaze Slider website. There are only a few indications. And when this article was published, there was absolutely no help either on the sites dedicated to mutual aid between developers of codes for the Web.
Here is the code you need to put after a slider:
<!-- playground-->
<script>
const sliderEl = document.querySelector(".blaze-slider");
const blazeSlider = new BlazeSlider(sliderEl, {
all: {
enableAutoplay: true,
autoplayInterval: 15000,
slidesToScroll: 6,
slidesToShow: 6,
transitionDuration: 300,
loop: true
},
"(max-width: 900px)": {
slidesToShow: 2,
slidesToShow: 2,
slidesGap: "40px"
},
"(max-width: 500px)": {
slidesToShow: 1,
slidesToScroll: 1
}
});
// listen for slide event
blazeSlider.onSlide(
(pageIndex, firstVisibleSlideIndex, lastVisibleSlideIndex) => {
console.log({
pageIndex,
firstVisibleSlideIndex,
lastVisibleSlideIndex
});
}
);
</script>
Instead of putting this code, after each block of lines of a slider, you must delete it. Instead, you must put the following code, at the very end, i.e. after the last slider.
<!-- playground-->
<script>
const sliderEl = document.querySelectorAll(".blaze-slider").forEach(sliderEl => {
const blazeSlider = new BlazeSlider(sliderEl, {
all: {
enableAutoplay: true,
autoplayInterval: 15000,
slidesToScroll: 6,
slidesToShow: 6,
transitionDuration: 300,
loop: true
},
"(max-width: 900px)": {
slidesToShow: 2,
slidesToShow: 2,
slidesGap: "40px"
},
"(max-width: 500px)": {
slidesToShow: 1,
slidesToScroll: 1
}
});
// listen for slide event
blazeSlider.onSlide(
(pageIndex, firstVisibleSlideIndex, lastVisibleSlideIndex) => {
console.log({
pageIndex,
firstVisibleSlideIndex,
lastVisibleSlideIndex
});
}
);
})
</script>
Source of inspiration: https://blaze-slider.dev/docs/Tutorial/initialize-slider/
Note: Commissions may be earned from the links above.
This page contains references to products from one or more of our advertisers. We may receive compensation when you click on links to those products. For an explanation of our advertising policy, please visit this page.
Related posts:
How to check that the rewrite mode works?
https://w3ask.com/check-rewrite-mode-works/
https://w3ask.com/check-rewrite-mode-works/
If you have just activated the rewrite mode, you probably want to check now that it is working properly. The best way to know if this is the ...
Best Alternative to Slick Slider
https://w3ask.com/best-alternative-slick-slider/
https://w3ask.com/best-alternative-slick-slider/
Slick Slider has long been the best javascript code for creating quality sliders, very fluid, fast and easy to create. With the scripts of this ...
Rewrite mode does not work with WordPress
https://w3ask.com/rewrite-mode-does-not-work-wordpress/
https://w3ask.com/rewrite-mode-does-not-work-wordpress/
Despite the activation of the rewrite mode to rewrite the urls of a WordPress blog, and the installation of a htaccess file, the rewrite function ...
How to add a share button on social networks with WordPress
https://w3ask.com/add-share-button-social-networks-wordpress/
https://w3ask.com/add-share-button-social-networks-wordpress/
Nowadays, the use of social networks is essential if you want to make your website known. Adding a button to your articles allows users to share ...
How to check that Sendmail works
https://w3ask.com/check-sendmail-works/
https://w3ask.com/check-sendmail-works/
How to see what is the status of the Sendmail application and if this Linux application is working properly? Sendmail allows you to send emails ...