Cycle2 and hash values for multiple slideshows

HTML

<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.ba-bbq/1.2.1/jquery.ba-bbq.min.js"></script>
<div id="a">
        
            <img src="http://jquery.malsup.com/cycle2/images/p1.jpg" alt="a1">
       
            <img src="http://jquery.malsup.com/cycle2/images/p2.jpg" alt="a1">
       
            <img src="http://jquery.malsup.com/cycle2/images/p3.jpg" alt="a1">
       
            <img src="http://jquery.malsup.com/cycle2/images/p4.jpg" alt="a1">
       
        <div class="controls">	<a href="#" class="p">Prev</a>
	<a href="#" class="n">Next</a>

        </div>
    </div>

CSS

#a, #b {
    width: 432px;
    margin: 0 10px 10px 0;
    display: inline-block;
}

img {
    width: 100px;
    height: auto;
}
.controls {
    display: flex;
}
.controls a {
    display: block;
    flex: 1;
}
.p {
    padding: 10px;
    background: #343b43;
    opacity: 0.5;
    z-index: 101;
    color: white;
}
.n {
    padding: 10px;
    background: #343b43;
    opacity: 0.5;
    z-index: 101;
    color: white;
    text-align: right;
}
.p:hover, .p:focus, .n:hover, .n:focus {
    opacity: 1.0;
}

JavaScript

$("#a").cycle({
    fx:'carousel',
    timeout:1000,
    carouselVisible:3
});