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.
HTML:
<!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> CSS:
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 for slick slider
Popular Posts
- Show / Hide div based on dropdown selected using jQuery
- Autosuggestion Select Box using HTML5 Datalist, PHP and MySQL with Example
- Infinite Scrolling on PHP website using jQuery and Ajax with example
- How to Convert MySQL Data to JSON using PHP
- Custom Authentication Login And Registration Using Laravel 8
- Image Lazy loading Using Slick Slider
- Slick Slider Basic With Example
- Google Login or Sign In with Angular Application
- How to change date format in PHP?
- php in_array check for multiple values
- Adaptive Height In Slick Slider
- Slick Slider Center Mode With Example
- How to Scroll to an Element with Vue 3 and ?
- JavaScript Multiple File Upload Progress Bar Using Ajax With PHP
- Slick Slider Multiple Items With Example