Как воссоздать div - PullRequest
Новая
       35

Как воссоздать div

1 голос
/ 08 июня 2019

У меня html-страница содержит div с именем wowslider-container1.Я хочу воссоздать элементы внутри wowslider-container1, когда значения таких свойств, как длительность и задержка, изменятся.Если я создам еще один слайдер, он создаст несколько слайдеров.Если я спрячусь, оба спрячутся.Что я могу сделать?Мне не нужно несколько ползунков. 

Duration:<input type="number" id="txtDuration" />
&nbsp;&nbsp;Delay<input type="number" id="txtDelay" />
<button onclick="set()">Set </button>
<br/>
<br/>
<div>
    <div id="wowslider-container1">
        <div class="ws_images">
            <ul>
                <li>
                    <a href='SBG_ANA2019_Brochure.pdf' target='_blank' title='Consign.' style="cursor: pointer">
                        <img id="wows1_0" class="imgMain" src="SBG_HomePg_ANA2019_1146x405V3.jpg" len="0" alt="Consign." />
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

скрипт 

var delay_value=100;
var duration_value=20;

function set() {
    var dur=document.getElementById("txtDuration").value;
    var del=document.getElementById("txtDelay").value;
    setDuration(del, dur);
}

function setDuration(delay,duration) {
    delay_value=delay;
    duration_value=duration;
    jQuery("#wowslider-container1").wowSlider({
        effect: "fade",
        prev: "",
        next: "",
        duration: duration_value * 100,
        delay: delay_value * 100,
        width: 900, height: 640,
        autoPlay: true,
        autoPlayVideo: false,
        playPause: true,
        stopOnHover: false,
        loop: false,
        bullets: 0,
        caption: false,
        captionEffect: "parallax",
        controls: true,
        controlsThumb: false,
        responsive: 1,
        fullScreen: false,
        gestures: 2,
        onBeforeStep: 0,
        images: 0
    });
}

setDuration(20,100);

1 Ответ

1 голос
/ 08 июня 2019

API показывает, что параметры могут быть установлены только во время инициализации ползунка (и нет события destroy()), поэтому вам придется удалить события / элементы и перезапустить ползунок:

http://wowslider.com/help/wowslider-api-184.html

HTML: 

Duration: <input type="number" id="txtDuration">
Delay: <input type="number" id="txtDelay">
<button onclick="set()">Set </button>
<br><br>
<div class="wow-slider-container">
    <div class="wow-slider">
        <div class="images">
            <ul>
                <li>
                    <a href='SBG_ANA2019_Brochure.pdf' target='_blank' title='Consign.' style="cursor:pointer">
                        <img id="wows1_0" class="imgMain" src='SBG_HomePg_ANA2019_1146x405V3.jpg' len='0' alt="Consign.">
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

Javascript: 

<script type="text/javascript">
    var wowSliderOptions = {
        effect: 'fade',
        prev: '',
        next: '',
        duration: 20,
        delay: 100,
        width: 900,
        height: 640,
        autoPlay: true,
        autoPlayVideo: false,
        playPause: true,
        stopOnHover: false,
        loop: false,
        bullets: 0,
        caption: false,
        captionEffect: 'parallax',
        controls: true,
        controlsThumb: false,
        responsive: 1,
        fullScreen: false,
        gestures: 2,
        onBeforeStep: 0,
        images: 0
    }

    var wowSliderContent = jQuery('.wow-slider').html();
    var wowSlider = jQuery('.wow-slider').wowSlider(wowSliderOptions);

    function set() {
        // Set user-defined options
        wowSliderOptions.duration = document.getElementById('txtDuration').value;
        wowSliderOptions.delay = document.getElementById('txtDelay').value;

        // Remove original WOW Slider instance
        wowSlider.remove();

        // Recreate original HTML slides
        jQuery('.wow-slider-container').html(wowSliderContent);

        // Start WOW Slider
        wowSlider = jQuery('.wow-slider').wowSlider(wowSliderOptions);
    }
</script>
...