(+84) 463.28.7979

bxCarousel


This is a ‘Carousel’ Script. So-called ‘Carousel’ is a simple thumbnail gallery where slides are shown consequentially. bxCarousel is a jQuery carousel plug-in that provides the ability to specify how many elements are displayed at time. Also, the number of elements in which to move the slider can be specified. You can find full installation and configuration instructions by following the links.

JavaScript

In order to make the script work, the index-#.html file with a ‘carousel’ should contain these lines of HTML code:

1

The section of the index-#.html file contains these lines of code that initialize the script functionality with basic values:

2

Here the script initializes an element with the #example1 id with the following attributes:

• display_num:4,- number of elements to be visible;
• move:4, – number of elements to the shift the slides;
• speed:500, – number in milliseconds it takes to finish slide animation;
• margin:0, – right margin to be applied to each

  • element (do not include “px”);
    • auto:false, – automatically play slides without a user click;
    • auto_interval:2000, – the amount of time in milliseconds between each auto animation;
    • auto_dir:’next’, – direction of auto slideshow (options: ‘next’, ‘prev’);
    • auto_hover:false, – determines if the slideshow will stop when user hovers over slideshow;
    • next_text:’next’, – text to be used for the ‘next’ control;
    • next_image:”, – image to be used for the ‘next’ control;
    • prev_text:’prev’, – text to be used for the ‘prev’ control;
    • prev_image:”, – image to be used for the ‘prev’ control;
    • controls:true – determines if controls will be displayed.

    HTML

    Below you can see the HTML script representation:

  • 3

    CSS

    You can find script related stylesheet in the main style.css file.

    4

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>