Wordpress widget with option in JS - php

Question

I was wondering if in the JS from the code below I can add an option that can be set from the widget, when in wordpress backend, I hope you get my point.
More specifically, I need to add an option for slide duration. In the jCarousel that I am using, that duration is specified in $('.slides_widget').jcarousel , by the "auto: 5", so I must replace the "5" with the "slide_duration" option that is included in the widget below as you can see. How should I do it?
<?php
/* Slides Widget */
class Slides_Widget extends WP_Widget {
function Slides_Widget() {
$widget_ops = array('classname' => 'widget_slides', 'description' => __('Create slides with this widget.'));
$control_ops = array('width' => 400, 'height' => 350);
parent::__construct('slides_widget', __('Slides_Widget'), $widget_ops, $control_ops);
}
function widget( $args, $instance ) {
extract($args);
$title = apply_filters( 'widget_title', empty( $instance['title'] ) ? '' : $instance['title'], $instance, $this->id_base );
$slide_duration = $instance['slide_duration'];
$text = apply_filters( 'widget_text', empty( $instance['text'] ) ? '' : $instance['text'], $instance );
echo $before_widget;
if ( !empty( $title ) ) { echo $before_title . $title . $after_title; } ?>
<div class="textwidget">
<ul id="slides_widget" class="slides_widget">
<?php echo !empty( $instance['filter'] ) ? wpautop( $text ) : $text; ?>
</ul>
</div>
<?php
echo $after_widget;
}
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
$instance['slide_duration'] = absint($new_instance['slide_duration']);
if (!$instance['slide_duration']) {
$instance['slide_duration'] = "";
}
if ( current_user_can('unfiltered_html') )
$instance['text'] = $new_instance['text'];
else
$instance['text'] = stripslashes( wp_filter_post_kses( addslashes($new_instance['text']) ) );
$instance['filter'] = isset($new_instance['filter']);
return $instance;
}
function form( $instance ) {
$defaults = array( 'filter' => true, 'title' => 'Create Your Slides', 'text' => '<li>Each slide must be in a "li" element, like this one.</li>
<li>Or like this one. Save it and check it.</li>' );
$instance = wp_parse_args( (array) $instance, $defaults );
$title = strip_tags($instance['title']);
$text = esc_textarea($instance['text']);
$slide_duration = strip_tags($instance['slide_duration']);
?>
<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 esc_attr($title); ?>" /></p>
<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><label for="<?php echo $this->get_field_id('slide_duration'); ?>"><?php _e('Slide Duration:'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('slide_duration'); ?>" name="<?php echo $this->get_field_name('slide_duration'); ?>" type="text" value="<?php echo esc_attr($slide_duration); ?>" />
</p>
<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" /></p> <p><input id="<?php echo $this->get_field_id('filter'); ?>" name="<?php echo $this->get_field_name('filter'); ?>" type="checkbox" <?php checked(isset($instance['filter']) ? $instance['filter'] : 0); ?> /> <label for="<?php echo $this->get_field_id('filter'); ?>"><?php _e('Automatically add paragraphs'); ?></label></p>
<?php
}
}
register_widget('Slides_Widget');
function pixy_asd() {
?>
<script type='text/javascript'>
jQuery(document).ready(function($) {
/* Slides Widget */
function mycarousel_initCallback(carousel)
{
carousel.buttonNext.bind('click', function() {
carousel.startAuto(0);
});
carousel.buttonPrev.bind('click', function() {
carousel.startAuto(0);
});
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};
$('.slides_widget').jcarousel({
auto: 5,
wrap: 'last',
visible: 1,
scroll: 1,
initCallback: mycarousel_initCallback
});
});
</script>
<?php
}
add_action('wp_head', 'pixy_asd');
function pixy_slides_widget_script() {
wp_enqueue_script('pixySlidesJS', get_stylesheet_directory_uri() . '/admin/include/theme-slides-widget/js/slides_widget.js', array('jquery'), true);
wp_enqueue_style( 'pixySlidesCSS', get_stylesheet_directory_uri() . '/admin/include/theme-slides-widget/css/slides_widget.css', false, 1, 'screen' );
}
add_action('wp_enqueue_scripts', 'pixy_slides_widget_script');
?>
Please let me know if you need more clarification.
Thank you!

Answer 1

in form() add:
<input type="hidden" id="slide_duration" value="<?php echo $slide_duration;?>">
then use instead of auto: 5 this:
auto: $("#widgets-right #slide_duration").val()
What about a php solution? In pixy_asd():
$options = get_option('Slides_Widget');
$slide_duration = $options['slide_duration'];
?>
...
$('.slides_widget').jcarousel({
auto: <?php echo $slide_duration;?>,
wrap: 'last',