Requirement
Start
- HTML
- JS
...
...
const slider = document.querySelector("#..."); console.log(slider.iteranor); // return current iteranor console.log(slider.size); // return 4 console.log(slider.interval); // return 5000 console.log(slider.autoplay); // return 1 /* Methodes */ slider.play(); slider.pause(); slider.forward(); slider.backward(); slider.setIterator(i);
![](../../assets/images/diap2.jpg)
![](../../assets/images/diap-clips.jpg)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,![](../../assets/images/diap1.jpg)
![](../../assets/images/diap-clips-2.jpg)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,Remote:
- Default
- Custom
- :root
-
:root { --zb-slider-remote-background: rgba(90,90,90,0.9); --zb-slider-remote-color: #fff; --zb-slider-bullets-background: #fff; --zb-slider-bullets-color: rgba(90,90,90,0.9); }
...
...
![](../../assets/images/diap2.jpg)
![](../../assets/images/diap-clips.jpg)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,![](../../assets/images/diap1.jpg)
![](../../assets/images/diap-clips-2.jpg)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,
...
...
![](../../assets/images/diap2.jpg)
![](../../assets/images/diap-clips.jpg)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,![](../../assets/images/diap1.jpg)
![](../../assets/images/diap-clips-2.jpg)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,:root { --zb-slider-remote-background: orange; --zb-slider-remote-color: white; --zb-slider-bullets-background: red; --zb-slider-bullets-color: white; }
...
...
![](../../assets/images/diap2.jpg)
![](../../assets/images/diap-clips.jpg)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,![](../../assets/images/diap1.jpg)
![](../../assets/images/diap-clips-2.jpg)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,Attributes
[zb-interval]
...
...
![](../../assets/images/diap2.jpg)
![](../../assets/images/diap-clips.jpg)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,![](../../assets/images/diap1.jpg)
![](../../assets/images/diap-clips-2.jpg)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,[zb-off]
...
...
![](../../assets/images/diap2.jpg)
![](../../assets/images/diap-clips.jpg)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,![](../../assets/images/diap1.jpg)
![](../../assets/images/diap-clips-2.jpg)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,[zb-gallery]
![](../../assets/images/thumb29.jpg)
![](../../assets/images/thumb8.jpg)
![](../../assets/images/thumb30.jpg)
![](../../assets/images/thumb10.jpg)
Class
Transition:
- Fade
- Up & Down
![](../../assets/images/diap2.jpg)
![](../../assets/images/diap1.jpg)
![](../../assets/images/diap3.jpg)
...
...
![](../../assets/images/diap2.jpg)
![](../../assets/images/diap-clips.jpg)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,![](../../assets/images/diap1.jpg)
![](../../assets/images/diap-clips-2.jpg)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,Alignement:
- Default
- Top
- Bottom
![](../../assets/images/diap2.jpg)
![](../../assets/images/diap1.jpg)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,![](../../assets/images/diap-clips-2.jpg)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,![](../../assets/images/diap3.jpg)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,![](../../assets/images/diap2.jpg)
![](../../assets/images/diap1.jpg)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,![](../../assets/images/diap-clips-2.jpg)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,![](../../assets/images/diap3.jpg)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,![](../../assets/images/diap2.jpg)
![](../../assets/images/diap1.jpg)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,![](../../assets/images/diap-clips-2.jpg)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,![](../../assets/images/diap3.jpg)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias laboriosam, obcaecati laudantium provident,