Wordpress widget: Bootstrap carousel

carousel-template

<div id="rotator" class="carousel slide" data-ride="carousel">
	<div class="carousel-inner">
		<?php dynamic_sidebar('rotator'); ?>
	</div>
  <ol class="carousel-indicators">
    <?php
      foreach (wp_get_sidebars_widgets()['rotator'] as $key => $id) {
        if($key == 0) echo '<li data-target="#rotator" data-slide-to="'.$key.'" class="active"></li>';
        else echo '<li data-target="#rotator" data-slide-to="'.$key.'"></li>';
      }
    ?>
  </ol>
  <a class="left carousel-control" href="#rotator" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#rotator" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

register-bootstrap-carousel-widget

register_sidebar(array(
  'name'          => __('Banner rotator', 'rotator'),
  'id'            => 'rotator',
  'before_widget' => '',
  'after_widget'  => '',
  'before_title'  => '<h3>',
  'after_title'   => '</h3>',
));

widget-init

<?php
/**
* @package rotator
* @version 1.0
*/
/*
Plugin Name: Banner rotator widget
Plugin URI:
Description: 
Author: patryk-gruszka
Version: 1.0
Author URI: http://example.com
*/
/**
 * rotator Widget Class
 */
class rotator_widget extends WP_Widget {
  /** constructor -- name this the same as the class above */
  function rotator_widget() {
    parent::WP_Widget(false, $name = 'Rotator slide');	
    function getWidgetIndex($widgetId) {
      foreach (wp_get_sidebars_widgets()['rotator'] as $key => $id) {
          if($widgetId  == $id) return $key; 
      }
    }
  }
  /** @see WP_Widget::widget -- do not rename this */
  function widget($args, $instance) {
    extract( $args );
    $widgetId = $args['widget_id'];
    $widgetIndex = getWidgetIndex($widgetId);
    $title = apply_filters('widget_title', $instance['title']);
    $text = $instance['text'];
    $image = $instance['image'];
    ?>
      <?php  echo $before_widget; ?>
      <div class="item <?php  if($widgetIndex == 0) echo ' active'; ?>">
        <?php  if ( $image && $title )   ?> 
        <img src="<?php  echo $image; ?>" alt="<?php  echo $title; ?>" /> 
        <div class="carousel-caption">
          <?php  if ( $title )echo $before_title . $title . $after_title; ?>
          <?php  echo $text; ?>
        </div>
      </div>
      <?php  echo $after_widget; ?>
    <?php
  }

  /** @see WP_Widget::update -- do not rename this */
  function update($new_instance, $old_instance) {
    $instance = $old_instance;
    $instance['title'] = strip_tags($new_instance['title']);
    $instance['text'] = strip_tags($new_instance['text']);
    $instance['image'] = strip_tags($new_instance['image']);
    return $instance;
  }

  /** @see WP_Widget::form -- do not rename this */
  function form($instance) {
    $title = @esc_attr($instance['title']);
    $text= @esc_attr($instance['text']);
    $image = @esc_attr($instance['image']);
    ?>
      <p>
        <label for="<?php  echo $this->get_field_id('title'); ?>"><?php  _e('Title:'); ?></label> 
        <input class="widefat" id="<?php  echo $this->get_field_id('title'); ?>" name="<?php  echo $this->get_field_name('title'); ?>" type="text" value="<?php  echo $title; ?>" />
      </p>
      <p>
        <label for="<?php  echo $this->get_field_id('text'); ?>"><?php  _e('Text'); ?></label> 
        <textarea class="widefat" rows="16" cols="20" id="<?php  echo $this->get_field_id('text'); ?>" name="<?php  echo $this->get_field_name('text'); ?>"><?php  echo $text; ?></textarea>
      </p>
      <p>
        <label for="<?php  echo $this->get_field_id('image'); ?>"><?php  _e('Image URL'); ?></label> 
        <input class="widefat" id="<?php  echo $this->get_field_id('image'); ?>" name="<?php  echo $this->get_field_name('image'); ?>" type="text" value="<?php  echo $image; ?>" />
      </p>
    <?php 
  }

}

// end class rotator_widget
add_action('widgets_init', create_function('', 'return register_widget("rotator_widget");'));
?>