`buildfire.components.contentSlider`

The contentSlider component provides a tool to display a navigational bar with simple left (previous) and right (next) controls anywhere inside your plugin.

Requirements

<head>
  <!-- CSS -->
  <link rel="stylesheet" href="../../../styles/components/contentSlider/contentSlider.css" />

  <!-- JS -->
  <script src="../../../scripts/buildfire.min.js"></script>
  <script src="../../../scripts/buildfire/components/contentSlider/contentSlider.js"></script>
</head>

In your widget body, create an html container element for the content slider.

<body>
  <div id="slider"></div>
</body>

Methods

const contentSlider = new buildfire.components.contentSlider(selector, options);

ContentSlider class constructor method which initializes the content slider component.

const contentSlider = new buildfire.components.contentSlider('#slider', {
  items: [
    { id: '23', title: '23 November, 2022', subtitle: 'Sunday' },
    { id: '24', title: '24 November, 2022', subtitle: 'Monday' },
    { id: '25', title: '25 November, 2022', subtitle: 'Tuesday' },
  ],
});

`contentSlider()`

Arguments

Name	Type	Required	Description	Default
`selector`	string	yes	CSS selector of element that will contain component
`options`	object	no	`options object`

`options`

Name	Type	Required	Description	Default
`items`	array	yes	`item object`
`settings`	object	no	`settings object`

`item`

Name	Type	Required	Description	Default
`id`	number	yes	Unique id	null
`title`	string	yes	Title of the item	null
`subtitle`	string	no	Subtitle of the item	null

`settings`

Name	Type	Required	Description	Default
`showSubtitle`	boolean	no	Hides or shows the subtitle of the content	true
`startingIndex`	number	no	Specifies which item to start from	0

`insertAt()`

contentSlider.insertAt(options, callback)

Appends one or more items to the specified position of the content slider component.

const contentSlider = new buildfire.components.contentSlider('#slider', {
    items: [
        { id: "23", title: "23 November, 2022", subtitle: "Sunday" }
        { id: "24", title: "24 November, 2022", subtitle: "Monday" },
        { id: "25", title: "25 November, 2022", subtitle: "Tuesday" }
    ]
});

contentSlider.insertAt({
    items: [{ id: "22", title: "22 November, 2022", subtitle: "Saturday" }],
    index: 0,
    position: 'before'
}, () => console.log('Inserted Data'));

Arguments

Name	Type	Required	Description	Default
`options`	object	yes	options object
`callback`	function	yes	Completion callback

`options`

Name	Type	Required	Description
`items`	array/object	yes	Array of items, or single item to be appended to list view.
`index`	number	yes	index to specify where to insert items
`position`	string	yes	specify how to insert items on the index, options are `before`/`after`

`append()`

contentSlider.append(items, callback)

Appends one or more items to the content slider.

const contentSlider = new buildfire.components.contentSlider('#slider', {
  items: [
    { id: '23', title: '23 November, 2022', subtitle: 'Sunday' },
    { id: '24', title: '24 November, 2022', subtitle: 'Monday' },
    { id: '25', title: '25 November, 2022', subtitle: 'Tuesday' },
  ],
});

contentSlider.append(
  [
    {
      id: '26',
      title: '26 November, 2022',
      subtitle: 'Wednesday',
    },
  ],
  () => console.log('Appended Data')
);

Arguments

Name	Type	Required	Description	Default
`items`	[object] or object	yes	Array of items, or single item to be appended to list view.
`callback`		yes	provides a callback to do something when the items are appended

`prepend()`

contentSlider.prepend(items, callback)

Prepends one or more items to the content slider.

const contentSlider = new buildfire.components.contentSlider('#slider', {
  items: [
    { id: '23', title: '23 November, 2022', subtitle: 'Sunday' },
    { id: '24', title: '24 November, 2022', subtitle: 'Monday' },
    { id: '25', title: '25 November, 2022', subtitle: 'Tuesday' },
  ],
});

contentSlider.prepend(
  [
    {
      id: '22',
      title: '22 November, 2022',
      subtitle: 'Saturday',
    },
  ],
  () => console.log('Prepended Data')
);

Arguments

Name	Type	Required	Description	Default
`items`	[object] or object	yes	Array of items, or single item to be prepended to list view.
`callback`		yes	Provides callback to do something when the items are prepended

`update()`

contentSlider.update(id, data)

Updates an item. If the item is the current content, updates the slider accordingly.

