BemSlide Demo

La versione 1.8 del BemSlide è uscita! Nuove funzionalità e bug fix!



__user's guide





Follow these simple 4 steps:



1) Copy bemslide folder in your webspace;


2) Include in your page both .js and .css files;


3) Place your slider’s sources (images, divs or whatever html elements you want) in a container, as shown below:


    <div id=“myslideshow”>  //container


<img src=“image1.jpg” />  //slide 1


<div>  //slide 2

    <h1>Lorem ipsum</h1>

    Lorem ipsum isn’t a simple dummy text, its roots take origin a lot of time ago… 



<span>Sit dolor et amet!</span>  //slide 3


<img src=“image2.png” />  //slide 4





4) Add this script anywhere in your page:

    <script type=“text/javascript”>











         auto: bool - set auto sliding (default: true);

        controls: bool - set control arrows (default: true);

         index: bool - set slide selector (default: false);

        transition: string - type of transition (options: 'slide', 'fade', ‘rotate’; default: 'slide');

         changeSpeed: number - duration of  sliding animation in milliseconds when 'slide' transition is selected (default: 2000);

         fadeInSpeed: number - speed in milliseconds of fading in when 'fade' transition is selected (default: 500);

         fadeOutSpeed: number - speed in milliseconds of fading out when 'fade' transition is selected (default: 500);

         rotateSpeed: number - duration of rotating animation in milliseconds when ‘rotate’ transition is selected (default: 1000);

         wait: number - duration of still image in milliseconds when 'slide' transition is selected (default: 5000);

        pausebtn: bool - set play/pause button when "auto" is true (default: true);

        startPaused: bool - start paused even if "auto" is true (default: false);

        pauseHover: bool - pause sliding when mouse is over (default: true);

        cycle: bool - cycle sliding without "rewind" effect when 'slide' transition is selected (default: true);

        slideOffset: number - select element from which to start the slider when 'slide' transition is selected (default: 1);

         slideWidth: number/percentage - width of a single slide (default: '100%');

         autoHeight: bool - automatically set the height of slider as of its content (default: false);

         slideContent: string - behavior of slide content comparatively to his wrapper (options: ‘normal’, ‘contain’, ‘cover’; default: ‘normal’);

         hideControls: bool - automatically hide/show controls (arrows, play/pause button) on mouse out/in (default: true);

         vCenter: bool - vertical center slides (default: true);

         caption: bool - add caption to slides using each slide’s attribute “title” (for title) and “longdesc” (for description) (default: false);

         groupCaption: bool - if true make the captions’ open and close buttons to affect all the slide’s captions (default: true);

         fullScreen: bool - generate a button for switching between normal and full screen mode (default: true);

         hash: bool - make the slide number appear in url for sharing and linking directly a particular slide (default: false).

         unbound: bool - make the slide movement visible outside the slider box too; this function obviously doesn’t makes any change when using ‘fade’ transition mode (default: true).






__fixes and upgrades on 1.8


- ‘rotate’ transition mode added;

- unbound mode added.








Download BemSlide Pack



Per informazioni e supporto scrivi a -> mail(at)bemcalavera.com

Ultimi post

Love food, hate waste!

Joyrix è una app gratuita (con un portale web a completamento del servizio) ideata per ridurre gli sprechi alimentari, che mette in relazione direttamente e in tempo...

Il poster di Torino BeBi per Save the Children

Ho di nuovo avuto l'onore e il piacere di lavorare con la magica squadra redazionale di Save the Children (grazie alla mia partnership con

Motion graphics

Ecco una piccola raccolta di lavori in movimento...     Trailer di Melting...

Back Contattami Informativa sull'utilizzo dei cookies