JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<div class="box">
<ul>
    <li>foo</li>
    <li>bar</li>
    <li><a href="#child-items">slide is here<br /><div class="in">
        <img src="http://placehold.it/100x150&text=01">
        <img src="http://placehold.it/100x150&text=02">
        <img src="http://placehold.it/100x150&text=03"></div></li>
</ul>
</div>

<div id="child-items">
分院
</div>

CSS

.box {overflow:hidden;cursor:pointer;}
.box a{text-decoration:none;color:#000;}
.box li{
    display:block;
    width:100px; 
    height:150px;
    background:#eee;
    margin-right:10px;
    float:left;
}
#child-items{
    margin-top:1500px;
}

JavaScript

$(document).ready(function() {
       $('.box').click(function() {
        window.location = $(this).find('a').attr('href');
        return false;
    });
    
    $('.in img:gt(0)').hide();
setInterval(function() {
    $('.in :first-child').fadeOut().next('img').fadeIn().end().appendTo('.in');
}, 4500);
    
});