Here, we will see how to create a slick slider carousel with the sliding direction right to left using html, css and jquery. We must need to add direction as data attribute to the html element. Follow the below snippet to create slick slider direction with responsive design.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>Slick Slider Direction Right To Left</title>
</head>
<body>
<div class="main">
<div class="slide-show" dir="rtl">
<div><h2>1</h2></div>
<div><h2>2</h2></div>
<div><h2>3</h2></div>
<div><h2>4</h2></div>
<div><h2>5</h2></div>
<div><h2>6</h2></div>
</div>
</div>
</body>
<script>
$('.slide-show').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
arrow: true,
dots: true,
rtl: true
});
</script>
</html> Create an external stylesheet and add it to the above example to create responsive slick slider with the direction right to left sliding.
body{
background:#ccc;
}
.main {
font-family:Arial;
width:500px;
display:block;
margin:0 auto;
}
h2 {
background: #FFD700;
color: #0000CD;
font-size: 36px;
line-height: 100px;
margin: 10px;
padding: 2%;
position: relative;
text-align: center;
}
More examples from slick slider codepen – click here
