Widget WordPress avec option en JS

Je me demandais si dans le JS du code ci-dessous, je pouvais ajouter une option qui peut être définie à partir du widget, lorsque dans le backend wordpress, j’espère que vous comprenez mon point.

Plus précisément, je dois ajouter une option pour la durée de la diapositive. Dans le jCarousel que j’utilise, cette durée est spécifiée dans $(‘.slides_widget’).jcarousel , par le « auto: 5 », donc je dois remplacer le « 5 » par l’option « slide_duration » qui est incluse dans le widget ci-dessous comme vous pouvez le voir. Comment dois-je faire?

<?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); ?> />&nbsp;<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');


?>

S’il vous plaît laissez-moi savoir si vous avez besoin de plus de précisions. Merci!

Solution n°1 trouvée

dans form() ajouter :

<input type="hidden" id="slide_duration" value="<?php echo $slide_duration;?>">

puis utilisez à la place de auto : 5 ceci :

auto: $("#widgets-right #slide_duration").val()

Qu’en est-il d’une solution php ? Dans pixy_asd() :

$options = get_option('Slides_Widget');
$slide_duration = $options['slide_duration'];
?>
...
$('.slides_widget').jcarousel({
    auto: <?php echo $slide_duration;?>,
    wrap: 'last',