const contentSlider = new buildfire.components.contentSlider('#slider', {
  items: [
    { id: '23', title: '23 November, 2022', subtitle: 'Sunday' },
    { id: '24', title: '24 November, 2022', subtitle: 'Monday' },
    { id: '25', title: '25 November, 2022', subtitle: 'Tuesday' },
  ],
});

contentSlider.update('24', {
  id: '24',
  title: '24 November, 2022',
  subtitle: 'I Hate Mondays',
});

Arguments

Name	Type	Required	Description	Default
`id`	string	yes	Object id
`data`	object	yes	Object to be updated

`remove()`

contenSlider.remove(id)

Removes an item from the content slider

note

If the item is the current index component, it will render the next or previous item depending on the number of items and the current index. In the example below the component will render the item with the id "24" after removing the item with the id "23".

const contentSlider = new buildfire.components.contentSlider('#slider', {
  items: [
    { id: '23', title: '23 November, 2022', subtitle: 'Sunday' },
    { id: '24', title: '24 November, 2022', subtitle: 'Monday' },
    { id: '25', title: '25 November, 2022', subtitle: 'Tuesday' },
  ],
});

contentSlider.remove('23');

Arguments

Name	Type	Required	Description	Default
`id`	string	yes	Object id

`next()`

contentSlider.next()

Sets the next item as the current content of the slider.

const contentSlider = new buildfire.components.contentSlider('#slider', {
  items: [
    { id: '23', title: '23 November, 2022', subtitle: 'Sunday' },
    { id: '24', title: '24 November, 2022', subtitle: 'Monday' },
    { id: '25', title: '25 November, 2022', subtitle: 'Tuesday' },
  ],
});

contentSlider.next();

`previous()`

contentSlider.previous()

Sets the previous item as the current content of the slider.

const contentSlider = new buildfire.components.contentSlider('#slider', {
  items: [
    { id: '23', title: '23 November, 2022', subtitle: 'Sunday' },
    { id: '24', title: '24 November, 2022', subtitle: 'Monday' },
    { id: '25', title: '25 November, 2022', subtitle: 'Tuesday' },
  ],
});

contentSlider.next();
setTimeout(() => {
  contentSlider.previous();
}, 2000);

`enable()`

contentSlider.enable(direction)

Enables the corresponding arrow for the pointed direction of the slider.

const contentSlider = new buildfire.components.contentSlider('#slider', {
  items: [
    { id: '23', title: '23 November, 2022', subtitle: 'Sunday' },
    { id: '24', title: '24 November, 2022', subtitle: 'Monday' },
    { id: '25', title: '25 November, 2022', subtitle: 'Tuesday' },
  ],
});

contentSlider.enable('previous');

Arguments

Name	Type	Required	Description	Default
`direction`	string	yes	`next` or `previous`	null

`disable()`

contentSlider.disable(direction)

Enables the corresponding arrow for the pointed direction of the slider.

const contentSlider = new buildfire.components.contentSlider('#slider', {
  items: [
    { id: '23', title: '23 November, 2022', subtitle: 'Sunday' },
    { id: '24', title: '24 November, 2022', subtitle: 'Monday' },
    { id: '25', title: '25 November, 2022', subtitle: 'Tuesday' },
  ],
});

contentSlider.disable('next');

Arguments

Name	Type	Required	Description	Default
`direction`	string	yes	`next` or `previous`	null

`getCurrent()`

contentSlider.getCurrent(callback)

Retrieves the current item rendered in the component.

const contentSlider = new buildfire.components.contentSlider('#slider', {
  items: [
    { id: '23', title: '23 November, 2022', subtitle: 'Sunday' },
    { id: '24', title: '24 November, 2022', subtitle: 'Monday' },
    { id: '25', title: '25 November, 2022', subtitle: 'Tuesday' },
  ],
});

contentSlider.getCurrent();

Arguments

Name	Type	Required	Description	Default
`callback`		yes	Returns the current item

`setCurrent()`

contentSlider.setCurrent(options)

Sets the current item of the component and replaces current content with the new one.

const contentSlider = new buildfire.components.contentSlider('#slider', {
  items: [
    { id: '23', title: '23 November, 2022', subtitle: 'Sunday' },
    { id: '24', title: '24 November, 2022', subtitle: 'Monday' },
    { id: '25', title: '25 November, 2022', subtitle: 'Tuesday' },
  ],
});

contentSlider.setCurrent({
  id: '24',
});

