Skip to main content

Demos

slidesToShow​

new BlazeSlider(el, {
  all: {
    slidesToShow: 3,
  },
})
1
2
3
4
5
6 
new BlazeSlider(el, {
  all: {
    slidesToShow: 1,
  },
})
1
2
3
4
5
6

slidesToScroll​

new BlazeSlider(el, {
  all: {
    slidesToShow: 3,
    slidesToScroll: 3,
  },
})
1
2
3
4
5
6 
new BlazeSlider(el, {
  all: {
    slidesToShow: 3,
    slidesToScroll: 1,
  },
})
1
2
3
4
5
6

slideGap​

new BlazeSlider(el, {
  all: {
    slidesToShow: 3,
    slideGap: '10px',
  },
})
1
2
3
4
5
6 
new BlazeSlider(el, {
  all: {
    slidesToShow: 3,
    slideGap: '50px',
  },
})
1
2
3
4
5
6

loop​

new BlazeSlider(el, {
  all: {
    slidesToShow: 3,
    loop: false,
  },
})
1
2
3
4
5
6 
new BlazeSlider(el, {
  all: {
    slidesToShow: 3,
    loop: true,
  },
})
1
2
3
4
5
6

transitionDuration​

new BlazeSlider(el, {
  all: {
    transitionDuration: 200,
    slidesToShow: 3,
  },
})
1
2
3
4
5
6 
new BlazeSlider(el, {
  all: {
    transitionDuration: 400,
    slidesToShow: 3,
  },
})
1
2
3
4
5
6

transitionTimingFunction​

new BlazeSlider(el, {
  all: {
    transitionTimingFunction: 'ease',
    slidesToShow: 3,
  },
})
1
2
3
4
5
6 
new BlazeSlider(el, {
  all: {
    transitionTimingFunction: 'linear',
    slidesToShow: 3,
  },
})
1
2
3
4
5
6

enableAutoplay​

new BlazeSlider(el, {
  all: {
    slidesToShow: 3,
    enableAutoplay: true,
  },
})
1
2
3
4
5
6 
new BlazeSlider(el, {
  all: {
    enableAutoplay: false,
    slidesToShow: 1,
  },
})
1
2
3
4
5
6

autoplayDirection​

new BlazeSlider(el, {
  all: {
    slidesToShow: 3,
    enableAutoplay: true,
    autoplayDirection: 'to left',
  },
})
1
2
3
4
5
6 
new BlazeSlider(el, {
  all: {
    enableAutoplay: true,
    slidesToShow: 1,
    autoplayDirection: 'to right',
  },
})
1
2
3
4
5
6

stopAutoplayOnInteraction​

new BlazeSlider(el, {
  all: {
    slidesToShow: 3,
    enableAutoplay: true,
    stopAutoplayOnInteraction: true,
  },
})
1
2
3
4
5
6 
new BlazeSlider(el, {
  all: {
    enableAutoplay: true,
    slidesToShow: 1,
    stopAutoplayOnInteraction: false,
  },
})
1
2
3
4
5
6

draggable​

new BlazeSlider(el, {
  all: {
    draggable: true,
    slidesToShow: 3,
  },
})
1
2
3
4
5
6 
new BlazeSlider(el, {
  all: {
    draggable: false,
    slidesToShow: 3,
  },
})
1
2
3
4
5
6