I have used multiple slick slider i want my image to be look small and should look like this.
It should have buuton also as shown in image..My code is working for slider and everything.Only the issue is image should look like below and should have next and perivous button on it.
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/slick-theme.css" />
<link rel="stylesheet" type="text/css" href="css/slick.css" />
<script type="text/javascript" src="js/slick.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('.multiples').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll:1,
dots:true,
arrows: true,
autoplay: true,
autoplaySpeed: 2000,
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('.multiples1').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll:1,
dots:true,
arrows: true,
autoplay: true,
autoplaySpeed: 2000,
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('.multiples2').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll:1,
dots:true,
arrows: true,
autoplay: true,
autoplaySpeed: 2000,
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('.multiples3').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll:1,
dots:true,
arrows: true,
autoplay: true,
autoplaySpeed: 2000,
});
});
</script>
<div class="container">
<div>
<h3 style="text-align: center; margin-top: 23px; font-size: xx-large; text-decoration: underline">
SPORT SHOES</h3>
</div>
<hr />
<div id="Div2" class="multiples" runat="server">
<img src="images/mrshoes/Nike-LunarEpic-Low-Flyknit-843764-301.jpg" />
<img src="images/mrshoes/Nike-LunarEpic-Low-Flyknit-843764-301.jpg" alt="" />
<img src="images/mrshoes/Nike-LunarEpic-Flyknit-Red-Black-TTL-CRMSN.jpg" alt="" />
<img src="images/mrshoes/Nike-Free-Run-OG-14-BR-running-shoes-.jpg" alt="" />
<img src="images/mrshoes/Nike-LunarEpic-Low-Flyknit-843764-301.jpg" alt="" />
</div>
</div>
<div>
<h3 style="text-align: center; margin-top: -31px; font-size: xx-large; text-decoration: underline">
SLIPPERS</h3>
</div>
<hr />
<div id="div3" class="multiples1" runat="server">
<img src="images/mrshoes/sl1.jpg" />
<img src="images/mrshoes/sl2.jpg" alt="" />
<img src="images/mrshoes/sl3.jpg" alt="" />
<img src="images/mrshoes/sl4.jpg" alt="" />
<img src="images/mrshoes/sl5.jpg" alt="" />
</div>
<div>
<h3 style="text-align: center; margin-top: -14px; font-size: xx-large; text-decoration: underline">
FORMAL SHOES
</h3>
</div>
<hr />
<div id="div4" class="multiples1" runat="server">
<img src="images/mrshoes/f1.jpg" />
<img src="images/mrshoes/f2.jpg" alt="" />
<img src="images/mrshoes/f3.jpg" alt="" />
<img src="images/mrshoes/f4.jpg" alt="" />
<img src="images/mrshoes/f5.jpg" alt="" />
</div>
<div>
<h3 style="text-align: center; margin-top: -31px; font-size: xx-large; text-decoration: underline">
LOAFERS SHOES
</h3>
</div>
<div id="div5" class="multiples3" runat="server">
<img src="images/mrshoes/l1.jpg" width="" />
<img src="images/mrshoes/l2.jpg" alt="" />
<img src="images/mrshoes/l3.jpg" alt="" />
<img src="images/mrshoes/l4.jpg" alt="" />
<img src="images/mrshoes/l4.jpg" alt="" />
<img src="images/mrshoes/l4.jpg" alt="" />
</div>
i have total 3 slider for it all want same effect on image.For demo plz use any image afterwards i will make changes in it.