Breaking News: Grepper is joining You.com. Read the official announcement!

ok i want slider in this HTML so please modify this createNewSlider()

Prickly Pigeon answered on November 12, 2023 Popularity 1/10 Helpfulness 1/10

answer ok i want slider in this HTML so please modify this createNewSlider()

ok i want slider in this HTML so please modify this createNewSlider()

Comment

function createNewSlider(sectionNumber) {
    // JavaScript variable containing image URLs
    var images = [
        'https://placehold.co/1000x300/pink/hotpink/png',
        'https://placehold.co/1000x300/orange/hotpink/png',
        'https://placehold.co/1000x300/black/hotpink/png'
    ];

    var newSlider = document.createElement('div');
    newSlider.classList.add('carousel', 'slide');
    newSlider.setAttribute('data-ride', 'carousel');

    var carouselInner = document.createElement('div');
    carouselInner.classList.add('carousel-inner');

    images.forEach(function (imageUrl, index) {
        var carouselItem = document.createElement('div');
        carouselItem.classList.add('carousel-item');
        if (index === 0) {
            carouselItem.classList.add('active');
        }

        var img = document.createElement('img');
        img.src = imageUrl;
        img.classList.add('d-block', 'w-100');
        img.alt = 'Image ' + (index + 1);

        carouselItem.appendChild(img);
        carouselInner.appendChild(carouselItem);
    });

    newSlider.appendChild(carouselInner);

    // Append the new slider to the container
    var sectionContainer = document.createElement('section');
    sectionContainer.classList.add('section-container');
    sectionContainer.id = 'section-container-' + sectionNumber;

    var editRow = document.createElement('div');
    editRow.classList.add('row', 'edit-row', 'mt-20');

    var col10 = document.createElement('div');
    col10.classList.add('col-10', 'col-sm-10', 'col-md-10', 'col-lg-10', 'col-xl-10', 'col-xxl-10');

    var col2 = document.createElement('div');
    col2.classList.add('col-2', 'col-sm-2', 'col-md-2', 'col-lg-2', 'col-xl-2', 'col-xxl-2', 'text-center');

    var editOperation = document.createElement('div');
    editOperation.classList.add('edit-operation');
    editOperation.id = 'edit-operation-' + sectionNumber;

    var editButton = document.createElement('button');
    editButton.type = 'button';
    editButton.classList.add('btn', 'btn-primary');
    editButton.id = 'EditBtn-' + sectionNumber;
    editButton.onclick = function () {
        showsliderpopup('EditBtn', sectionNumber);
    };
    editButton.textContent = 'Edit';

    editOperation.appendChild(editButton);
    col2.appendChild(editOperation);
    editRow.appendChild(col10);
    editRow.appendChild(col2);

    var row = document.createElement('div');
    row.classList.add('row');

    var col12 = document.createElement('div');
    col12.classList.add('col-12', 'col-sm-12', 'col-md-12', 'col-lg-12', 'col-xl-12', 'col-xxl-12');
    col12.id = 'append-slider-child-' + sectionNumber;

    row.appendChild(col12);

    sectionContainer.appendChild(editRow);
    sectionContainer.appendChild(row);
    document.querySelector('.section-content-container').appendChild(sectionContainer);
    document.querySelector('#append-slider-child-' + sectionNumber).appendChild(newSlider);

    // Initialize the new carousel
    $(newSlider).carousel();
}

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: chat.openai.com

Tags: html javascript slider this

Link to this answer
Share Copy Link

Contributed on Nov 12 2023

Prickly Pigeon

0 Answers Avg Quality 2/10

ok i want slider in this HTML so please modify this createNewSlider()

Contents

More Related Answers

ok i want slider in this HTML so please modify this createNewSlider()

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.