JSFiddle - React, Tailwind, and code Playground

by Mottie

HTML

<script src="http://proloser.github.com/AnythingSlider/js/jquery.anythingslider.js"></script>
<link rel="stylesheet" href="http://proloser.github.com/AnythingSlider/css/anythingslider.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
<br><br>

<ul id="slider">
    
    <li><img src="http://proloser.github.com/AnythingSlider/images/slide-civil-1.jpg" alt="" /></li>
    <li class="panel2">
        <div id="accordion">
            <div>
                <h3><a href="#">First</a></h3>
                <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
            </div>
            <div>
                <h3><a href="#">Second</a></h3>
                <div>Phasellus mattis tincidunt nibh.</div>
            </div>
            <div>
                <h3><a href="#">Third</a></h3>
                <div>Nam dui erat, auctor a, dignissim quis.</div>
            </div>
        </div>
    </li>
    
    <li><img src="http://proloser.github.com/AnythingSlider/images/slide-civil-2.jpg" alt="" /></li>
    
    <li><img src="http://proloser.github.com/AnythingSlider/images/slide-env-2.jpg" alt="" /></li>
    
</ul>

CSS

.panel2 { height: 350px; }

JavaScript

$('#slider').anythingSlider({
    startPanel: 1,
    buildArrows: false,
    autoPlay: false,
    width: 600,
    // if resizeContent is false, this is the default width if panel size is not defined
    height: 350,
    // if resizeContent is false, this is the default height if panel size is not defined
    resizeContents: false,
    // If true, solitary images/objects in the panel will expand to fit the viewport
    startStopped: true,
    // If autoPlay is on, this can force it to start stopped
    navigationFormatter: function(index, panel) { // Format navigation labels with text
        return ['home', 'menu', 'find us', 'order online', 'cater', 'contact'][index - 1];
    }
});

$("#accordion").accordion({
    header: "h3"
});