React-slick: Option to Keep dots on the left or right Vertically

[cjithu]

Is there a possibility to keep the dots on the left or right so that, vertical scroll towards end of section moving to next section either up or down.

Can anyone help to create something like that.

[laveesingh]

I believe you can achieve that with dotsClass prop and custom CSS.

[ozgurshn]

You can achieve vertical dots on right side like this:
Set this property in Slider settings.
dotsClass:"vertical-dots"

in slick-theme.css add Css below

.vertical-dots
{
    right:10px;
    list-style: none;
    display: block;
    position: absolute;
    top: 40%;
    margin-top: -10px;
    text-align: right;
}
.vertical-dots li
{
    position: relative;
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.vertical-dots li button
{
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.vertical-dots li button:hover,
.vertical-dots li button:focus
{
    outline: none;
}
.vertical-dots li button:hover:before,
.vertical-dots li button:focus:before
{
    opacity: 1;
}
.vertical-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.vertical-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}