Arguments

Name	Type	Required	Description	Default
`options`	object	yes	options object

`options`

Name	Type	Required	Description	Default
`id`	string/number	yes	item id
`index`	number	yes	item index

note

At least one of the options object parameters must be specified.

`refresh()`

contentSlider.refresh()

Refreshes the component to apply new options provided and re-renders current content.

const contentSlider = new buildfire.components.contentSlider('#slider', {
  items: [
    { id: '23', title: '23 November, 2022', subtitle: 'Sunday' },
    { id: '24', title: '24 November, 2022', subtitle: 'Monday' },
    { id: '25', title: '25 November, 2022', subtitle: 'Tuesday' },
  ],
});

contentSlider.options.settings.showSubtitle = false;
contentSlider.refresh();

Handlers

The following event handlers can be assigned:

`onNext(event)`

Triggered when the user clicks on the next arrow.

contentSlider.onNext = (event) => {
  console.log(`Navigated to item id ${event.item.id}`);
};

Arguments

Name	Type	Required	Description	Default
`event`	object	yes	holds item clicked

`Event`

Name	Type	Required	Description	Default
`item`	object	yes	clicked item object	null

`onPrevious(event)`

Triggered when the user clicks on the previous arrow.

contentSlider.onPrevious = (event) => {
  console.log(`Navigated to item id ${event.item.id}`);
};

Arguments

Name	Type	Required	Description	Default
`event`	object	yes	holds item clicked

`Event`

Name	Type	Required	Description	Default
`item`	object	yes	clicked item object	null

Example

Code

const contentSlider = new buildfire.components.contentSlider('#slider', {
  items: [
    { id: '23', title: '23 November, 2022', subtitle: 'Sunday' },
    { id: '24', title: '24 November, 2022', subtitle: 'Monday' },
    { id: '25', title: '25 November, 2022', subtitle: 'Tuesday' },
  ],
  settings: {
    startingIndex: 1,
  },
});

//managing items in the component
contentSlider.append(
  [
    { id: '26', title: '26 November, 2022', subtitle: 'Wednesday' },
    { id: '27', title: '27 November, 2022', subtitle: 'Thursday' },
    { id: '28', title: '28 November, 2022', subtitle: 'Friday' },
  ],
  () => console.log('Appended Data')
);

contentSlider.insertAt(
  {
    items: [
      { id: '30', title: '30 November, 2022', subtitle: 'Sunday' },
      { id: '29', title: '29 November, 2022', subtitle: 'Saturday' },
    ],
    index: 0,
    position: 'after',
  },
  () => console.log('Inserted Data')
);

contentSlider.update('26', { id: '26', title: '26 November, 2022', subtitle: 'Happy Wednesday' });

contentSlider.remove('26');

//controlling component
contentSlider.setCurrent({ index: '2' });

contentSlider.disable('previous');
contentSlider.disable('next');

contentSlider.options.settings.showSubtitle = false;
contentSlider.refresh();

contentSlider.enable('previous');
contentSlider.enable('next');

contentSlider.previous();
setTimeout(() => {
  contentSlider.next();
}, 2000);

//handling events from the component
contentSlider.onPrevious = (event) => {
  console.log(event);
};

contentSlider.onNext = (event) => {
  console.log(event);
};

buildfire.components.contentSlider

Requirements​

Widget​

Methods​

contentSlider()​

Arguments​

options​

item​

settings​

insertAt()​

Arguments​

options​

append()​

Arguments​

prepend()​

Arguments​

update()​

Arguments​

remove()​

Arguments​

next()​

previous()​

enable()​

Arguments​

disable()​

Arguments​

getCurrent()​

Arguments​

setCurrent()​

Arguments​

options​

refresh()​

Handlers​

onNext(event)​

Arguments​

Event​

onPrevious(event)​

Arguments​

Event​

Example​

`buildfire.components.contentSlider`

Requirements

Widget

Methods

`contentSlider()`

Arguments

`options`

`item`

`settings`

`insertAt()`

Arguments

`options`

`append()`

Arguments

`prepend()`

Arguments

`update()`

Arguments

`remove()`

Arguments

`next()`

`previous()`

`enable()`

Arguments

`disable()`

Arguments

`getCurrent()`

Arguments

`setCurrent()`

Arguments

`options`

`refresh()`

Handlers

`onNext(event)`

Arguments

`Event`

`onPrevious(event)`

Arguments

`Event`

Example