Menu Close

Slick Slider Right To Left With Example


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">
    <link rel="stylesheet" type="text/css" href=""/>
    <link rel="stylesheet" type="text/css" href=""/>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <title>Slick Slider Direction Right To Left</title>
    <div class="main">
        <div class="slide-show" dir="rtl">
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 1,
            arrow: true,
            dots: true,
            rtl: true

Create an external stylesheet and add it to the above example to create responsive slick slider with the direction right to left sliding.

.main {
  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


Posted in HTML, jQuery

You can also read...