Слайдер jquery не работает в визуальном композиторе

Question

Я пытаюсь создать собственный короткий код в Visual Composer, когда я применяю текст, заголовок, отдельные изображения, все было нормально, но теперь у меня есть требование создать собственный короткий код с помощью ползунка, мой jQuery не может работать с ползунком, JQuery включен Я проверил это, но изображения не отображаются в виде слайдера, он отображается как отдельные изображения. Я написал свой "div" для каждого цикла это правильно?

Мой код для изображений

foreach($image_ids as $image_id)
{
    $images = wp_get_attachment_image_src($image_id, 'company_logo');

    $html.= '<div id="slideshow"><a href="#" class="slideshow-prev">&laquo;</a><ul><li>';
    $html.='<img src="'.$images[0].'" alt="'.$atts['title'].'">';
    $html.= '</li></ul><a href="#" class="slideshow-next">&raquo;</a></div>';

    $images++;
}

Код jQuery:

//an image width in pixels 
var imageWidth = 600;

//DOM and all content is loaded 
$(window).ready(function () {

    var currentImage = 0;

    //set image count 
    var allImages = $('#slideshow li img').length;

    //setup slideshow frame width
    $('#slideshow ul').width(allImages * imageWidth);

    //attach click event to slideshow buttons
    $('.slideshow-next').click(function () {

        //increase image counter
        currentImage++;
        //if we are at the end let set it to 0
        if (currentImage >= allImages) currentImage = 0;
        //calcualte and set position
        setFramePosition(currentImage);

    });

    $('.slideshow-prev').click(function () {

        //decrease image counter
        currentImage--;
        //if we are at the end let set it to 0
        if (currentImage < 0) currentImage = allImages - 1;
        //calcualte and set position
        setFramePosition(currentImage);

    });

});

//calculate the slideshow frame position and animate it to the new position
function setFramePosition(pos) {

    //calculate position
    var px = imageWidth * pos * -1;
    //set ul left position
    $('#slideshow ul').animate({
        left: px
    }, 300);
}

Answer 1

Ваш цикл for неправильный. попробуй это.

    $Inc = 0;

    foreach($image_ids as $image_id)
    {
        $images = wp_get_attachment_image_src($image_id, 'company_logo');

        $html.= '<div id="slideshow"><a href="#" class="slideshow-prev">&laquo;</a><ul><li>';
        $html.='<img src="'.$images[$Inc].'" alt="'.$atts['title'].'">';
        $html.= '</li></ul><a href="#" class="slideshow-next">&raquo;</a></div>';

        $images++;
        $Inc++;
    }

и ваш JS

    //an image width in pixels 
    var imageWidth = 600;


    //DOM and all content is loaded 
    jQuery(document).ready(function($){

        var currentImage = 0;

        //set image count 
        var allImages = $('#slideshow li img').length;

        //setup slideshow frame width
        $('#slideshow ul').width(allImages * imageWidth);

        //attach click event to slideshow buttons
        $('.slideshow-next').click(function () {

            //increase image counter
            currentImage++;
            //if we are at the end let set it to 0
            if (currentImage >= allImages) currentImage = 0;
            //calcualte and set position
            setFramePosition(currentImage);

        });

        $('.slideshow-prev').click(function () {

            //decrease image counter
            currentImage--;
            //if we are at the end let set it to 0
            if (currentImage < 0) currentImage = allImages - 1;
            //calcualte and set position
            setFramePosition(currentImage);

        });

    });

    //calculate the slideshow frame position and animate it to the new position
    //calculate the slideshow frame position and animate it to the new position
    function setFramePosition(pos) {

        //calculate position
        var px = imageWidth * pos * -1;
        //set ul left position
        jQuery('#slideshow ul').animate({
            left: px
        }, 300);
    }