Many times we use a slider to store more than one image or post in one place by utilizing space better. There are many types of sliders available with different pagination styles, number pagination, arrows pagination, draggable slider, etc.
In this article, we discuss the dot pagination slider where the active dot is at the center.
Approach: We use slick slider JavaScript and CSS to create active dots at the center pagination. We have three files “index.html”, “style.css” and “script.js”.
Implementation of active dot slider: We are implementing dot pagination to keep active dots at the center. We need HTML, CSS, and JavaScript files. In the HTML file create the structure of the slider with dot pagination, and provide style using CSS. We use JavaScript code to keep the active dot of the pagination at the center.
Note: First, Download Slick CSS and Slick JavaScript.
Step 1: Create an HTML template
In this example, we will use the Slick CSS library and JavaScript.
- Add CSS and JavaScript files using HTML <link> tag and HTML script tag.
- We create an HTML div with a class name “container”. We create another two divs with classes “slider” and “slider_dots” in the “container” class.
- In the “slider” class, we make five slides for images. The developer can add as many numbers of sliders according to your need. In the “slider_dots” class, we write pagination, with the “slider_navigators” class.
HTML code:
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href=
<script src=
</script>
<script type="text/javascript" src=
</script>
<link rel="stylesheet" href="style.css" />
<script src="script.js" type="text/javascript" charset="utf-8">
</script>
</head>
<body>
<div class="container">
<div class="slider">
<div class="slide">
<img src=
</div>
<div class="slide">
<img src=
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT0HYumJ-adUUU3vp4-gZl27hRUgODZ5ao1Gg&usqp=CAU" />
</div>
<div class="slide">
<img src=
</div>
<div class="slide">
<img src=
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-QVXQCmxGfWhULFkxf3jUUqMHLfO91t1FBg&usqp=CAU" />
</div>
<div class="slide">
<img src=
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQvafvmdgz82hhas5ohUVHR52ZHKrnFfardEw&usqp=CAU" />
</div>
</div>
<div class="slider_dots">
<div class="slider_navigators"></div>
<div class="slider_navigators"></div>
<div class="slider_navigators"></div>
<div class="slider_navigators"></div>
<div class="slider_navigators"></div>
</div>
</div>
</body>
</html>
|
Step 2: CSS code
- We set the width for the “slider” and “slider_dots” classes. Set width, and height for slider images.
- We can apply “slick-active”, and “slick-current” classes of Slick CSS on “slider_dots” and “slider_navigators” directly.
style.css:
.container { margin: 50px;
padding: 50px;
} .slider, .slider_dots { width: 200px;
} .slide img { display: block;
width: 100%;
height: auto;
} .slider_dots .slider_navigators { height: 20px;
background-color: #9E9E9E;
border-radius: 50%;
margin: 10px;
transform: scale(0.4);
outline: none;
cursor: pointer;
} .slider_dots .slider_navigators.slick-active { transform: scale(0.70);
} .slider_navigators.slick-active.slick-current { transform: scale(1);
background-color: #00f;
} |
Step 3: JavaScript code
We use JavaScript to keep the pagination active dot at the center.
- We need to take the document.ready() function. We set parameters for .slider and .slider_dots classes.
- In the .slider class, we set the loop of images as “infinite: true”, then default dots and arrow is set to “false”.
- The “asNavFor” parameter takes the value of the ” .slider_dots” class. We set “slidesToShow” and “slidesToScroll” to 1 to show one at a time.
- Other settings are done in a similar manner according to the need.
- We want to keep the dot at the center, so we set the “centerMode: true” and the “focusOnSelect” is also true.
- Set the “centerPadding” to 20%.
script.js:
$(document).ready(function() {
$(".slider").slick({
infinite: true,
dots: false,
arrows: false,
asNavFor: '.slider_dots',
slidesToShow: 1,
slidesToScroll: 1,
});
$('.slider_dots').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider',
arrows: false,
dots: false,
centerMode: true,
focusOnSelect: true,
centerPadding: '20%',
});
}); |
Output: Check the output live.
Active dot center output