JSFiddle - React, Tailwind, and code Playground

by ashfame

HTML

<script src="https://raw.github.com/jcobb/basic-jquery-slider/master/js/basic-jquery-slider.min.js"></script>
<div id="ashfame">  <!-- attach a slider here -->
<ul class="bjqs">
    <li>
        <div> <!-- attach a slider here -->
            <ul>
                <li>slide.1.1</li>
                <li>slide.1.2</li>
                <li>slide.1.3</li>
                <li>slide.1.4</li>
                <li>slide.1.5</li>
                <li>slide.1.6</li><li>slide.1.7</li><li>slide.1.8</li>
            </ul>
        </div>
    </li>
    <li>
        <div> <!-- attach a slider here -->
            <ul>
                <li>slide.2.1</li><li>slide.2.2</li><li>slide.2.3</li><li>slide.2.4</li><li>slide.2.5</li>
            </ul>
        </div>
    </li>
    <li>
        <div> <!-- attach a slider here -->
            <ul>
                <li>slide.3.1</li>
                <li>slide.3.2</li>
                <li>slide.3.3</li>
            </ul>
        </div>
    </li>
</ul>
</div>

CSS

#ashfame li {}
.red{color:red;}

#slide-parent-0 {backgroud:yellow;}
#slide-parent-1 {backgroud:red;}
#slide-parent-2 {backgroud:green;}

JavaScript

$(document).ready(function() {

    // set width of every ul = no of li X width of li
    $('#ashfame > ul').each(function() {

        console.log('start');

        //console.log('this ul has ', $(this).children().size(), 'elements');
        //console.log('width of li', $(this).children().width());
        //$(this).width($(this).children().size() * $(this).children().width());
        $(this).children().find('div').each(function() {
            var attachingpt = $(this);
            console.log('attachingpt', attachingpt);
            console.log('parent', $(attachingpt).parent());
            console.log('index', $('#ashfame > ul > li').index($(attachingpt).parent()));
            $(attachingpt).attr('id', 'slide-parent-' + $('#ashfame > ul > li').index($(attachingpt).parent()));
            $(attachingpt).find('ul').addClass('bjqs');

            $(attachingpt).bjqs({
                'width': 600,
                'height': 340,
                'automatic': true,
                'rotationSpeed': 1000,
                'showMarkers': false,
                'showControls': false,
                'centerMarkers': false
            });
        });

    });

    $('#ashfame').bjqs({
        'width': 600,
        'height': 340,
        'automatic': true,
        'rotationSpeed': 1000,
        'showMarkers': false,
        'showControls': false,
        'centerMarkers': false
    });

});